当网页加载时，图像本身占每种内容类型平均字节的60％以上。这就是为什么在寻求一个优化，快速加载的网站时，图像优化必须在您的优先列表上。这是开发人员和设计人员在处理图像时遇到的最常见的错误，以及如何解决这些图像优化的问题!
图像优化解决方案一：使用图像的东西，你可以用CSS做
有一段时间，CSS规范是非常基本的，图像需要背景，阴影，图标等。但是，所有主要的Web浏览器都支持CSS3，现在可以使您的网站加载并保存更快带宽使用现代CSS技术。
你需要一个渐变？你可以用纯CSS做到这一点。看上一些图标？不要使用图像图标，但SVGs或图标web字体来代替。
图像优化解决方案二：使用错误的图像格式
谈到在线提供图片时，一个很常见的错误是使用错误的格式。让我们总结一下.jpg，.gif并且.png是互联网上三种最常见的图像格式。但这并不意味着你应该使用任何格式。实际上，每种格式都有自己的优点和缺点，正确的格式适合正确的图像格式，这一定会使您在节省带宽的同时加快网站载入速度，同时仍然能够以良好的质量显示图像。
照片应始终采用.jpg格式。标志或图表？.png是正确的选择。那么.gif呢？只用于非常小的图像，如重复的背景，你不能用纯粹的CSS。GIF在显示简短的循环视频方面非常受欢迎。但是你可知道，一个6Mo .gif图像只有一点点的重量超过300KB的.mp4 格式？
另一个要考虑的事情是新兴的格式。WebP是由Google创建的一种现代图像格式，它为网络上的图像提供了卓越的无损和有损压缩（比PNG小26％）。到目前为止，WebP在Chrome和Opera中是本地支持的，毫无疑问，其他主流浏览器也将遵循。微软还创建了另一种名为JPEG-XR的现代格式，目前仅支持微软浏览器。
图像优化解决方案三：使用非优化的图像
作为一个经验法则，您的网站上显示的每个图像都应该进行优化。优化图像的最简单方法是使用Adobe Photoshop的“Save for Web”功能。
如果您使用的是WordPress，那么您一定要安装WP Smush插件：它会自动优化通过WordPress上传器上传的所有图片，并将其降低到90％，而不会影响质量。它也有一个选项，允许你批量抹掉你以前上传的图像。这个插件绝对是必备的！还有一个插件的高级版本，提供额外的功能和增加的优化。我还没有测试过，但看起来非常有趣。
图像优化解决方案四：使用浏览器调整大图像！
您的网站必须适应各种设备和解决方案。虽然让你的网站响应相对容易，处理图像是非常棘手的。
在所需的最大分辨率下使用一个图像可能非常诱人，然后使用浏览器调整大小来缩小分辨率。浏览器调整大小的问题是，您仍然提供相同的大图像，从而使您的网站长时间在移动设备上加载，浪费带宽以及访问者移动数据。
解决这个问题的方法是创建相同图像的不同缩略图，并根据客户端分辨率提供正确的图像大小。为此，您可以使用像众所周知的ImageMagick这样的开源解决方案，也可以使用像Cloudinary这样的基于云的服务。
