如题,今天没有生活分享,这篇文章我主要科普一下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图片
squoosh,一个可以在线转换webp格式图片的网站
可以选择一个适合自己的工具,但是建议第一个智图,在线转换网站不可能一直公益给我们使用
让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 );
基本上就分享这么多,晚安,我的朋友们