When creating a successful and engaging website, images and how they appear on the website are crucial to its success. Google developer, Alan Kent, discusses six tips to optimize images on your website, and we wanted to share them with you!
Eliminate Image Cumulative Layout Shift
Google has defined Cumulative Layout Shift, also known as CLS, as one of the three Core Web Vitals, which are factors that Google considers necessary for user experience on web pages. Cumulative Layout Shift is where the contents of a page visibly move around on the screen. It is crucial to eliminate cumulative layout shifts to optimize the use of images on your website. If misused, images can contribute to this problem, significantly impacting users’ experience.
When a page is loading, most browsers will display the top of the page, even before the whole page has been downloaded. To speed up the load time, any image references are added to a queue of resources to be downloaded, along with JavaScript and CSS files, which begin to download. The problem with CLS starts when the browser does not know the image dimensions before rendering the page content, resulting in not leaving the right amount of space for an image.
When looking for CLS, look for warning signs such as large layout shift images with no explicit width and height. It is important to remember that other things, such as JavaScript can cause layout shifts.
To help eliminate CLS, there are automated tools that can measure images. One tool collects lab data by testing tools that you can point at your web page. Lab tests can be performed and allow the web page owner to control the process entirely. Field data can be collected by measuring what happens to users on your website and can help determine whether you have solved a problem for the users on your website. PageSpeed Insights is another helpful tool that presents lab and field data together in one report.
So, how do you fix the Cumulative Layout Shift? There are several ways to fix image CLS issues. However, a straightforward way is to include image dimensions in the HTML markup so that the browser immediately knows how much space to reserve for the image.
Correctly Size Your Images
Another tip for image optimization is to choose the correct width and height for your images. Larger files take longer to download and require more processing time, especially on mobile phones with slower network connections and less powerful CPUs.
Sizing images correctly can be a complicated process due to the range of device sizes and resolutions that can access your website. If a browser shrinks or crops an image, the download file is more significant than needed and becomes wasteful.
One way to detect incorrectly sized images is to use the adequately sized images section under Opportunities in the PageSpeed Insight report, which identifies images on a page with larger dimensions than needed, listing the URLs.
Responsive images provide techniques to make images behave correctly on different sized devices. For example, a source set attribute in HTML allows site owners to list URLs for different sizes and formats on images, letting the browser pick the best one to download. However, this technique requires site owners to resize the images in advance. If resizing the images is too much work, site owners can consider using a Content Delivery Network or CDN. Services such as CDN can resize images and convert them to more efficient formats.
Use the Best Image File Format
File format affects your images’ file sizes, so you must consider the file format and whether you should use PNG, JPEG, or WebP files. However, formats such as JPEG and WebP can reduce files by using lossy compression algorithms, often resulting in smaller file sizes and slightly lower quality.
If pixel-perfect images are required, for button icons, for example, less efficient, pixel-perfect formats should be used. While this may seem like a bad idea, the speed benefit can save website users from abandoning your page.
Not all image formats will work on all browsers. The “Serve Images” in the Next-Gen Format section of the PageSpeed Insights report can help site owners determine if the website could benefit from a different image format. Another tool to determine what file format is best on your website is the caniuse.com website. This website can check which browsers support specific image file formats.
Compress Images Appropriately
The Encode Images Efficiently section of the PageSpeed Insights report can be used to identify candidate images for compression optimization. However, it is important to note that this report does not perform a visual check on the compressed images.
A typical default value for WebP is 75. A tool to help compress images is the Squoosh.app website, making it easy to compare the before and after versions of images.
Cache Images in the Browser
Website owners need to tell the browser how long it can cache images. When returning an image from your website, you can include an HTTP response header with caching guidance, such as how long it is recommended for a browser to cache an image.
If you do not change your images frequently or if you always give images a new URL, then you can set a very long cache lifetime. Also, using a CDN often makes downloads faster by caching copies of your images in various locations worldwide.
Correctly Sequence Your Image Downloads
Correctly sequencing the order in which images are downloaded can significantly improve page performance.
You typically want to download large hero images at the top of the page, as they can affect the Largest Contentful Paint score for the page, which is the time it takes to show the user the main content of the screen. Next, site owners will want other images that will be visible without scrolling to be downloaded. Finally, you want images to be downloaded that are just off the screen so that they can be ready for display when a user starts to scroll.
Another technique to improve the sequence of image downloads is lazy loading. Lazy loading is where images are not downloaded until the user scrolls to that portion of the page.
Take Away
A good quality website is full of engaging images. However, it’s essential to optimize images for the best user experience. Understanding the problems that can occur with images and implementing the solutions to these problems can improve your SEO.