The impact of images on web performance
Images are an essential component of any website. They add color, context and depth to your content. However, they have a significant impact on the performance of your site. Inappropriate or excessive use of images can indeed slow down the loading time, which can harm the user experience and the site's SEO. In this article, we will explore the impact of images on web performance and share strategies to effectively optimize images on WordPress.
How do images work on WordPress?
When you download an image on WordPress, the system creates several versions of this image in different sizes. These sizes are set by default, but you can modify them according to your needs.
| Slug | Width | Height |
| Thumbnail | 150px | 150px |
| Medium | 300px | 300px |
| Medium large | 768px | 0 |
| Large | 1024px | 1024px |
| 1536×1536 | 1536px | 1536px |
| 2048×2048 | 2048px | 2048px |
| Full | original width | original height |
This allows you to have images with sizes adapted to the location where they are displayed on your site. This can help improve performance by avoiding loading a larger image than needed.
This feature can be extended by using optimisation extensions images, which serve more compressed media without loss of quality. For example Imagify or Optimus.
Guide to monitoring the impact of images throughout a project
Step 1: Models
Optimizing your images on WordPress is a matter of performance, not just aesthetics.
At Be API, there is a collaborative work between UX & IU designers and developers when designing models to decide on the following good practices:
- Homogenization of image proportions to ensure the consistency and efficiency of loading your site. This means that all images that are intended to be used at the same locations must have the same width to height ratio. This ensures that images will be loaded efficiently and quickly.
- Remove unnecessary images: When designing models, it may be tempting to add as many images as possible to make the site visually attractive. However, each image added increases the page loading time. It is therefore important to use only the necessary images and eliminate any unnecessary images. This can also help keep the user's attention to the most important content.
- Strategic locations: The location of images on your site can also have an impact on performance. Strategically placing images can help improve page loading speed. For example, images that are not immediately visible during the initial loading of the page (i.e. below the flotation line) can be loaded late (lazy loading), which allows the visible part of the page to load faster.
Step 2: Development
An image is worth a thousand words, but an optimized image is worth a thousand visits.
What is the LCP and how to optimize it?
LCP, or Largest Contentful Paint, is a performance measure that indicates the time it takes to display the largest visible element in the viewing window when initially loading a page. In general, this element is often an image or video.
To optimize the LCP, we need to ensure that our largest element loads as quickly as possible. For this, we can use techniques such as preloading or loading priority of the image.
Preload image in page header
<!-- Pré-chargez l'image LCP avec une priorité de chargement élevée afin qu'elle commence à se charger avec la feuille de style. -->
<link rel="preload" fetchpriority="high" as="image" href="/path/to/hero-image.jpg" type="image/jpeg">Preload image in page header
<img fetchpriority="high" src="/path/to/hero-image.jpg">Delayed loading of non-visible images
The delayed loading of images, also known as « lazy loading », is a technique that allows to load images only when they are visible in the viewing window. This means that if an image is at the bottom of the page and the user has not yet scrolled the page to see it, the image will not be loaded. This can significantly improve the performance of your site, especially for pages containing many images.
There are two main methods of implementing the lazy loading on your WordPress site: the lazy loading native and lazy loading via a JavaScript library.
Native delayed loading
Native delayed loading is a feature that is now integrated into most modern browsers. To use it, just add the following attribute to your image tags:
loading="lazy"<img src="image.jpg" alt="Description de l'image" loading="lazy">With this attribute, the browser will load the image only when it is about to enter the viewing window. This is a simple and effective way to implement the lazy loading, without the need to add additional scripts.
Note that since version 6.3 of WordPress, the latter automatically adds this attribute for the first 3 images of the page.
This is a function supported on modern browsers but if you want to have more control over the settings of the lazy loading, it may be necessary to use a JavaScript solution, such as lazySizes.
The plugin WP Rocket which provides a set of web performance features also offers this option of lazy loading on the images.
Delayed loading via lazySizes
lazySizes is a popular JavaScript library that allows to implement the lazy loading on your website. Unlike lazy loading native, lazySizes works on all browsers, including those that do not support native delayed loading. The second advantage is that this method leaves control to developers in order to return the lazy loading More or less aggressive.
To use lazySizes, you must first add the library to your site. Then you can add the lazyload class to your image tags and use the data-src attribute instead of src:
<img data-src="image.jpg" alt="Description de l'image" class="lazyload">When the page is loaded, lazySizes automatically changes these tags to load the images delayed. In conclusion, the lazy loading is an essential technique to optimize images on your WordPress site. That you choose to use the lazy loading native or lazySizes, this technique can help improve the loading speed of your site, user experience, and finally, ranking your site in search engines.
What is the CLS and how to optimize it?
CLS, or Cumulative Layout Shift, is another performance measure that indicates the visual stability of a page. A high CLS means that the elements of the page tend to move during loading, which may be disturbing for users.
To optimize the CLS, we must ensure that the dimensions of our images are specified in the HTML code of the page, which prevents the layout from changing when the images are loaded. Dimensions can also be defined from CSS with properties width , height or aspect-radio.
Optimization of images with extensions
We can also use plugins to optimize our images. These plugins can automatically compress our images, convert our images into more efficient formats like WebP or AVIF that are increasingly supported on modern browsersand even serve these images transparently to our users.
⚠️ AVIF offers a better compression than the WebP and is increasingly supported by modern browsers, but it sets a limit on the SEO. Currently, Google Search does not support AVIF format according to their Documentation. Use as an optimized generated format. In addition, conventional formats such as JPG and PNG will be preferred.
The extension we use most of the time are Imagify and Optimus. This prevents contributors from uploading images in WebP or AVIF format but simply using standard formats such as JPG or PNG to let the plugin do the rest.
Step 3: Architecture & Infrastructure
Using a dedicated service
The WordPress mechanism is not exempt from any defects, far from there.
Our preferred CMS has in particular the unfortunate practice of generating miniatures for all the sizes declared in your project, whether or not the image is used.
There are typical "extension" approaches to trying to generate these miniatures on the fly, but we prefer a more robust method, which is to rely on a on-the-fly image generation service. The project ImgProxy which offers a free and open-source version and which performs this task brilliantly!
Thus, in a project with this type of operation, it is necessary to deactivate the generation of CMS miniatures and deport this work to a dedicated service, and de facto more efficient.
This is an approach that we favour especially for projects towebsite factory with content sharing.
Adoption of a CDN to improve image performance
A CDN, or Content Delivery Network, is a network of servers located in different parts of the world, designed to provide web content as quickly as possible to the user. Using a CDN can greatly improve the performance of your WordPress site, especially with regard to the distribution of images.
When you use a CDN, your images are stored on multiple servers around the world. When a user accesses your site, the CDN delivers the image from the server closest to the user's location. This can reduce latency time and allow the image to load faster.
In addition to faster delivery, some CDNs also offer image optimization features (e.g. Cloudinary). For example, they can automatically resize images according to the dimensions of the user's screen, convert images into more efficient formats such as WebP, and even optimize image compression for an ideal balance between quality and performance.
Using a CDN can be particularly beneficial for WordPress sites that use many images in different sizes. With a CDN, you can easily manage and optimize these images for maximum performance.
Two home examples are the sites of the Secours Populaire Français and Unaf-Udaf. For these clients, we have set up an imgProxy system that automatically synchronizes the site's media on a remote CDN. Thus, we maintain a 100% WordPress user experience, while offering better performance.
Step 4: Contribution
A poor contribution of images can damage this performance. For example, using too small images can result in loss of quality and poor user experience. Conversely, using too large images can slow down your site's loading time. It is therefore essential to ensure that images of the appropriate size are used to optimize the performance of your website.
It is important to monitor the total weight of the page. A good practice is to set a budget weight and to check that it remains within this limit.
If your page is 6 MB, you may have to delete a few images or choose a size too large for a smaller location. A good general practice is to aim for a total page weight of less than 2 MB to maintain good performance.
Also, be sure to upload images optimized for the web. Choose images with a colorimetric space RGB (Red, Green, Blue) with a 72dpi resolution. For photography, the JPG format is recommended, while for transparent images, the PNG-24 format is more suitable. It is preferable to avoid PNG-8 format.
Step 5: After your site is online
There are many tools to track web performance on an ad hoc or continuous basis. The most popular tool is probably Lighthouse and PageSpeed Insights, but there are many others that provide more details on the optimizations to be performed.
WebPageTest.org is a favorite tool for analyzing website performance. It provides a detailed audit of the loading speed of a page, resource size, server response time, among others. What distinguishes it is that it also simulates optimizations. For example, you can use it to see how your site behaves like compressing your images or implementing the delayed loading. This gives you an accurate idea of what improvements you could make to your site to increase its performance.For example, on the capture below, you can test a page by applying width and height attributes to our image elements.
The tool that allows us to have a time tracking of the different performance metrics we use at Be API is Caliber. The interface offers us histograms over time of the different performance metrics in relation to several types of digital media which allows us to identify whether an online layout has a regressive or progressive impact on web performance.
Conclusion
Optimizing images on your WordPress site is a crucial aspect of web performance. By applying techniques such as the homogenization of image sizes, the elimination of superfluous images, the strategic positioning of images, and the use of tools such as image optimization plugins and CDNs, you can greatly improve the loading speed of your site, user experience, and SEO of your site.
Remember that image optimization is a continuous process that requires regular monitoring and adjustments.
