网站图片优化：在用户体验与网站性能之间找到平衡
在说到优化网站速度时，我们经常提到网站内的图片大小。这是因为图片是网页数据大小中占有比重最大的一部分。但是在优化图片时，一个很大的问题在于图片的优化是没有硬性规则可循的。图像优化需要考虑三个问题：用户体验、吸引力和页面性能，并且总是会在这三项标准中寻求一个更好的平衡。
在移动设备上的网站，这个问题尤其凸显。首先，移动端对于网页加载速度的要求相比PC端更高，你无法在页面加载的过程中去方便的浏览其他页面或者做别的事情。其次，移动设备的屏幕相比pc小了太多，小图片呈现的信息量有限，而大图片很可能拖累页面加载速度，一直以来比较推荐的做法是图片大小适度的同时允许缩放。
通常来说，应用大图片在移动网站上不是什么好选择。因为与它们的大小相比，图片提供的信息量实在是有限，并且在它们加载完毕之前用户需要等待的时间也比较长。尤其是在响应式单栏网站设计中，由于一般认为图像应该填满屏幕宽度，因此等比例缩放后的图像可能占位过大，同时提供的信息量有限。
图片的大小是在页面质量与页面加载性能上的权衡，这种权衡并没有一个固定的标准，而这两样要素同样都关系到用户体验。
根据网上的调查研究表明，网站使用类型最多的静态图片是jpg与png。在移动网站上的jpg与png格式的图片平均大小分别为29KB和16KB。
减少图片大小一般从两方面着手：一方面是调整分辨率与图像尺寸，另一方面是对图片进行压缩。一些图片处理工具，比如PS，具有图片的压缩功能，但这个压缩的比例与性能往往不足以满足需求。有许多的专业图像压缩工具可以成批的处理图像的压缩工作。
是否应该针对不同设备使用不同大小的图片？
答案是肯定的。
首先需要明确一点，在网站的建设中，针对不同版本的设备，你需要准备的第一张图像永远是分辨率与屏幕最大的那一个。这个原则是公认的，因为准备好了最大的图像，在其他设备上的图片只要进行压缩或者裁剪就好。在这个原则下，有些网站虽然站点本身是自响应式，然而对图片并没有准备多个版本，当在小屏幕设备上展现时，用CSS代码让网站图片对设备进行自适应缩小。
然而这就出现了一个问题：图像压缩是在本地进行的，浏览设备需要先将原始大小的图片下载下来，再进行缩放。对于拥有高端设备与网速快的人而言可能不会出现什么问题。但是对网速慢或者设备低端的用户，网站的用户体验会非常糟糕。
造成这个问题的原因有两个：一是下载原始图片需要浪费不少流量。二是对于低端的设备而言，转换图片本身就对其处理器是一个额外的负担，这也是为什么手机有时候在一些网页上特别卡的原因。
在现在的技术条件下，解决这个问题不是难事。只要准备好针对不同设备的不同分辨率与大小的图片就好。现在的技术支持下已经可以做到根据用户设备来告知用户使用的浏览器智能的选择提供哪种图像。
以前这种根据设备智能提供对应图片的技术多用JS来实现，但是现在已经可以用HTML的<picture>来实现这种功能，并且我们更推荐使用HTML来实现，因为相比可能拖累网页加载的JS而言，HTML可以减少额外的代码和请求，从而降低页面加载时间。
关于<picture>的使用例子，如下：
<picture>
<source srcset="smaller.jpg" media="(max-width: 768px)">
<source srcset="default.jpg">
<img srcset="default.jpg" alt="My default image">
</picture>
上述例子中，在宽度小于768px的设备上，使用的图片将会是smaller.jpg。而其他版本的设备上将会使用default.jpg。在自适应设定上不光有max，也可以设定min值，设备宽高（以决定图片在设备上是纵向展示还是横向）等等，要素非常齐全，详细的使用方式可以去w3school查询或搜索引擎搜索。
在页面性能与质量之间找到平衡，并且准备不同的图片在不同的设备上展示，就是网站图片优化的法则。
