发布日期 : 2020-02-27
图片是每个网站的关键组成部分。根据非正式统计，网页图片占网页上加载数据的百分之六十以上。不管是网上商店，新闻杂志，时尚网站，博客还是旅游网站 ，几乎所有网站都是拥有如此重要的组成部分，如果您想含有大量网页图片的网站可以加快运行速度，网页图片优化将会是非常重要的一环，而且很大机会有最高效果。
优化网站上的网页图片可以大致分为三类- 减轻负载，减少负载和加快负载。
我们在本文中讨论的5种技术或您遇到的任何其他技术大部分都属于这三类。
1.调整图片尺吋
我们认为调整网页图片尺吋是大多数网站上最大可以优化的领域。调整网页图片尺吋以使其完全符合您的网站要求。不单单是使用CSS或HTML调整尺吋，而是调整服务器上网页图片的尺吋。
例如，您有4000x3000px要在网上商店上列出产品的网页图片。但是，在您的网站上，您需要显示该产品的小得多的网页图片。它可能是200x300px产品列表页面和800x1000px产品详细信息页面上的网页图片。所以建议在将原始网页图片上传到服务器之前，请确保将其缩小到这些尺吋。调整尺吋后的网页图片比原始网页图片小得多，并且加载速度将比原始网页图片快得多。
而最方便用户的最好方案必然是拥有一个网页图片服务器，只需更改网页图片URL或在后台更改所有产品图片在指定页面的尺吋，即可将网页图片实时调整为任意给定尺吋。这样，只要您的网页图片尺吋参数发生变化，在前台的产品网页图片便会自动变化显示的图片尺寸。
当然，亦有很多线上资源可供用户在上传图片至服务器前进行无损压缩，例如著名的iloveimg便是这类的第三方服务，除了压缩图片外，它更会提供大小调整及裁剪。甚至它的姐妹产品- ilovepdf，更是可以压缩PDF档案!
2.优化网页图片
优化拥有大量图片网站的下一步就是为网站上的每张图片都选择正确的格式和质量。
JPG，PNG和GIF是当前在网络上使用的最常见的网页图片格式，并且分别适合于不同的场合。还有另一种相对较新的网页图片格式，称为WebP，它结合了这些网页图片格式中的最佳功能，尺寸缩小了30％，并且支持接近75％的现代浏览器中。举例来说，JPG图片为10KB，PNG图片可能会大于70KB，而WebP格式的图片则只有大约6KB。由此可见WebP格式图片的优势了。
鉴于巨大的性能优势，您应尽可能以WebP格式上传网页图片。在其他浏览器上，您可以继续提供原始网页图片格式。
简单而言，网页图片质量是衡量网页图片外观的标准。网页图片质量和网页图片大小之间存在直接关系。较高的质量会导致较大的网页图片尺寸，从而导致网站运行缓慢。
不同的网页图片压缩方法利用人眼的局限性来区分颜色信息的细微变化以压缩网页图片。作为标准，质量等级为80到90（以100为等级）通常是网页图片尺寸和质量之间的良好折衷。
在不同质量级别编码的同一网页图片之间的比较。这些网页图片在人眼视觉上几乎相似，但是却具有不同的容量大小。
完成格式和质量优化的一种简单方法是使用ImageKit 交付网页图片。它会在可能的情况下自动将网页图片转换为WebP，并实时优化网页图片质量。
3.使用自适应图片
在当今世界，如果您会认真经营网站，那么忽略移动用户简直是一种罪过。
数据表明，全球将近60%流量都来自移动设备。没错，虽然手机功能越来越强大，移动网络也越来越完善，但数据表明，移动数据速度仍然比宽带速度慢得多。而且某些国家或地区内的移动数据连接亦不太稳定。因此，在设计移动设备的用户体验时必须格外小心。
如果您有针对台式机和移动设备的响应式网站，则可以切换为使用响应式图片。使用响应式网页图片标签，通过使用img标签的srcset和sizes属性，可以为浏览器提供单个网页图片的变体列表以及不同屏幕上相对网页图片尺寸的定义。 。然后，浏览器根据设备尺寸和您指定的布局，从可用列表中确定最佳网页图片尺寸，以在特定设备上加载。
size属性提供有关网页图片布局的信息，srcset属性提供具有针对每个URL指定的实际宽度的网页图片列表。移动设备中涉及的另一个因素是设备像素比率或DPR值。现代手机具有高密度的屏幕，在同一平方英寸中可以容纳更多像素。
在常规设备上看起来不错的网页图片在高密度屏幕上看起来会稍微模糊。解决方案是在具有DPR 2的屏幕上加载2倍大小的网页图片，在具有DPR 3的屏幕上加载3倍大小的网页图片，并在其他设备上加载普通网页图片1倍大小的网页图片。这也可以使用如下所示的响应式网页图片标签来实现。
4.加载更少的资源
即使在优化所有网页图片之后，加载过多网页图片也势必会降低网站速度并给用户体验带来负面影响。我并不主张应该使用较少的网页图片。但是，在某些情况下，我们可以避免使用网页图片或避免将其预先加载。例如当进入页面时先不要加载全部网页图片，可以创建一个按钮，点击才显示余下图片，或是使用渐变和使用CSS等元素。
当然您亦可以使用的另一个更优秀的技术，那便是网页图片的延迟加载(Lazy Load)。延迟加载基本上意味着我们推迟了不需要立即加载的网页图片。通常，任何在用户的屏幕上暂未见到的网页图片都可以在稍后的时间点加载，随着用户向下浏览网页时，网页图片才会加载显示出来。
试考虑一下您的网页上有100种甚至更多产品的情况。如果您在一开始就同时请求所有产品图片，则会减慢加载时间，甚至需要十几二十秒。这些网页图片将与页面上的其他元素（例如CSS和JS）争夺网络带宽和CPU资源。
而当网页使用延迟加载后，我们只能加载30张最初对用户可见的网页图片。然后，当用户开始向下滚动页面时，网页将继续加载更多网页图片。这将有助于改善初始加载时间和用户体验。在某些情况下，用户不会向下滚动整个页面，因此某些网页图片根本不会被加载。因此，您最终还节省了网页图片传输的带宽成本。
使用jQuery Lazy Load这样的JS库进行延迟加载非常简单。您还可以使用最新的IntersectionObserver API，该API比可用于延迟加载的JS库的性能要高得多。
5.使用优质的CDN进行网页图片传递
解决了网页图片的大小和在特定页面上加载的网页图片数量后，下一步就是确保可以将加载到网站上的网页图片快速加载。减少图片加载时间不仅可以帮助您获得更快的整体页面加载时间，从而改善网站的用户体验，还可以帮助您在搜索引擎上获得更高的排名 。
内容交付网络(CDN)是一组全局分布的缓存/代理服务器。
假设您的网站服务器位于美国。内容交付网络将网页图片缓存在其全球分布的服务器网络上（比这更复杂，但为简单起见，我们假设这一点）。然后，如果来自香港的用户从您的网站请求网页图片，将不会从美国的服务器中获取该网页图片，CDN会从距离该用户最近的节点中将其传递给香港(假设CDN拥有香港的节点，则这会是最快的)。这样便可以减少加载网页图片所需的往返时间。
如何测试我的网站中与网页图片相关的问题？
有很多工具可用于测试专门针对网页图片相关问题的网站。一种方法是使用ImageKit的网站分析器。只需输入页面URL，然后在几秒钟内它将为您提供有关调整大小，最佳格式，延迟加载等建议。 Google还开发了名为Lighthouse 的开源工具。该工具集成在最新版本的Chrome中，不仅可以对您网站上的网页图片进行全面分析，而且还可以对可能影响性能的其他问题进行全面分析。 Google PageSpeed还指出了您是否要在网站上加载未优化的网页图片以及其他建议。
结论
我们涵盖了围绕网页图片优化和性能改进的所有主要技术。有了这些信息，您就可以解决90％的网页图片相关问题，这将帮助您缩短页面加载时间并在搜索结果中排名更高。永远记住，对于您网站上的网页图片-更轻，更少，更快。
