Slow loading images impacts not only the user experience but also hurts your site's ranking in the search results. Find out how to improve loading images.
How do you fix slow loading images on your website? What’s causing them? There are ways to optimize it, and let’s dive into it deeper.
Optimizing Image Loading in HTML for Improved User Experience and SEO
A faster loading images means:
- Improved User Experience: When images load quickly, users can access the content they want without delays. This enhances the overall browsing experience and reduces frustration.
- Faster Page Load Times: Images are often a significant factor in page load times. By optimizing and compressing images, websites can reduce the file size and load them more quickly. This results in faster overall page load times, allowing users to access the content faster.
- Reduced Data Usage: Faster loading images consume less data, which is especially beneficial for users with limited data plans or slower internet connections. Optimized images help reduce the amount of data that needs to be transferred, resulting in a more efficient browsing experience.
- Better SEO Performance: Improving SEO and rankings on search engines since site speed is a ranking factor, and faster loading images contribute to improved website performance.
- Improved Accessibility: Faster loading images can benefit users with disabilities who rely on assistive technologies. When images load quickly, screen readers and other assistive devices can process and present the content more efficiently, ensuring a smoother browsing experience for all users.
- Hosting cost reduction: Potentially reducing the hosting cost, if you pay-as-you-go for the transfer data.
Optimizing Images for Improved Performance
This step should be fairly easy. Use the tool to optimize your images. One of the tools could be ImageOptim (Mac only) or pngquant or Squoosh. These tools will help you to optimize your images.
Note: while this type of optimization is usually safe, there are situations where size might be stored in the database and just overwriting the image (e.g. by uploading them directly through FTP) with a newly optimized version may bring an unexpected behavior.
Client-Side Image Optimization Techniques Before Uploading
Access the image for upload for processing through client-side JavaScript (JS) before upload is possible through canvas. Read more about it in article called How to compress the image on the client side before uploading
.
Implementing Responsive Images with srcset and sizes
Loading the same image for all viewport sizes impacts not only the loading speed but also the rendering. A single image that perfectly fits into large viewports doesn’t fit well into small viewports (e.g. mobile). If someone uses a small screen device on a low bandwidth network, they’ll download unnecessarily large images.
The srcset attribute and sizes can be used to inform the browser about different sizes of the same picture that you have created. Here is an example:
<img srcset="flower-480w.jpg 480w, flower-800w.jpg 800w" sizes="(max-width: 600px) 480px, 800px" src="flower-800w.jpg" alt="Beautiful rose flower"/>
The list of images we’ll give the browser to choose from and the sizes of each image are specified by the srcset attribute. A comma separates each set of image data from the one before it.
When specific media circumstances are met, sizes define a set of media conditions (such as screen widths) and suggest the appropriate image size to use.
Lazy Loading Images: Deferring Offscreen Image Loading
Use the loading attribute to specify the urgency with which you want an image to load for the browser. Using loading="lazy" tells the browser to load the image only when it’s just about to be rendered in the viewport. In other words, images that aren’t displayed for the user won’t be fetched by the browser. Example:
<img src="example.png" alt="A description of the image." width="500" height="250" loading="lazy"/>
Exploring the Benefits of Lazy Loading
- Reduces initial load time – images that aren’t visible won’t be loaded therefore the page will load faster.
- Saving bandwidth – images that aren’t visible won’t be downloaded therefore bandwidth won’t be used, specifically on limited data plans. In some cases, it may impact the bill you pay for CDN or hosting.
- Improving page rendering – the browser won’t need to process images until they are requested by scrolling the page. That saves processing time, battery, and other system resources.
- Good for SEO – speed loading is one of the most important factors that impacts the search ranking.
Preloading Images for Faster Loading Times
You can instruct the browser to preload crucial images in the document’s <head>.
<link rel="preload" href="example.png" as="image"/>
Note that the browser will have to lower the priority of another resource, like a script or font file, when you ask it to prioritize downloading one resource, like an image. Preload an image only if it is absolutely necessary. Despite the fact that the word load
appears in the name, the script is not loaded or executed. Rather, it is just scheduled to be downloaded and cached with a higher priority.
Boosting Performance with Priority Hints and fetchpriority
The fetchPriority property is a hint given to the browser on how it should prioritize the fetch of the image relative to other images. The fetchpriority property is a hint rather than a directive. The browser will make an effort to honor the developer’s choice. It is also possible that the browser will apply its preferences for resource priority as deemed necessary in case of conflicts.
Note that preload image is mandatory for the browser, while fetchpriority is a hint that might be used, but not always.
<link rel="preload" fetchpriority="high" href="example.png" as="image"/>
Leveraging Browser Caching for Image Loading
You may instruct the browser to keep the image in the browser’s cache for a certain time. So, once it’s downloaded the browser won’t download it again until the specified expiration time passes. The most popular is to set cache expiration to 1 year. An example of Apache configuration is through the .htaccess:
<IfModule mod_expires.c>
ExpiresActive on
ExpiresDefault
ExpiresByType image/bmp "access plus 1 year"
ExpiresByType image/gif "access plus 1 year"
ExpiresByType image/jpeg "access plus 1 year"
ExpiresByType image/png "access plus 1 year"
ExpiresByType image/webp "access plus 1 year"
ExpiresByType image/svg+xml "access plus 1 year"
ExpiresByType image/webp "access plus 1 year"
</IfModule>
<IfModule mod_headers.c>
# 1 Year
<FilesMatch "\.(ico|pdf|flv|jpe?g|png|webp|gif|swf|svg)$">
Header set Cache-Control "max-age=29030400, public"
Header unset ETag
FileETag None
</FilesMatch>
</IfModule>Enhancing Background Images with image-set()
For high pixel density screens, the image-set() CSS functional notation allows the browser to select the best CSS image from a list of options.
The CSS specification says:
Delivering the most appropriate image resolution for a user’s device can be a difficult task. Ideally, images should be in the same resolution as the device they’re being viewed in, which can vary between users. However, other factors can factor into the decision of which image to send; for example, if the user is on a slow mobile connection, they may prefer to receive lower-res images rather than waiting for a large proper-res image to load. The image-set() function allows an author to ignore most of these issues, simply providing multiple resolutions of an image and letting the UA decide which is most appropriate in a given situation.
Example:
.example-background { /* Fallback */ background-image: url("example.png"); /* Standard; should be transformed to prefixed versions using Sass or Less */ background-image: image-set("example.png" 1x, "example-2x.png" 2x); }
Displays with lower resolutions will experience better performance because their browser will automatically request the lower resolution image, which automatically will improve the speed loading because the image will be smaller.
Utilizing Content Delivery Networks (CDNs)
By storing the files for your website at numerous data centers across the world you will serve the assets with the closest server to the user. In other words, when someone visits your website, they can then download your files from the nearest global data center.
Extra tip:
Replacing Inline SVG Elements with Image Elements
There are cases where we render a lot of <svg>-s (e.g. icons) and at the same time some of them are invisible for the user. This causes not only the loading of too many resources but also impacts the rendering performance.
To fix the issue replace embedded <svg> elements with <img src="example.svg" loading="lazy"/>.
Say we have several icons rendered as embedded inside HTML. So, instead of:
<svg aria-hidden="true" focusable="false" xmlns="http://www.w3.org/2000/svg"><circle cx="100" cy="100" r="90" stroke="black" stroke-width="3" fill="red"/></svg> <svg aria-hidden="true" focusable="false" xmlns="http://www.w3.org/2000/svg"><circle cx="50" cy="100" r="90" stroke="black" stroke-width="3" fill="green"/></svg> <svg aria-hidden="true" focusable="false" xmlns="http://www.w3.org/2000/svg"><circle cx="10" cy="10" r="90" stroke="black" stroke-width="3" fill="blue"/></svg>
Do this:
<img src="icon.svg" loading="lazy" alt=""> <img src="icon_2.svg" loading="lazy" alt=""> <img src="icon_3.svg" loading="lazy" alt="">
Note that the above is not applicable when you render <svg> using <use> with the reference to the existing <svg> element on the page.
Comments