paint-brush
3 Simple Ways to Optimize Your Images and Improve Core Web Vitalsby@imgix
468 reads
468 reads

3 Simple Ways to Optimize Your Images and Improve Core Web Vitals

by imgixJanuary 20th, 2023
Read on Terminal Reader
Read this story w/o Javascript
tldt arrow

Too Long; Didn't Read

Core Web Vitals are increasingly important measures for user experience and SEO factors. Because mages comprise an average of 75% of the total page weight on modern websites, images disproportionally impact CWV, especially Largest Contentful Paint. Image compression, resizing, and using the next-gen formats are the easiest and most important ways to improve Core Web Vitals.
featured image - 3 Simple Ways to Optimize Your Images and Improve Core Web Vitals
imgix HackerNoon profile picture


Website speed is important, not only because 70% of consumers admit that page speed impacts their willingness to buy from an online store, but also because of Google. Google increasingly weighs the quality of the user experience and page performance in its search algorithm, impacting SEO and content discoverability.

What Are Core Web Vitals?

According to web.dev, Core Web Vitals (CWV) measure three key aspects of the web experience: loading, interactivity, and visual stability. With these clear signals, you can better assess and improve your website without needing to be a UX guru.


You can monitor the CWV results of any website using the PageSpeed Insights tool, which shows the performance between mobile and desktop. Loading, interactivity, and visual stability are reflected in each of the three factors below:


  • Largest Contentful Paint (LCP) — how many seconds it takes for the most data-rich element on a page to load. For example, when someone clicks a link for a page with a high-resolution primary image, LCP is how long it takes for the visitor to see the complete picture. Google considers a load time up to 2.5 seconds good, up to 4 seconds “needs improvement,” and anything longer, poor.


  • First Input Delay (FID) — how many milliseconds it takes for a page to respond to user interaction. For example, clicking a button may invoke JavaScript. If the JavaScript code is complicated or involves prolonged backend communication, it could take longer to execute. The quicker the interaction, the better. 100 milliseconds or less is ideal.


  • Cumulative Layout Shift (CLS) — CLS is a measure of the largest burst of layout shift scores for every unexpected layout shift that occurs during the entire lifespan of a page. For a simpler illustration, the large hero image loads slightly after other components when a webpage is first loaded. After the user scrolls past it, it finally loads, forcing the surrounding frames of images and text to change position or resize. These kinds of elements can be annoying and distracting. A good score is 0.1 or less.

How Images Impact Core Web Vitals

Images comprise an average of 75% of the total page weight on modern websites. They have an outsized impact on loading and visual stability. The metric that images influence the most is the Largest Contentful Paint (LCP).


Let’s look at the mobile experience for the New York Times. For the day we measured, the performance score was 17, far from an acceptable score range (50-89).


nytimes.com had a low PageSpeed insights score


When we looked at the Opportunities, nearly half were image-related. And the page load time can be reduced by around 10 seconds with these image optimizations.


nytimes.com's Core Web Vitals are adversely impacted by images


  1. Defer Offscreen Images
  2. Serve Images in Next-Gen Formats
  3. Properly Size Images
  4. Efficiently Encode Images


The great news is that image processing APIs like imgix can easily optimize images and improve website performance. For this article, we’ll focus on the last 3 techniques, as they can be easily automated using image APIs. We’ll dedicate a separate article on deferring offscreen images, aka. Lazy loading, as it has multiple implementation options and entails more finesse.


Image compression, resizing, and format conversions are the 3 easiest and most important ways to improve Core Web Vitals.

1. Use Nex-Gen Image Formats Like AVIF

As the nytimes.com example shows, the easiest way to improve LCP is by using a next-gen image format. With imgix, you can convert existing files from virtually any format — such as JPG, GIF, PNG — to AVIF or WebP. This reduces file sizes by an average of 60%, if it’s converted from JPEG, and 35% if it’s converted from WebP, with virtually no loss in quality. (To learn more, check out the AVIF article here.)


Core Web Vitals Opportunity: Use Nex-Gen Image Formats Like AVIF


2. Efficiently Encode and Compress Images

Using nytimes.com as an example again, we see that had the images been efficiently encoded, they could save up to 40% in file size. You can automate image compression using imgix, without any impact on visual quality, with one simple URL parameter auto=compress. Optimizations occur in real time, removing the need to batch process or maintain multiple copies of an image.


Core Web Vitals Opportunity: Efficiently Encode or Compress Images


In the examples below, the original image has a file size of 3.3MB. The optimized image, which maintains the same visual quality, has a file size of only 215kB, which is 93% smaller than the original. It’s achieved by using three simple transformations - fm=webp&auto=compress&w=2000.


Original Image - 3.3MB


2023-01-unoptimized-golden gate-imgix


Optimized image - 215kB

2023-01-optimized-golden gate-imgix


The imgix ‘q=’ parameter lets you control how much compression you want for a particular image. If you’re displaying a work of art or a detailed technical image, you may need to include every possible pixel in the picture, even if it takes longer to download. imgix API parameters give you full control over every aspect of image processing and optimization.

3. Properly Resize Your Images

For nytimes.com, they can save an astounding 29 seconds in loading time and up to 78% in file size by properly resizing the images.


Core Web Vitals Opportunity: Properly Resize Your Images


Images are often served out much larger than needed for a page. You can adjust the width (w) and height (h) parameters based on different devices or viewport sizes. To dynamically adjust image sizes and dpi based on a user device, use the automatic scrset generation.

Getting Started with imgix

If you want to improve your Core Web Vitals and website performance, image optimization is the most effective method. We hope this article gives you an idea of how important but simple it is to implement these optimization techniques. We will follow up with a separate article on image lazy loading in the coming weeks.


To learn more about imgix, check out our documentation and sandbox, and try it free.



Also published here.