多语言展示
当前在线:1997今日阅读:19今日分享:20

图片压缩及优化

越来越多的网站采用大量的图片在网页设计中,图片的大小往往超过了网速的承受能力,但是我们是有办法让众多图片在很短的时间内让用户流畅清晰的看到的。
工具/原料
1

带调试工具的浏览器。

2

图片的压缩裁剪工具。

3

图片分发CDN。

方法/步骤
1

打开一个网站,我们以用谷歌浏览器(chrome)打开36kr.com为例。打开以后,按键盘的f12,调出调试工具。

2

点击工具中的小箭头,然后点击一个需要检查的图片。

3

问题一,图片尺寸和显示尺寸不符将鼠标移动到调试工具里选中的蓝色部分,能看到这个图片的信息。这个图片是是宽320像素,高200像素。但是显示的大小是宽260像素,高160像素。这样我们的这个图片就浪费了60x40=2400像素的体积,可能需要额外的几K数据传输才能被显示出来。10张这样的图片就是24000像素,几十K的数据。100张...200张...

4

问题二,图片质量过高我们再用上述方法查看另外一张图片我们下载这个图片。

7

完成后替换你原来的图片,就能大大提高网站图片的打开速度了。

9

解决了以上的三个问题,你的网站图片打开速度必定有质的飞越。最后希望你的网站越做越好。

注意事项
1

图片原图尺寸大,显示尺寸小会导致图片打开慢。

2

图片原始尺寸小,显示尺寸大会导致图片模糊。

3

用CDN的时候一定设置防盗链,不然别人用你的图片会让你损失钱。

推荐信息