网站优化时处理图片的几个小技巧

我们发现很多人自己做网站建设时都会忽略网站图片的优化工作。对于现在的网站来说图片太大会导致网站访问下载的带宽过高，造成网站反应过慢的状况，最终会导致网站用户的跳出率增加，使网站的用户体验下降。因此我们要学会如何优化自己网站的图片。

以下是在网站上使用图片时应注意的一些优化技术：

1.使用正确的图像尺寸

您应该始终使用大小精确或至少接近最终呈现的大小的图像。使用大于所需要的图像是迄今为止在网站建设中最常见的错误。

如果网站渲染的最终图像是200*300尺寸。理想情况下您应该加载一个完全符合该容器的图像，即200像素×300像素。在这种情况下如果要加载800像素×1200像素的图片，让浏览器或应用程序为您调整大小，那么您网站的加载数据大概是平常的10-15倍。

这对于显示大量产品缩略图的电子商务网站来说更为重要。缩略图大小可以根据着缩小页面的加载大小进行选择。

这个图像原始图片尺寸为2448 x 2448像素，大小约为1.4MB。调整大小的版本是400 x 400像素，大小约为109KB。这是尺寸减少13倍

2.使用正确的图像格式

正如我们之前发布的一篇文章中所讨论的，JPG，PNG和GIF是最常见的图像格式。有一个比较新的图像格式WebP。它尝试将来自前三种格式的图片封装成单个图像格式，同时提供更好的压缩比。

而最常见的错误是使用PNG格式的自然场景图片。因为在这种情况下JPEG或WebP图像将比PNG图片小得多，而且效果上看起来完全相同。使用正确的格式可以对减少图像对带宽消耗产生的巨大影响。

3.压缩您的图像

即使在选择正确的图像尺寸和格式之后，也可以通过压缩进一步减小图像的尺寸。

最常用的压缩方法是通过去除与图像相关联的所有不必要的元数据而不改变图像质量。可以在显示图像时安全地丢弃该元数据。这种方法被称为无损压缩，在网站或应用程序使用图像之前进行使用。

 另一种方法有损压缩，降低图像的质量以获得较小的尺寸。然而人眼无法区分原始的未压缩图像和图像的区别。因此通常可以将图像质量降低到80-90。这样做往往会使图像的大小下降到原来的20-25％。

4.使用渐进式JPG

这种优化调整方式可以增加页面上的感知性能，但可能带来稍高的带宽消耗。

渲染JPEG图像的一种方法是从顶部开始，一次渲染每行，并向底部移动。这被称为基线加载模式，并且与用户不得不等待在整个图像的加载。

另一种方式是渲染低质量的像素化完整图像，然后逐渐继续添加更多像素和信息到图像。这种加载称为渐进加载，可用于JPEG图像。

在您的网站和应用程序上使用渐进式JPEG将在用户体验方面有重大改进。与上而下加载方法相比，用户获得更快的视觉反馈。

5.优化图像传送

即使按照上述步骤和优化您的图像，还有一件事要做。那就是优化图片的传输，如果无法快速传递优化的图像，同样造成图片的加载时间过长。

确保您的映像服务器可以处理潜在的3-4倍的常规流量来解决流量尖峰。始终使用适当的缓存标头提供图像，以便用户的设备可以使用缓存版本的图像。与客户端设备保存的副本相比，如果客户端的设备未被修改，则可以保存客户端的设备免于下载整个映像内容。您甚至可以考虑在服务器端设置缓存图层，直接从缓存中提供静态内容，而不是转到应用程序服务器。

如果您的流量是全球性的，或者您的图像服务器位于远离实际用户的位置，可以考虑使用内容传送网络（CDN）。简单来说CDN是可以从最接近用户地理位置的服务器传送图像（或其他静态内容）的全球服务器网络。

我们在自己建立网站时可以通过这些方法来优化图片，提高网站的响应速度