How to optimize images with or without Contentful’s Images API

Illustration of the image content type, representing optimized images loading fast on webpages
Published
September 23, 2021
Category

Product

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 you can take today to evaluate and optimize the images on your website.

Why images and video matter

Images account for nearly two-thirds of average webpage bandwidth, making them a primary culprit for slow load times. While removing them is temping, 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.

Illustrated icon of image content types

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.

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 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.

File typeHighlightsBest for
JPG, JPEG (Joint Photographic Experts Group)Lossy compression Smaller than a PNGPhotographs, illustrations and screenshots
PNG (Portable Network Group)Lossless compression Best for showing details Larger file than a JPEGIllustrations, logos, diagrams, screenshots and Infographics
GIF (Graphics Interchange Format)Lossless compression Older animation Larger file than a videoVideo clips
WebP (A modern image format)Lossless and lossy compression Smaller than a JPEG or PNG Not compatible with all browsersNearly all assets
SVG (Scalable Vector Graphics)Lossless compression Infinitely scalable Can be animated or interactiveIcons, logos and illustrations

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, resize, resize

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, photo-editing software, like an Adobe Creative Cloud app 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.

Illustrated icon of a cropping tool

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 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. 

Illustrated icon of three items loading

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. 

Illustrated icon of a package being delivered

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.

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. 

Still have questions on how to best optimize images with Contentful’s Images API? Schedule a workshop with a Contentful expert

About the author

Don't miss the latest

Get updates in your inbox
Discover how to build better digital experiences with Contentful.
add-circle arrow-right remove style-two-pin-marker subtract-circle