认识达内从这里开始

网站优化除了需要做好网站结构调整以外，对于网站上的图片素材的性能优化也是非常重要的。今天，我们就一起来了解和学习一下，图片优化都有哪些要点是需要我们掌握的。

1.调整图像大小

这是必须的。将图像大小调整为您网站上所需大小的图像。不，我不是在谈论使用CSS或在HTML中调整大小。我正在谈论调整服务器上的图像大小，然后将其发送给浏览器。

例如，对于要在电子商务网站上列出的产品，你有4000x3000像素的图像。但是，在您的网站上，您需要显示该产品的的略缩图像。它可以是产品列表页面上的200x300px图像和产品详细信息页面上的800x1000px图像。在将原始图像发送到浏览器之前，请确保将原始图像缩小到这些尺寸。调整大小的图像比原始图像小得多，并且加载速度比原始图像快得多。

在我看来，不正确的图像大小调整，是大多数网站上大的优化领域。通常，作为开发人员，我们往往会忽略它。请考虑以下情形：您可以从开发新网站开始使用尺寸合适的图像。在接下来的几个月中，您网站的布局会发生变化，图像尺寸要求也会发生变化。但是，不是生成新的图像来满足这些新的尺寸要求，而这本身就是一项非常重要的任务，您可以使用其他替代方案。例如，你使用300x200px图像，放到200x200px的图像要求尺寸中使用。我猜这会发生在每个人身上。

2.优化你的图像

加快图像重量级网站的下一个步骤是为网站上的每个图像选择正确的格式和质量。

JPG，PNG和GIF是目前在网络上使用的常见的图像格式，每种格式都适用于不同的用例。 另一种称为WebP的相对较新的图像格式结合了这些图像格式中的佳格式，尺寸缩小了30%，并且在近75%的现代浏览器中得到支持。

鉴于巨大的性能优势，你应该尽可能以WebP格式提供图像。 在其他不支持的浏览器上，你可以继续提供原始图像格式。

简单地说，图像质量是衡量图像外观的一种方式。 图像质量和图像大小之间存在直接关联。 更高的质量会导致更高的图像尺寸，从而导致网站速度变慢。

不同的图像压缩方法利用人眼的局限性来区分颜色信息的小变化以压缩图像。 作为标准图片来说，80到90的质量等级(按100的比例来说)通常是图像尺寸和质量之间的良好折衷方案。

3.支持移动设备

在今天的世界里，如果你认真对待网站运营，忽视移动用户是一种罪过。数据表明，近60%的全球流量来自移动设备。是的，虽然移动电话已经变得强大，移动网络变得更好，但数据显示移动数据速度仍然比宽带速度慢得多。有许多国家或地区暴扣一些乡村移动数据连接不稳定。因此，在为移动设计Web体验时要格外注意。

如果您有桌面和移动设备的响应式网站，则可以切换到使用响应式图像。使用响应式图像标签，使用img标签的`srcset`和`sizes`属性，您可以为浏览器提供单个图像的变体列表以及不同屏幕上相对图像大小的定义。然后，浏览器根据设备尺寸和您指定的布局，从可用列表中确定要在特定设备上加载的佳图像大小。

4.加载更少的资源

加载太多图像也会降低网站速度并对用户体验产生负面影响，即使已经优化了所有图像。我并不主张我们应该使用较小的图像。但是，有些情况下我们可以避免使用图像或避免预先加载它们。

例如，您可以使用CSS创建按钮，渐变和其他高级元素，而不是加载图像。

您可以使用的另一个更重要的技术是延迟加载图像。延迟加载基本上意味着我们推迟加载不需要的图像。通常，用户在其屏幕或视口上不可见的任何图像可以在稍后的时间点加载，即当图像进入或即将进入视口时。

5.使用良好的CDN进行图像传输

一旦解决了图像的大小和加载到特定页面上的图像数量，下一步就是确保快速加载网站上加载的图像。减少图像加载时间不仅可以帮助您获得更快的整体页面加载时间，从而更好地在您的网站上获得用户体验，还可以帮助您在搜索引擎上排名更高。

节选：开源翻译

【免责声明】：本内容转载于网络，转载目的在于传递信息。文章内容为作者个人意见，本平台对文中陈述、观点保持中立，不对所包含内容的准确性、可靠性与完整性提供形式地保证。请读者仅作参考。