如题,今天没有生活分享,这篇文章我主要科普一下webp图片格式

首先让typecho支持webp格式图片这个标题说法是不准确的

因为typecho只是将图片上传显示,并没有对图片做各种的图片格式转换

还记得当初使用WordPress博客系统的时候,基本上写文章都喜欢用webp格式的图片

webp格式图片的优点就是体积小,图片清晰度高,在写文章的时候使用webp格式可以大大的提高用户体验

但是typecho的官方版本,是不支持webp格式的图片的,所以就要对官方程序包加一些小改动

我们打开typecho管理后台可以看到这个地方,是显示不支持webp图片的,但是没关系,我们可以自己加

对代码修改的地方也是不是很多,我来详细给大家说一下

找到typecho的程序包的这个位置

var/Widget/Themes/List.php,差不多是70多行

图片显示的代码是我修改之后的,你只需要将

return preg_match("/screenshot\.(jpg|png|gif|bmp|jpeg)/i",path);

改为

return preg_match("/screenshot\.(jpg|png|gif|bmp|jpeg|webp)/i",path);

然后找到

typecho的var/Widget/Abstract/Contents.php

差不多是686行

然后将

$value['attachment']->isImage = in_array($content['type'], array('jpg', 'jpeg', 'gif', 'png', 'tiff', 'bmp'));

改为

$value['attachment']->isImage = in_array($content['type'], array('jpg', 'jpeg', 'gif', 'png', 'tiff', 'bmp', 'webp'));

然后找到var/Typecho/Common.php,差不多是1399行,我们这里多加一行代码

'webp' => 'image/webp',

然后去typecho的后台,找到设置-基本,这个地方在其他文件加入webp,然后博客就可以完美支持webp格式图片了

为什么推荐使用webp格式图片

作为一个生活博主,具有随拍的习惯,喜欢用相机记录生活,这就意味着我有时候在写文章要上传很多图片

对我来说写博客最大的痛点就是,我希望我能上传更大分辨率,更清晰的图片上来

如果发原图在博客,有时候图片真的是很大,对访客阅读体验十分差,因为自己的服务器带宽也不是很大

很尴尬的事就是可能有时候访客已经把你文章的文字都读完了,图片还没加载出来

然后最简单解决方法就是文章少传图片,或者压缩一下图片再传,我实在是不想少传图片,或者传不清晰的图片

在有篇文章,因为原图很大,所以不得不对图片进行压缩处理,否则图片半天都没加载出来

被吾柯大佬吐槽是不是用座机拍的,哈哈哈,我也是很无奈,当然也有博友建议我使用速度很快的图床

用图床确实是一个可以解决这个烦恼的方法,但是不建议使用

曾经用WordPress的时候,喜欢使用图床存图片,但是现实是往往不幸的,我曾经使用过的图床,图床站长因为个人原因不得不被迫关停,自己博客文章一夜间接近丢失了500多张图片

想对比webp格式图片的优势就显现出来了,具有体积小和清晰的优点,完美的解决了我的烦恼

避免使用cos和oss储存图片

相信觉得大多数博主喜欢使用oss和cos储存图片,即使图片很大,也可以很快的加载出来

作为一个记录生活的博主,使用oss和cos就意味着成本增加,自己的博客本来就不怎么盈利,还要为图片增加额外支出

是一个不太明智的选择,cos和oss还会被一些不法之徒恶意刷流量,可能导致几千块钱的支出,相信各位站长也不乏有所听闻

某某站长因为cos,oss,cdn被刷5000块钱的情况,也不足为奇

不要认为自己是小站没人打,现实中确实不乏很无聊的人,有时候时不时给你来点攻击

怎样转换webp格式的图片

今天跟悟空博客的站长曾聊到这个问题,怎么把图片转为webp格式呢

这里我推荐几个在线转换的网站和工具

腾讯智图,提供离线转换webp图片

https://zhitu.isux.us

squoosh,一个可以在线转换webp格式图片的网站

https://squoosh.app

可以选择一个适合自己的工具,但是建议第一个智图,在线转换网站不可能一直公益给我们使用

让WordPress支持webp格式图片

因为我之前使用的博客系统是WordPress,当然也有让WordPress支持webp格式图片的方法

直接在自己的主题文件的function.php里面加入下面代码即可完美支持webp格式图片

//下方一段为webp格式图片支持代码 function bzg_filter_mime_types( $array ) { $array['webp'] = 'image/webp'; return $array; } add_filter( 'mime_types', 'bzg_filter_mime_types', 10, 1 ); 
//下方为webp格式图片在媒体库预览图像支持代码 function bzg_file_is_displayable_image($result, $path) { $info = @getimagesize( $path ); if($info['mime'] == 'image/webp') { $result = true; } return $result; } add_filter( 'file_is_displayable_image', 'bzg_file_is_displayable_image', 10, 2 );

基本上就分享这么多,晚安,我的朋友们