5个方法对于重量级网站的图片优化

image.png

图像是每个网站的关键组成部分。 根据 HTTP Archive ，图像占网页上需要加载总数据的比例达60％以上。 几乎成为所有网站上重要的组成部分，无论是电子商务，新闻，时尚网站，博客还是旅游门户网站，图像优化都很重要，如果你想加快你的 图像重量级网站 访问速度 ， 这 也许是很容易做到的事情 。

在网站上优化图像可以大致分为3类 - 负载更轻，负载更少，负载更快。 我们在本文中讨论的5种技术或者你遇到的任何其他技术很可能属于这3种类别中的任何一种。

所以，让我们开始吧，看看你今天可以实现的一些简单技术，以便在优化图像重量级网站方面取得重大进展。

####1.调整图像大小

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

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

<h2>XYZ Product Detail</h2>
 
  <!-- DO NOT USE this as it will load the full size image and the browser does the resize -->
  <img src="image.jpg" alt="full size image" width="800" height="1000" />
 
  <!-- USE a resized image where the resizing is done from the server and there is no need of browser-side resizing-->
  <img src="resized_800x1000_image.jpg" alt="resized image" />

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

image.png

图片来源：pexels.com; 使用 ImageKit 调整大小

在上面的示例中，单个图像的差异可能看起来很小，以Kilobytes表示。 但它仍然减小了21％。 这个小的差异，加上很多图像，有可能加快您的网站速度，并减少21％的带宽消耗。

最好的方案是让图像服务器只需更改图像URL即可实时调整图像大小到任何给定尺寸。 这样，无论何时图像维度要求发生变化，获取新图像所需的全部内容都是在URL中指定该图像尺寸。

网上有许多开源和服务器端实现 ，或者你也可以自己实现。 ImageKit 是此类功能的第三方服务实现，除了所有其他功能外，还提供基于URL的实时调整大小和裁剪。 您可以在几分钟的设置中将它用于所有现有图像。

2.优化你的图像

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

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

image.png

上述尺寸之间比较显示了为图像选择正确图像格式的重要性。 虽然图像看起来相同，但它们的大小差异很大。

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

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

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

image.png

在不同质量水平下 相同 编码的图像之间的比较。 图像在视觉上几乎相似但具有不同的尺寸。

在不同质量水平下 相同 编码的图像之间的比较。 图像在视觉上几乎相似但具有不同的尺寸。

完成格式和质量优化的一种简单方法是使用ImageKit来传送图像。 它会尽可能自动将图像转换为WebP，并实时优化图像质量。

####3.支持移动设备

image.png

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

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

<img srcset="image-320w.jpg 320w,
             image-480w.jpg 480w,
             image-800w.jpg 800w"
     sizes="(max-width: 320px) 300px,
            (max-width: 480px) 440px,
            800px"
     src="image-800w.jpg" alt="Image">

sizes属性提供有关图像布局的信息，srcset属性为图像列表提供针对每个URL指定的实际宽度。

移动设备的另一个影响因素是设备像素比率或DPR值。现代移动电话具有高密度屏幕，在相同的平方英寸中包含更多像素。

image.png

在常规设备上看起来很好的图像在高密度屏幕上看起来会略微模糊。对此的解决方案是在具有DPR 2的屏幕上加载2x尺寸的图像，在具有DPR 3的屏幕上加载3x图像并且在其他设备上加载普通图像1x尺寸的图像。这也可以使用如下所示的响应图像标签来完成。

<img srcset="image-320w.jpg 1x,
             image-640w.jpg 2x
     src="image-320w.jpg" alt="Image">

一个名为Client Hints的现代规范，使得响应式图像的入门变得简单，并且与srcset和sizes属性方法相比，使代码看起来更清晰。客户提示如何工作本身就是一个很大的话题，它超出了这篇文章的范围，这里已经详细介绍了。

ImageKit为你提供基于URL的DPR参数以及调整大小和裁剪参数，还支持客户端提示，这使得使用响应式图像非常容易，并可以跨设备提供完美的图像。

####4.加载更少的资源

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

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

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

https://img1.tuicool.com/MZF3IfE.jpg!web

图像在开始并未加载。只加载了图像占位符。稍后异步加载图像。请注意，没有用于加载图像的序列。

假设你的网页上有100个产品。如果您在同一时间和最开始请求所有100个产品图像，则会减慢加载时间。这些图像将与网页上的其他关键项目（如CSS和JS）竞争网络带宽和CPU资源。

使用延迟加载时，我们只会加载30个最初对用户可见的图像。然后，当用户开始向下滚动页面时，我们将继续加载更多图像。这将有助于改善初始加载时间和用户体验。在某些情况下，用户不会向下滚动整个页面，因此根本不会加载某些图像。因此，你最终还可以节省图像传输的带宽成本。

有了jQuery Lazy等JS库，使用延迟加载入门非常简单。您还可以使用最新的IntersectionObserver API，它比于延迟加载的JS库更高效。

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

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

内容分发网络或CDN是一组全球分布式缓存/代理服务器。Incapsula的这篇文章很好地解释了CDN的工作原理。

image.png

图片来源：CloudFlare

假设您的网站服务器位于美国。内容交付网络将您的图像缓存在其全球分布的服务器网络上（它比这更复杂，但为了简单起见，让我们假设这一点）。然后，如果来自巴西的用户从您的网站请求图像，而不是从美国的服务器获取该图像，则CDN从巴西最接近该用户的节点提供该图像。这减少了加载图像所需的往返时间。本维基百科页面列出了一些值得注意的CDN。

选择CDN时，请确保CDN支持HTTP / 2。HTTP / 2是一种用于在Web上传送内容的新协议，可以帮助显着加快加载时间。它使用多路复用，头压缩和服务器推送等技术来减少页面加载时间。现在，以下CDN支持HTTP / 2。这个演示页面可以直观地解释HTTP / 2和旧的HTTP / 1.1协议之间的性能差异。

ImageKit为您提供了开箱即用的HTTP / 2 CDN。无需任何额外的努力，您就可以使用ImageKit为您的图像（甚至其他静态文件）获得最佳的交付。

如何测试网站与图像相关的问题?

有相当多的工具，你可以使用来测试一个网站的形象相关问题。一种方法是通过ImageKit使用这个 网站分析器 。只需输入一个页面URL，几秒钟之内，它就会给出关于调整大小、最佳格式、延迟加载和HTTP/2的建议。谷歌还开发了一个名为 灯塔 的开源工具。这个工具集成在Chrome的最新版本中，不仅可以对网站上的图片进行全面分析，还可以对其他可能影响性能的问题进行分析。 Google PageSpeed insights 还指出，如果你的网站上除了其他推荐之外，还有没有优化的图片。

结论

我们已经介绍了所有关于图像优化和性能改进的主要技术。有了这些信息，你可以解决90%的图像相关问题，如果不能解决更多的话，这将帮助你获得更快的页面加载时间和更高的搜索结果排名。永远记住，对于你网站上的图片-加载更轻，加载更少，加载更快。

这里推荐一下我的前端学习交流群：784783012，里面都是学习前端的，如果你想制作酷炫的网页，想学习编程。自己整理了一份2018最全面前端学习资料，从最基础的HTML+CSS+JS【炫酷特效，游戏，插件封装，设计模式】到移动端HTML5的项目实战的学习资料都有整理，送给每一位前端小伙伴，有想学习web前端的，或是转行，或是大学生，还有工作中想提升自己能力的，正在学习的小伙伴欢迎加入学习。

点击：加入