Checklist image optimization
We all know the famous expression "Content is king" . But, more specifically, I need to clarify that the most important thing on the Internet is the image (as a copywriter, it's hard for me to say these words, but this is true).
As Internet users, we crave images - the more the better. But, as developers, content creators, and site owners, we get depressed over image problems. According to the latest HTTP Archive data, the average page weighs 1795 KB, of which 56% (1000 KB) are images. This makes the images probably the most fertile ground for improving page loading speed. And this is why we in Radware invest so much time in image optimization.
Let's talk in this article about why images are so important and how to make them as effective as one of the most important parts of a page.
')
Image taken from litmus.com
Adding new or enlarging existing images is a proven way to increase conversion:
For obvious reasons, the images can not escape. And we must bear this in mind ...
Earlier this year, Radware did some fascinating (at least for me) research on how people react to various options of images, making purchases. Also, we additionally surveyed 742 study participants about what they think about images on the Internet. That's what they said to us ...
The results of some of our other studies:
From this study, we can conclude that most people pay attention to the speed of loading images. Therefore, we must do everything possible to speed up the loading of images, since most users simply wait and do nothing until the images are loaded.
You may already know most or all of the methods listed below. In this case, you are in the minority. In the course of research conducted by Radware and other organizations, most sites do not fully use all of these methods.
Image compression is a way to increase the speed of loading images, which minimizes the size of the image file (in bytes) without degrading the image quality to an unacceptable level. Despite this, we found that 43% of the top 100 retail pages do not compress images .
Reducing the size of images has the following advantages:
Very often, due to the wrong image format, performance suffers, especially in companies with several people responsible for creating content, when not every one of them understands what format to upload images to CMS. An image saved in the wrong format may be several times larger than the one saved in the optimal format. Images with unnecessarily high resolution consume bandwidth, processing time and cache space.
As a rule, the optimal formats for common image types are as follows:
Yes, you probably already know about it. But I guarantee that in your company not everyone knows about it.
This applies to both compression and format. WebP (about which you can read more on the Google Dev blog ) is the newest image format that offers both lossy and lossless compression for images on the Internet. In Radware, we experimented with a format — which we called PerfectImage — that takes a lossy compressed image of WebP and degrades it until its structural similarity index (SSIM) reaches 0.985 compared to the original.
Sprites are a CSS technique for combining images. In short, these are just a few images that are placed in a rectangular grid of one large image. When you open the page, the large image is loaded once and then uses the background CSS positioning to display images of individual components. This reduces the number of HTTP image requests to one, which has a huge positive impact on performance.
This principle seems very simple, but it is surprising how many times I have analyzed the pages that load the main content last. Site owners should be aware of usability problems due to the delay in displaying content: according to this eyetracking study by Nielsen Norman, the user whose page is displayed instantly, 20% of the time it views is within the functional area of the page, while the user , whose images load 8 seconds, spends only 1% of the time viewing, looking at the recommended places on the page.
Help your visitors see the page more quickly by loading and displaying images that are below the originally visible area last. By postponing the loading of non-essential images, you will not shorten the minimum time for a full page load, but will significantly improve the subjective loading time for the user.
The difference with the usual browser preload is that automatic preloading of images is a powerful performance enhancement technique when all the user's paths through the site are monitored and recorded. Based on the huge amount of accumulated data, the automatic preloading engine can predict where the user is most likely to go, based on visiting the previous pages and on what page he is currently on. The engine loads the resources (for example, images) of those pages that the user is likely to visit next, into the browser's cache, which allows the download time to be reduced by 70%.
(Please note that this necessarily requires a large amount of data, as it is a very dynamic method that can only be performed using automated solutions. More detailed article ).
I can wait for the images to load if they are either entertaining or contain important information. But waiting for an extra couple of seconds just to see the stock photo makes me feel like a dummy for wasting my time. Images should always-always-always have user value. Otherwise, they have no meaning and should be ruthlessly removed.
Working with images is one of the easiest ways that I can remember in order to increase productivity quickly and inexpensively. As I said earlier in this article, most or all of these methods may be very familiar to you. But if your company has a large number of content creators who are responsible for creating and uploading images to a CMS, I can guarantee that they will not be familiar with them. Set yourself the task of telling everyone in your company this year about the importance of image optimization.
Best regards, Generate.Club project team.
As Internet users, we crave images - the more the better. But, as developers, content creators, and site owners, we get depressed over image problems. According to the latest HTTP Archive data, the average page weighs 1795 KB, of which 56% (1000 KB) are images. This makes the images probably the most fertile ground for improving page loading speed. And this is why we in Radware invest so much time in image optimization.
Let's talk in this article about why images are so important and how to make them as effective as one of the most important parts of a page.
')
Image taken from litmus.com
Better, better, more. We all subconsciously love images.
Adding new or enlarging existing images is a proven way to increase conversion:
- The online store DueMaternity.com increased conversion by 27% , after switching from using regular product photos to 360 ° rotated images.
- During the A / B testing of their landing page, Medalia Art noticed that by replacing images of paintings by famous artists with photos of the artists themselves, they increased the conversion by more than 95% .
- Changing the standard contact icon to a photo of a person increased the conversion by 48% .
- Skinner Auctions launched A / B testing, where they increased the size of the images in their online catalog by 28%. The increase in images resulted in 63% more visitors who started the bidding process.
- In another A / B test, Dell greatly enlarged the main image on the landing page. The option with a large image received 27% less bounces and increased the conversion to leads by 36%.
For obvious reasons, the images can not escape. And we must bear this in mind ...
We are extremely sensitive to how images are loaded.
Earlier this year, Radware did some fascinating (at least for me) research on how people react to various options of images, making purchases. Also, we additionally surveyed 742 study participants about what they think about images on the Internet. That's what they said to us ...
When do you start working with the site?
Have you ever felt frustrated when loading images took too much time?
The results of some of our other studies:
- About one third of the respondents say that they pay attention to how quickly the images load. Only 1 out of 10 thinks it doesn't matter.
- About half say that how quickly images load up affects the feel of a page visit. Also, 4 out of 10 people claim that they don’t like it when images load slowly.
- Women are more likely than men to wait for images to load before they start interacting with the page.
From this study, we can conclude that most people pay attention to the speed of loading images. Therefore, we must do everything possible to speed up the loading of images, since most users simply wait and do nothing until the images are loaded.
8 things you should do (if you don’t do them yet) to speed up image loading
You may already know most or all of the methods listed below. In this case, you are in the minority. In the course of research conducted by Radware and other organizations, most sites do not fully use all of these methods.
1. Image compression
Image compression is a way to increase the speed of loading images, which minimizes the size of the image file (in bytes) without degrading the image quality to an unacceptable level. Despite this, we found that 43% of the top 100 retail pages do not compress images .
Reducing the size of images has the following advantages:
- Reducing the amount of time required to load an image.
- Increasing the number of images that can be stored in the browser cache, which reduces the page load time during repeated visits.
2. Choosing the right image format
Very often, due to the wrong image format, performance suffers, especially in companies with several people responsible for creating content, when not every one of them understands what format to upload images to CMS. An image saved in the wrong format may be several times larger than the one saved in the optimal format. Images with unnecessarily high resolution consume bandwidth, processing time and cache space.
As a rule, the optimal formats for common image types are as follows:
- Photo - JPEG, PNG-24 (PNG-24 is not really the best choice for a photo, rather, it is more suitable for screenshots and other images with text. Note translator)
- Multiple colors - GIF, PNG-8
- Multiple colors with transparency - GIF, PNG-8
- Many Colors with Transparency - PNG-24
- Vector images - SVG
Yes, you probably already know about it. But I guarantee that in your company not everyone knows about it.
3. A couple of words about WebP
This applies to both compression and format. WebP (about which you can read more on the Google Dev blog ) is the newest image format that offers both lossy and lossless compression for images on the Internet. In Radware, we experimented with a format — which we called PerfectImage — that takes a lossy compressed image of WebP and degrades it until its structural similarity index (SSIM) reaches 0.985 compared to the original.
4. Sprites
Sprites are a CSS technique for combining images. In short, these are just a few images that are placed in a rectangular grid of one large image. When you open the page, the large image is loaded once and then uses the background CSS positioning to display images of individual components. This reduces the number of HTTP image requests to one, which has a huge positive impact on performance.
5. Make sure the images are optimized for early and fast download.
This principle seems very simple, but it is surprising how many times I have analyzed the pages that load the main content last. Site owners should be aware of usability problems due to the delay in displaying content: according to this eyetracking study by Nielsen Norman, the user whose page is displayed instantly, 20% of the time it views is within the functional area of the page, while the user , whose images load 8 seconds, spends only 1% of the time viewing, looking at the recommended places on the page.
6. Postpone loading of secondary images (obvious consequence of clause 5)
Help your visitors see the page more quickly by loading and displaying images that are below the originally visible area last. By postponing the loading of non-essential images, you will not shorten the minimum time for a full page load, but will significantly improve the subjective loading time for the user.
7. Automatic Image Preloading
The difference with the usual browser preload is that automatic preloading of images is a powerful performance enhancement technique when all the user's paths through the site are monitored and recorded. Based on the huge amount of accumulated data, the automatic preloading engine can predict where the user is most likely to go, based on visiting the previous pages and on what page he is currently on. The engine loads the resources (for example, images) of those pages that the user is likely to visit next, into the browser's cache, which allows the download time to be reduced by 70%.
(Please note that this necessarily requires a large amount of data, as it is a very dynamic method that can only be performed using automated solutions. More detailed article ).
8. Increasing the value of downloadable content
I can wait for the images to load if they are either entertaining or contain important information. But waiting for an extra couple of seconds just to see the stock photo makes me feel like a dummy for wasting my time. Images should always-always-always have user value. Otherwise, they have no meaning and should be ruthlessly removed.
At last
Working with images is one of the easiest ways that I can remember in order to increase productivity quickly and inexpensively. As I said earlier in this article, most or all of these methods may be very familiar to you. But if your company has a large number of content creators who are responsible for creating and uploading images to a CMS, I can guarantee that they will not be familiar with them. Set yourself the task of telling everyone in your company this year about the importance of image optimization.
Best regards, Generate.Club project team.
Source: https://habr.com/ru/post/376423/
All Articles