Live Demo 👉 All Demo, No Pitch: Content & Commerce / Builder.io & Elastic Path on 12/13
☰
Use Cases
Pricing
Blog
×
Visual CMS
Drag-and-drop visual editor and headless CMS for any tech stack
Theme Studio for Shopify
Build and optimize your Shopify-hosted storefront, no coding required
Resources
Blog
Get StartedLogin☰
The Definitive Guide to Image Optimization
April 11, 2022
Written By Steve Sewell
Everything you need to know about displaying images on the web without compromising on quality and speed.
Do you remember that time you clicked on a link and the web page took several minutes to unfold, like the world’s slowest curtain? No matter how beautiful that image was, that must’ve been a frustrating experience. If you didn’t wait long enough to see that page, you’re not alone: A page that takes more than 1 to 3 seconds to load runs the risk of users bouncing.
No one has the patience for a slow website — especially not on a mobile device — and images are the biggest contributors to total bytes downloaded on a page.
Here are some effective tricks to let your users enjoy the great images on your website, without eating into their bandwidth and compromising on quality.
What is image optimization?
Image optimization is the process of delivering the greatest-quality image while keeping it the smallest-possible size. In other words, optimizing images lets you create and display images with the best format, size, and resolution to increase user engagement.
Why you should care about image optimization
The internet is heavy and clunky, and one of the reasons behind this is the overwhelming quantity of images. But vivid visuals and beautiful pictures are key to providing a great user experience, and in e-commerce, where you need to display your products in attention-grabbing ways, optimal images become crucial.
That’s why image optimization is important. Reducing your image size to make it lighter doesn’t mean that it needs to look like an indistinguishable mass of pixels, so you don’t have to sacrifice quality for speed, and vice versa.
Optimizing your images comes with a variety of benefits.
- Improved user experience. Your users don’t want to wait around for your images to load. And if the image has critical or urgent content, they might not have the time to wait. In any case, you want to ensure that your users are able to complete their desired and expected tasks on your page with as few roadblocks as possible.
- Better page performance. Large, unoptimized images slow down your page load. The faster your website, the more delighted your user.
- Enhanced visibility. Optimizing images has SEO advantages as well. Images that are optimized provide contextual information to search engines and make the visual content more accessible — which ensures that your images rank in image searches on Google. Not only that, when your page loads faster, Google’s search algorithm rewards that with more visibility.
Best practices for optimizing images
There are several ways to optimize images. Here are a few recommendations for developers who want to ensure the best possible user experience when displaying visual content.
Use <img> tags
Both the HTML <img> tag and CSS background-image property deliver similar results — that is, displaying the visual content. But they’re not the same.
Using <img> tag allows you a little more control over how the user consumes your image content. <img> tag is especially appropriate when
- Your image is not just decorative, it is a part of the content.
- Your users might print the page out, and you want the image to be printed as well.
- The image has an essential semantic meaning (like a warning icon), and you want to ensure that this context is conveyed to assistive technology like screen readers.
- You want the image to benefit from SEO. Google doesn’t automatically index background images.
- You rely on the browser to scale and render your image in proportion with the text size.
The <img> tag also helps your page load faster and comes with several useful optimization attributes such as srcset and sizes (more on these later).
Take advantage of next-gen formats
Another great way to optimize images is to use next-gen formats like WebP for superior compression and quality characteristics. WebP images are smaller in file size than the JPEG and PNG versions by at least 25-30%. Not only do WebP images load faster compared to the traditional formats, but they also consume less mobile data. For example, Facebook discovered that switching to WebP images resulted in a 25-35% filesize savings for JPEGs and an 80% filesize savings for PNGs.
Not all web browsers support WebP; however, when you use the <picture> tag in HTML with <source>, it enables backward compatibility, meaning all browsers can display the correctly optimized image format.
Make images accessible with alt text
Alternative text, also known as alt description or alt text, gives an accurate, contextual description of the function and appearance of a graphic. This is critical not only to improve user experience in general, but also to help users with disabilities to access your content. Apart from improving digital accessibility, specific and well-written alt text helps images rank higher in search and attract more traffic to your website. It’s also a best practice for good user experience; if an image doesn’t load fast enough, the user should still be able to hover over it and learn what it is.
Just as alt text is important, so is marking images that have no purpose other than adding decoration. The background images that are not part of the content and are only there to enhance the appearance of the page need to have the role attribute with “presentation” as the value.
Create responsive images with srcset
Apart from icons and logos, most images need to be resized to adapt to different screen sizes. Instead of creating images with fixed sizes, you can create responsive images with srcset.
Using the srcset attribute with a range of options of different graphics for different widths lets you serve different images to users depending on their device display width. This ensures that they get the same great experience no matter how they access your website, with increased performance and decreased data wastage.
It’s better to use the w unit instead of x (which deals with pixel density and is more appropriate for fixed-size images). The w unit helps you fetch the correct image depending on the screen width. For example, <img srcset="small.jpg 500w, medium.jpg 1000w, large.jpg 2000w" src=”...” alt=”...”> tells the browser to display the right image depending on the user’s resolution.
Support resolution-switching with sizes
When a browser is pre-fetching an image on first load, it doesn’t know the size at which it should render the image. Unless you specify the sizes attribute on an <img> tag, the browser will assume your image is the entire width of the page and might end up fetching excessively large images.
The sizes attribute is a useful way to make sure you let the browser know beforehand how many pixels wide the image is. The sizes attribute lets you specify certain conditions for the images and the width of the slot the image would fill if those conditions were true. Instead of providing absolute width of the image in pixels, you can also specify the estimated percentage of the screen it will occupy with the vw unit.
Preserve your aspect ratio
When you’re resizing an image in response to screen sizes, don’t forget to maintain the image’s aspect ratio. When you don’t optimize your images to be fully responsive, you could cause unexpected layout shifts. When an image on your page changes position or size, it could affect the position of content around it. This impacts comprehension, usability, and the overall user experience.
You can easily minimize layout shifts by specifying the image’s width and height in HTML and combining that with the right CSS width and setting CSS height as “auto”. The object-fit attribute in CSS is a great addition: It lets you tell the browser if the image needs to fill the page, cover, be contained, or be scaled down.
Load your key images fast with fechpriority
Your web page has certain images that need to be fetched at first load, as part of the largest contentful paint (LCP). For example, that beautiful above-the-fold hero image on your website is clearly high-priority. You want this image to be visible to the user right away for maximum impact. Using `fetchpriority=”high”` lets you specify to the browser that this image needs to be prioritized and that the browser doesn’t need to expend its resources on other images (like the ones below the fold) right away.
Speed up performance with lazy loading and async decoding
Using `loading=”lazy”` is a great way to tell the browser not to waste its precious resources loading images that are not in the viewport, above the fold. Anything that is not immediately displayed on a web page until a user scrolls down is deprioritized, which helps conserve resources and use them wisely, enhancing your website’s performance. This is ideal only for below-the-fold and non-LCP images.
The way browsers load images is not optimized for performance by default. However, you can solve this by using `decoding=”async”` for anything that’s not above the fold. Decoding images has an impact on performance, so if you specify that non-LCP images below the fold do not have to be decoded first, it helps enhance your website’s performance and make the page load faster. You could also set `fetchpriority=”low”` for these images.
Automating image optimization
Cloudinary
Cloudinary is a Digital Asset Manager that has image components to automate image format and performance optimizations to suit the end user’s devices.
Next.js Image
Next.js is a React framework that lets you build fast and user-friendly websites. The Next.js Image component is an extension of the HTML <img>. It automatically resizes images using modern image formats, prevents layout shifts automatically, and lazy loads images that are below the fold, to name a few advantages.
Nuxt Image
Nuxt is an open-source framework for Vue.js. The <nuxt-img> component is a drop-in replacement for the <img> tag. It’s built specifically for image optimization, and similar to Next.js Image, it automatically resizes images, generates responsive sizes, supports native lazy loading, and more.
Gatsby Image Plugin
Gatsby is a full-stack frontend framework that comes with performance optimizations, SEO features, accessibility, and other options. The Gatsby Image Plugin lets you add optimized images to your site while maintaining high performance.
Builder.io
Builder.io generates all content with fully optimized images. Builder comes with advanced image optimization options, so instead of hard coding, you can simply automate it with Builder’s performance-obsessed, API-driven product. For example, creating the proper sizes attribute for every image on your site can be a tedious and time-consuming process. But when you use Builder, it analyzes your image as it relates to the layout of your page and determines the exact sizing of your image for all device sizes, automatically generating the optimal sizes attribute.
Conclusion
For a blazing fast website, start with optimizing your images. Large, unoptimized images lead to slow page loads, SEO-related penalties, and worst of all, unfavorable user experience. To discover all the opportunities to optimize images, improve performance, and enhance user experience on your website, use our Performance Insights tool.
Share
