How to optimize images for websites (with or without Contentful’s Images API)

Patience may be a virtue but not for those on the internet seeking information. No matter why someone surfs the web — whether they’re searching “what’s the best way to get gum out of hair” or researching an enterprise software solution — they’re quick to select the first queries offered by search engines and quicker to leave these pages if they’re slow to load.

Here are six steps and one bonus update you can take today to evaluate and optimize the images on your website.

Bonus: Contentful now supports AVIF image formatting!

As you’ll learn throughout this post, image quality and load times have a drastic impact on the SEO performance of your website. Faster loading images create positive web experiences for readers, keeping them on your site longer. This tells Google and other search engines that your web content and its performance are high quality and should be prioritized in results. A win-win.

This is why we’re excited to announce the release of AVIF image conversion as part of the Contentful Images API. The AVIF image format reduces image file sizes, meaning your pages load faster than ever. This gives you improved SEO performance and reduces bounce rates on your pages - people have short attention spans!

The image conversion is deployed entirely in the background by our API — editorial users don’t need to change their graphics workflows to take advantage of AVIF. To find out more about how to enable AVIF in your image pipeline, you can check out our Images API documentation.

But AVIF formatting is just one great opportunity you can take advantage of. Read on for some other ways to further optimize your images!

Why image optimization matters

Images account for nearly two-thirds of average webpage bandwidth, making them a primary culprit for slow load times. While removing them is tempting, images and video are today’s content frontrunners and belong in all digital strategies. In conjunction with text, visual assets add depth to brand narratives and appeal to visual learners, — which account for roughly 65% of the world’s population.

Still, Google demands that brands pay attention to how heavy an image is so much so that it references the weight of such assets in its Core Web Vitals — a set of three metrics that emphasize webpage performance. Largest Contentful Paint, or LCP, is a vital that indicates the time it takes a page’s largest asset to load, which is (you guessed it) often an image. “Google wants this to happen in fewer than 2.5 seconds. If it takes more than 4 seconds, Google considers it a ‘poor’ experience,” and will hold it against you in search ranking. To get under that 2.5 mark, assets must be optimized — no ifs, ands or buts about it.

Six steps to optimize image load time on your website

1. Identify the slow-loading culprit 

You did it — you just launched a new webpage. It's well designed, accessible and fresh. Unfortunately, there’s an issue. Your page is taking forever to load. It’s likely the collective file size of the images you so carefully selected are making your site too large. 

A page-speed tool can help determine which assets are responsible for the lag and need to be optimized. If you plug your page URL into a tool like Cloudinary or GTmetrix, you’ll receive information about the current file size and dimensions of each image, what adjustments can be made to optimize them and the impact adjustments could have on page load times. Using page-speed insight tools offers a look at where your webpages are at now and where they could be in the future. 

2. Select the proper image file type

To set yourself up for image optimization success at the get-go, you should be mindful of the file type you select for each asset. File types come in all sizes, have various compression standards and are better suited for some assets than others. Below is an overview of common image file types and what assets they are best used for.

You’ll notice that some file types lean on lossy compression to reduce sizes while others are lossless. Lossy images offer greater compression but run the risk of becoming pixelated as data size is reduced. Lossless compression preserves an image’s clarity, data size and quality at the expense of a larger file size. If your brand relies on high-quality images, lossless compression is probably the way to go even if you need to tolerate a slightly longer load time.

If you use Contentful, our Images API allows you to easily convert asset file types to fit your preferences.

For more information on image file types, check out A creator’s guide to file formats — and why they’re important. 

3. Resize images

Once you determine the proper file type for an asset, you’ll need to alter its size to fit the container or page it will live within. Having the wrong size image on your site is a lot like buying the wrong size clothing — it can look good in theory but not in practice. Fortunately, resizing images is relatively easy. You can readily resize images on your computer with no additional software necessary. If you’re team Mac, you can launch photos or preview to change an image's dimension. If you work on a PC, both preview and paint apps have resizing capabilities. 

If you’d like more options to make adjustments, image editing software — like Adobe Photoshop or one of many free image resizing websites — could be a better option. A downside to this resizing process is that it can take a while to individually resize assets if you have more than a few to take care of. Plus, if you upload an asset and need to tweak it later, you have to take the same steps as you did the first time and reupload it. 

If you use the Contentful Images API, you can upload assets and create spin-offs of different dimensions and scales without leaving the interface. This requires less effort and saves you time. You can even round the edges of images or set a focal point. These integrated features empower greater productivity among developers and designers. Our Images API documentation provides details on how to fully implement these features.

4. Get comfortable with compression

If image optimization isn’t your forte, you might be thinking, “Wait, why is there another section on the same thing? Aren’t compression and resizing the same?” While both can change an image’s size, they do so in different ways. Resizing alters image dimension. Compression alters file size and resolution, which can result in grainy images if you take a heavy-handed approach. 

While image compression and resizing are different things, the tools you use for one can often address the other. You can compress images in most photo editing apps or via online websites like TinyPNG. Some tools will compress images based on resolution others offer you the option to select the quality, in percent, that you would like to maintain.

If you didn’t resize and compress your assets correctly on the first try, don’t sweat it. Successfully optimizing images for websites is an art and a science which requires you to balance size and quality. Getting it right can, and probably will, require trial and error. 

5. Implement lazy loading 

In the new world of digital, not every image on a webpage needs to be served immediately. Those further down the page can generate while the visitor begins reading, watching or scrolling through the first pieces of content situated closer to the top. This is called lazy loading. It delays asset loading until the user needs them. Because pages that implement lazy loading don’t have to render all at once, they load more quickly. As site visitors stay on the page or scroll, assets hidden further down the page will begin to populate.

Lazy loading can be achieved by coding or through apps and plugins. Depending on your technology, you may be able to take advantage of native lazy loading — which we recommend. Native lazy loading is low maintenance and requires little to no developer assistance. Creators can add specific attributes to determine the type of loading they prefer for each asset: lazy, eager and auto.

Check out this Headless Creator interview with our solution engineer Allan White to learn more about lazy loading and modern alternatives. 

6. Use a content delivery network

If you’re using Contentful Images API, you can cross this one off your to-do list. Out of Contentful’s four core APIs, the Images API is one of two that employs a CDN. CDNs help cache and quickly serve page components by utilizing globally dispersed servers. 

Without CDNs, a single server in a single location is responsible for delivering every user request. This results in high traffic and long load times. Fatigued servers can turn into server failures and cause operational issues that impact a consumer’s ability to do just that — consume. While short downtimes have little impact on SEO, frequent and long delays can eat away at rankings, hurting your chances of reaching new and returning consumers.

Image optimization practices are not one size fits all

Image optimization is not prescriptive. The practices one brand implements might not work for another. The weight images hold varies from business to business. Brands offering services and non-tangible goods may be able to serve images that are smaller but not as crisp. Companies that rely largely on images to entice customers — like those in the photography, high-fashion or travel industries — might embrace slower load times if it means each image served is clear and capable of eliciting a strong emotional and buying response from site visitors. 

These six steps will help you find the image optimization strategy right for your brand.

For more on images and SEO refer to our Contentful Image SEO guide. 

Frequently asked questions

What is image alt text?

Image alt tags are used to describe the content of an image, both to search engines and screen readers. They are a minor ranking factor in SEO and a large factor in content accessibility.

Do keywords in image file names help SEO?

Keywords in image file names are a minor ranking factor. More important than the file name is the on-page text surrounding the image.

Do pages with images rank higher than pages without images?

Adding images to illustrate the text content of a web page sends a signal to Google and other search engines that the publisher is making an effort to create authoritative content. Images can therefore be a significant competitive advantage in SEO.

For an in-depth walkthrough on optimizing SEO with Contentful, please refer to this guide.

Subscribe for updates

Build better digital experiences with Contentful updates direct to your inbox.