如题，今天没有生活分享，这篇文章我主要科普一下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行，我们这里多加一行代码

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

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

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

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

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

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

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

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

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

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

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

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

避免使用cos和oss储存图片

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

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

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

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

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

怎样转换webp格式的图片

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

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

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

zhitu.isux.us https://zhitu.isux.us ↗

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

squoosh.app 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 );

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