图片优化:photoshop的“存储为web所用格式...”或许可以抛弃不用了!

做过seo或网站的人都应该知晓,在web网站上的图片(包括app之类)如果加载太多,就会严重影响页面的加载速度(你可以选择用百度统计提供的网站速度诊断工具查看),从而对网站的用户体验和seo等,都会造成一定的障碍。

网站速度诊断

(图示,你可以通过网站速度诊断工具去观察页面中图片大小与加载速度的关联)

为了优化图片的加载,各种前端技术手段层出不穷,例如:懒加载技术jquery.lazyload.js

然而如同做菜一样,有好的食材才是最根本的保证,虽然你可以加入花椒、油盐等佐料,但你不能确保仅拿臭豆腐就能做出一锅受到大众普遍欢迎的美味鱼头豆腐汤来。

美味鱼头豆腐汤

对于图片优化来说,前端的各种技术就如同佐料,起到的锦上添花之作用,而最基本的“食材”就是要在保持图片质量(经过压缩的图片在视觉浏览上不造成明显的影响)的前提下,尽量减少图片在存储时的文件大小

因此,在图片在出厂时,就要做好质量把控,让图片文件尽可能地小(指存贮大小,不是尺寸大小)。好在这并不是一件困难的事,如果你的图片是在photoshop中加工生产制作的话,那选择就是存储时,你是否有对图片做了优化输出。

过去十多年来,华哥在存储网站所用的图片时,通常使用的是这一功能——文件->导出->存诸为web所用格式。一直没有觉得什么不好,但是ps的升级更新太快了(我是从photoshop5.0开始使用的,现在使用的是photoshop cc2015,也这是个不太新的版本)。

在使用苹果版的photoshop cc2015时,发现“存诸为web所用格式”这个菜单名后面追加了两字:旧版。

存诸为web所用格式

华哥是网页设计师出身,不是干印刷设计的,以前常建议做网页图片要使用photoshop的最新版,为什么要使用最新版的photoshop呢,不是追求那些什么新增加的nb功能,很多根本都用不上,而是新版的photoshop对于web图片的优化存储,会有更好的算法。

当然,我是猜的。我跟adobe公司没有任何联系,没有任何内部资料可以获取。

接下来是实践“导出为...”和“存储为web所用格式(旧版)...”,看看这个“导出为...”在图片存储优化方面是不是算法有大提升。

以下是数据。

图片保存导出为...

导出为...选择格式为jpg,压缩质量为60%,1024像素宽度的图片文件大小为20.5kb。

存储为web所用格式图片文件大小

选择“存储为web所用格式”,同样为jpg格式,1024宽度,压缩比为60%,最终图片大小为44.19k,是“导出为...”的一倍。

两相比较,追求图片优化的你,会选择哪个?

答案不言而喻。看来,photoshop的“存储为web所用格式...”或许可以抛弃不用了!

相关文章

发表回复

您的电子邮箱地址不会被公开。 必填项已用*标注