合理而精致的配图是网页富媒体化的重要实现途径之一，不论是衬托的背景、形象的插图，或者是修饰性的小图标，在很大程度上能为用户带来更丰富更愉悦的阅读体验。在SEO的概念中图片的优化涉及到很多方面，而在速度方面的优化主要是它们的体积，品质的高低、尺寸的大小、保存的格式等因素都会对体积有影响。
现在针对WordPress有很多的脚本、插件或者在线工具都可以帮助我们优化图片体积，技术上不会存在很大的难度，关键就是你在品质、尺寸等角度如何去权衡取舍以达到预期的体积压缩效果。
CSS Sprites技术
正如我们在域名切分内容中提过的，提高网页显示速度最有效的一个方法，是减少页面的HTTP请求次数。而针对页面中调用的图片资源而言，为了减少HTTP请求次数，最直接有效的方法是使用CSS Sprites机制，这几乎可以算是老生常谈的技法。CSS Sprites中文翻译过来你叫它CSS精灵或者CSS雪碧都没关系，关键是弄明白其中的原理，就是把多张图片合并排列到一张大图片里面，通过CSS定位来显示图片中特定的一部分。
CSS Sprite的运用可以很有效的提升页面速度，尤其是在网页中使用很多小图标的时候。但是在制作大图和编写CSS的时候，对元素的位置和尺寸的把握需要几乎绝对的精确，各个图像元素的尺寸以及间距都必须以像素为单位计算清楚并对齐，否则很容易出现偏移或错位的情况。
当然，任何一种应用广泛的主流技术，都很容易衍生出相对应的便利化实现途径，包括CSS Sprites也一样，稍微搜索一下就可以发现很多在线或离线的辅助工具，其中也包含了一款名为GuideGuide的免费Photoshop插件。
EWWW Image Optimizer插件
WordPress关于图片体积优化的插件有很多，这在很大程度上简化了优化工作的繁琐性，因为插件的机制基本上意味着可以帮助我们在线优化那些已经上传的图片，甚至是与主题和其它插件相关的图片。试想如果你比较青睐自己在本地电脑上使用PS等软件离线压缩优化图片的方式，那么基本的流程包括：下载保存原始图片之后从网站上删除，处理优化之后重新上传，并把它放回原来的位置...
西米CC推荐一款名为EWWW Image Optimizer的免费图片优化插件，它会尽可能全面地扫描WordPress中所调用的图片资源，并在显示品质和压缩率方面进行最优化的精简。
通常情况下EWWW Image Optimizer可压缩精简的图片体积，基本能保证节约至少30%的空间。它另外还以一个基于云端API的收费版本，1000张图片3美元的费用标准，对于有更高要求的用户而言也不算很高。
TinyPNG在线工具
如果你对插件的静默式优化不是很习惯，想自己进行更多手动干预和对比的话，除了运用PS等软件工具之外，西米CC在这里推荐TinyPNG.com在线图片优化工具。不要被它的名字迷惑，TinyPNG支持PNG和JPG两种主流格式，你只需要简单地在网页界面上传图片，很快就为你生成优化后的图片素材下载链接。如果你对图片处理有一点技术基础，建议你在把图片真正放到网站上之前，对优化结果的参数和品质稍作检查，但绝大多数时候TinyPNG并不会让你的图片损失太多质量。
上图是通过TinyPNG优化后的图片数据对比，可以看见在优化后图片的体积压缩了68%的幅度，从原来的47K精简到了15K的大小。可以想象如果是一个大型网站或者是图片展示类网站，通过图片优化可以节省出来的资源是相当可观。
- 赞助本站
- 微信扫一扫
-
- 加入Q群
- QQ扫一扫
-
评论