加载中


Images are a key component of every website. According to HTTP Archiveimages make up for more than 60% of data loaded on web pages. Being such a critical component of almost all websites, whether it is e-commerce, news, fashion websites, blogs or travel portals, image optimization is important, and perhaps the lowest hanging fruit, if you are looking to speed up your image heavy website.

Optimizing images on your website can be broadly divided in 3 categories — load lighter, load fewer and load faster. The 5 techniques that we discuss in this article or any other techniques that you come across would most probably fall in either of these 3 categories.

So, let’s get started and look at some simple techniques you can implement today to make significant progress on optimizing your image heavy website.

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

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

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

1. Resize your images

This is a must have. Resize your images to exactly what is required on your website. And no, I am not talking about resizing using CSS or in the HTML. I am talking about resizing the image on the server and then sending it to the browser.

For example, you have a 4000x3000px image for a product you want to list on your e-commerce website. On your website, however, you need to show a much smaller image of this product. It could be a 200x300px image on the product listing page and a 800x1000px on the product detail page. Make sure that you scale down the original image to these dimensions BEFORE sending it to the browser. The resized images are much smaller than the original image and will load much faster than the original image.

<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" />

In my opinion, incorrect resizing of images, is the biggest area of optimization on most websites. And often, we as developers, tend to overlook it. Consider the following scenario: You start out with perfectly sized images for your new website. Over the next few months, your website’s layout changes and so do your image dimension requirements. However, instead of generating new images to meet these new dimension requirements, which is quite a task in itself, you make do with a close alternative. For example, you use a 300x200pximage where a 200x200px image would have worked. I guess this would have happened with everyone.

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 source: pexels.com; Resized using ImageKit

In the above example, the difference might seem small for a single image in terms of Kilobytes. But it is still 21%. This small difference, added up for a lot of images, has the potential of speeding up your website and reducing your bandwidth consumption by 21%.

The best scenario is to have an image server that can resize an image to any given dimension, in real-time, just by changing the image URL. That ways, whenever your image dimension requirement changes, all you need to get your new images is to specify that dimension in the URL.

There are many open-source and server-side implementations that you can implement on your own. ImageKit is one such third-party service which, apart from all the other features, provides real-time URL-based resizing and cropping. And you can use it on all your existing images as well in a few minutes of setup.

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

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

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

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

2. Optimize your images

The next step in speeding up your image heavy website is to choose the right format and quality for every image on your website.

JPG, PNG and GIF are the most common image formats being used currently on the web and are each suited for different use cases. There is another relatively new image format called WebP that combines the best of these image formats, is 30% smaller in size and is supported on almost 75% of the modern browsers.


The above size comparison shows the importance of choosing the right image format for your images. While the images look identical, they vary greatly in size.

Given the huge performance benefits, you should deliver your images in WebP format wherever possible. On the other browsers, you can continue to deliver the original image format.

2.优化你的图像

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

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

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

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

Image quality, simply put, is a measure of how the image looks visually. There is a direct correlation between image quality and image size. Higher quality results in higher image size and, as a result, a slow website.

Different image compression methods take advantage of the limitations of human eye to distinguish between small changes in color information to compress images. As a standard, a quality level of 80 to 90 (on a scale of 100) is usually a good tradeoff between image size and quality.


Comparison between the same image encoded at different quality levels. The images are almost similar visually but have different sizes.

Comparison between the same image encoded at different quality levels. The images are almost similar visually but have different sizes.

A simple way to do accomplish format and quality optimization is to use ImageKit to deliver your images. It automatically converts an image to WebP wherever possible and also optimizes the image quality in real-time.

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

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

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

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

3. Build for mobile


In today’s world, if you are serious about running a website, ignoring mobile users is a sin. Data suggests that almost 60% of the global traffic originates from mobile devices. And yes, while mobile phones have gotten powerful and mobile networks have become better, data suggests that mobile data speedsare still much slower than broadband speeds. There are countries or areas within countries where the mobile data connection is flaky. So, it is important to be extra careful when designing web experiences for mobile.

If you have a responsive website for desktop and mobile, you can switch to using responsive images. With responsive image tags, using the `srcset` and the `sizes` attributes of the img tag, you can provide the browser with a list of variants for a single image and a definition of the relative image size on different screens. The browser then decides the best image size to load on a particular device from the available list based on the device dimensions and the layout you specify.

<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">

The `sizes` attribute gives information about the image layout, the `srcset` attribute gives the image list with the actual width specified against each URL.

3.支持移动设备

在今天的世界里,如果你认真对待网站运营,忽视移动用户是一种罪过。数据表明,近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指定的实际宽度。

Another factor that comes into picture with mobile devices is the Device Pixel Ratio or the DPR value. Modern mobile phones have high density screens that pack more pixels in the same square inch.


Image Source: Specctr

An image that look fine on regular devices, would look slightly blurred on a high density screen. A solution to this is to load a 2x size image on screens with DPR 2, a 3x image on screens with DPR 3 and the normal image 1x size image on other devices. This too can be accomplished using the responsive image tag as shown below.

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

A modern specification called Client Hints, makes it simple to get started with responsive images and makes the code look much cleaner as compared to the `srcset` and `sizes` attribute method. How client hints work is a huge topic in itself that it is out of scope for this post and has been covered in detail here.

ImageKit provides you with a URL-based DPR parameters along with resize and crop parameters, and also supports client hints, that makes it very easy to use responsive images and deliver perfect images across devices.

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

                图片来源:Specctr

在常规设备上看起来很好的图像在高密度屏幕上看起来会略微模糊。对此的解决方案是在具有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. Load fewer resources

Even after you have optimized all of your images, loading too many of them is bound to slow down your website and negatively impact the user experience. I am not advocating that we should use lesser images. But, there are cases where we can avoid using images or avoid loading them up front.

For example, instead of loading images, you can create buttons, gradients and other advanced elements using CSS.

The other more important technique that you can use is lazy loading for your images. Lazy loading basically means that we defer loading of images that are not required immediately. Typically, any image that is not visible to the user on his screen or the viewport, can be loaded at a later point in time i.e. when the image enters or is about to enter the viewport.


Image source: blog.learningspaces.io The images are not loaded in the beginning. There are just image placeholders. The images are loaded later asynchronously. Note that there is no sequence for images to get loaded.

Consider a case where you have 100 products on your web page. If you request all the 100 product images at the same time and at the very beginning, it would slow down the load time. The images would compete for network bandwidth and CPU resources with other critical items on the page like CSS and JS.

With lazy loading, we would only load, let’s say, 30 images that are visible to the user initially. Then, when the user starts scrolling down the page, we will keep loading more images. This would help improve the initial load time and the user experience. There will be cases where the user doesn’t scroll down the entire page and hence some images would not get loaded at all. Thus, you also end up saving on bandwidth costs for image delivery.

Getting started with lazy loading is very simple with JS libraries like jQuery Lazy. You can also use the latest IntersectionObserver API which is much more performant than the JS libraries available for lazy loading.

4.加载更少的资源

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

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

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

      

图像来源:blog.learningspaces.io 图像在开始并未加载。只加载了图像占位符。稍后异步加载图像。请注意,没有用于加载图像的序列。

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

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

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

5. Use a good CDN for image delivery

Once you have solved for the size of the images and the number of images that get loaded on a particular page, the next step is to ensure that the images that do get loaded on your website, are loaded quickly. Decreasing the image load time will not only help you get a faster overall page load time and thus a better the user experience on your website, but would also help you rank higher on search engines.

Content Delivery Networks or CDNs are a set of globally distributed caching / proxy servers. This article by Incapsula does a good job of explaining how a CDN works.


Image Source: CloudFlare

Let’s say your website server is located in USA. A content delivery network caches your images on its globally distributed network of servers (it’s more complex than that but for the sake of simplicity, let’s assume this). Then, if a user from Brazil requests an image from your website, instead of getting that image from your server in USA, the CDN delivers it from a node closest to that user in Brazil. This cuts down the round trip time needed to load an image. Some of the notable CDNs are listed on this Wikipedia page.

When selecting a CDN, make sure that the CDN supports HTTP/2. HTTP/2 is a new protocol for delivering content on the web that can help speed up the loading time significantly. It uses techniques like multiplexing, header compression and server push to reduce page load time. HTTP/2 is now supported by the following CDNs. This demo page does a good job at visually explaining the performance difference between HTTP/2 and the older HTTP/1.1 protocol.

ImageKit provides you with a CDN that is HTTP/2 enabled out of the box. Without any extra effort, you can get the best-in-class delivery for your images (and even other static files) using ImageKit.

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

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

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

图片来源:CloudFlare

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

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

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

How can I test my website for image related issues?

Well there are quite a few tools that you can use to test a website specifically for image related issues. One way is to use this website analyzer by ImageKit. Just type in a page URL and within a few seconds it would give you suggestions regarding resizing, best format, lazy loading and HTTP/2. Google has also worked on an open-source tool called the Lighthouse. This tool comes integrated in the latest versions of Chrome and can perform a thorough analysis of not just the images on your website but also other issues that might be impacting performance. Google PageSpeed insights also points out if you are loading unoptimized images on your website apart from other recommendations.

Conclusion

We have covered all the major techniques around image optimization and performance improvement. With this information in hand, you can solve for 90% of your image related problems, if not more, which would help you get faster page load times and rank higher in search results. Always remember, for images on your website — load lighter, load fewer, and load faster.

About the author:

Brandon Morelli,Creator of @codeburstio — Frequently posting web development tutorials & articles. 

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

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

结论

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

关于作者:

Brandon Morelli @codeburstio 创始人——经常发布web开发教程和文章。

返回顶部
顶部