Beginner Guide -JPEG/PNG OPTIMIZE

Convert Pictures To WEBP Image

一般来说,为了能让网站能有更快的Loading,我们都是会向最简单的东西下手先的,那就是图片。
最普通的做法就是先把大Resolution的图片resize到我们需要的Pixel Size来达到更小的File Size或把不需要用到透明背景的PNG格式图片转换去JPEG格式的图片,
还有一种就是通过 TINY PNG/ TINY JPEG 来这类型的Image Compress网站来Compress我们的图片的File Size。

当然也有一些人会懂得使用Photoshop来把图片的File size弄小。

为什么要这样做呢?因为当图片的File Size变小了后,网页就可以以更快的时间来把图片Loading好。就好比用1辆车载来 100KG的东西和载了5KG的东西。哪个会比较快到达终点的原理一样。更定是载5KG的车先到重点的,对吗?

可是当要用到大Resolutions的图片时或清晰的图片时该如何做呢?而且有些图片如果通过Image Compress后, 图片的清晰度会变蒙掉的。要怎么办呢?

解决方法

我们可以把图片转换去WEBP这个格式。

什么是WebP

WEBP是什么来的?如果你一直有在做Speed Optimize或一直有在做Image Compress的话,你就会看到“WEBP”这个词了

WEBP是一种图片的格式。就类似JPEG、PNG这种格式一样。而WebP是由谷歌推出的新一代图片格式,在压缩率上比 JPEG 格式更优越,也是说同样的Resolution 5000 x 5000,JPEG格式的File Size可能是1.7MB而Webp可是的File Size只是几百KB而已。在同样的Resolution下,Webp拥有更小的File Size(大概会比JPEG小40% +/-)和与JPEG一样清晰的图片。

而通过以上的成绩来看,你可以看到在同样的Resolution里,Convert 去Webp的JPEG图竟然被从1.7MB压缩到503KB。减少了超过70%的File Size哦。

除了PNG可以做到透明背景之外,WEBP也是可以做到透明背景的。而且同样的也是File Size也是会比PNG的File Size来的更小。

除此之外,我们还没可以选着WEBP的图片无损比列。可以通过选着90%或50%无损来达到跟小的File Size。

100%无损的图片与File Size,在5000 X 3409PX的File Size为 503.4KB

而90%无损的图片在同样的Pixel下却只有282.1KB而已。

通过这两张图有没有发现到100%无损的WEBP和90%无损的WEBP是不是没有什么明显差别呢?

但是这两张图片其实是有差别的,只是很难被肉眼看到那个差别在哪里而已。

如果你把它调整到100% 无损VS 50无损%的话,你是会看到50%无损的WEBP是变BLUR的,所以不要觉得是没有差别的,它只是难以被肉眼发现而已。

如果需要清晰度高的话,就用100%无损的图片。如果是需要File Size小的话,可以选着降低无损的比率。

我要用多少%无损的WEBP?

对于要用多少%无损的WEBP图片是取决于你自己的生意/行业/要求的。
打个比方;我是的网站是教网页设计的,所以一般来说我都会用85%无损的WEBP的。

但是如果你是拍婚纱照的或是一些需要用到High Resolution的图片的用户,那最好是用100%的WEBP图片。因为每个人都喜欢漂亮美美的东西的,包括照片。如果使用了80%的无损WEBP,那会让客户以为你拍出来的照片是蒙的和不专业。

所以在选着要多少%无损图片时取决于你是的行业是需要清晰高的图片还是一般的图片就好了。

WEBP Converter

打开了Paint, AI, Photoshop等一些软件可是却发现到里面没有的Save as WEBP或把JPEG/PNG转换去WEBP的功能。而且外面很多图片库里的图片都是JPEG/PNG格式的,要去哪里找WEBP的图片哦?

这个时候你们可以询问伟大的GOOGLE了。只要在Google Search 里输入 WEBP CONVERTER 就可以找到很多免费或付费的JPEG/PNG Convert to WEBP的CONVERTER了。

这里我就不一一的去细说每个WEBP Converter网站的差别了。只要哪个用到比较顺手你就用哪个吧。

Enable Upload WEBP去你的Wordpress

你已经把图片转化去WEBP了,可是一上载去Wordpress时,却发现WordPress会显示以下的 ERROR Message 给你看。

“Sorry, this file type is not permitted for security reasons.”

其实要解决这个问题很简单而已,首先你需要安装 Code Snippets 这个Plugin,然后Activate它。

安装好了后, 去Snippets -> Add News。

然后在把里面的这些Code Copy进去里面。

//Enable WordPress to upload webp image files./
function webp_upload_mimes($existing_mimes) {
    $existing_mimes['webp'] = 'image/webp';
    return $existing_mimes;
}
add_filter('mime_types', 'webp_upload_mimes');

Title Name就放1个你们能看的明白这个Snippets的作用是做什么的就好了。

其他的setting就不用动,(Default setting 是”Run Snippets Everywhere”) 然后点击Save Change and Activate就好了。

做好了这一步后你就可以开始上载WEBP格式的图片去你的Wordpress了。

3 Comments

Leave a Reply

Your email address will not be published.