Core Web Vitals: Image Delivery Best Practices

Optimizing images is one of the easiest ways to improve Core Web Vitals, which measure how well your website performs for users. Here’s what you need to know:

• Largest Contentful Paint (LCP): Images should load in under 2.5 seconds. Compress and use modern formats like WebP or AVIF.
• Cumulative Layout Shift (CLS): Prevent layout shifts by setting image width and height.
• Responsive Images: Use srcset and picture elements to serve the right image size for every device.
• Lazy Loading: Load images only when they’re needed to save bandwidth.
• CDN Setup: Use a Content Delivery Network to optimize and deliver images faster.

Quick Tips:

1. Compress images with tools like TinyPNG or JPEGmini.
2. Use modern formats (WebP or AVIF) for smaller file sizes.
3. Define image dimensions to prevent layout shifts.
4. Implement lazy loading for below-the-fold images.
5. Serve device-specific images with responsive techniques.

Optimizing Images for the Core Web Vitals with ADDY …

Image Compression Methods

Image compression can reduce file sizes by up to 70% while maintaining quality, improving loading times and LCP (Largest Contentful Paint).

Comparing Lossless and Lossy Compression

The choice between lossless and lossy compression depends on your image type and performance goals. Here’s how they differ:

Lossless Compression:

• Retains the full quality of the original image.
• Typically reduces file size by 20–30%.
• Best suited for logos, screenshots, and text-heavy graphics.
• Maintains sharp edges and accurate colors.
• Results in larger file sizes compared to lossy compression.

Lossy Compression:

• Removes some image data to achieve smaller file sizes.
• Can reduce file size by 50–90%.
• Ideal for photos and complex images.
• Quality loss is often minimal and hard to detect.
• Improves loading speeds, contributing to better LCP scores.

Now, let’s look at tools that handle these compression methods effectively.

Top Compression Tools

Compression tools simplify the process of reducing file sizes while keeping quality intact. Below are some of the most effective options:

TinyPNG:

• Specializes in compressing PNG and JPEG files.
• Achieves file size reductions of up to 70%.
• Preserves transparency in PNGs.
• Supports batch processing.
• Offers API access for automation.

JPEGmini:

• Optimizes JPEG images using patented compression technology.
• Reduces file sizes by up to 80%.
• Maintains high-quality visuals.
• Available for both desktop and server use.

Smush:

• Works with multiple image formats.
• Provides bulk optimization features.
• Includes lazy loading for better performance.
• Integrates seamlessly with WordPress.
• Allows automatic resizing of images.

For the best results with Core Web Vitals, consider combining these tools:

• Use TinyPNG for graphics and logos that require transparency.
• Apply JPEGmini to optimize photos.
• Leverage Smush for automated WordPress image management.

Responsive Image Setup

Responsive images play a crucial role in improving Core Web Vitals. By serving images tailored to specific devices, you can reduce load times and enhance the overall user experience.

Setting Up srcset and picture Elements

Here’s how you can implement responsive images:

Basic srcset Example:

<img 
  src="image-800w.jpg" 
  srcset="image-400w.jpg 400w, image-800w.jpg 800w, image-1200w.jpg 1200w" 
  sizes="(max-width: 400px) 400px, (max-width: 800px) 800px, 1200px" 
  alt="Responsive image example">

Using the picture Element for More Control:

<picture>
  <source media="(min-width: 800px)" srcset="desktop.jpg">
  <source media="(min-width: 400px)" srcset="tablet.jpg">
  <img src="mobile.jpg" alt="Responsive image">
</picture>

Why Responsive Images Matter

By delivering images tailored to the user’s device, browsers download only the necessary files. This reduces bandwidth usage and speeds up page loads.

To get the most out of responsive images:

• Create multiple image sizes during the build process.
• Use modern image formats like WebP, while providing fallbacks for older browsers.
• Set up strong caching policies to improve repeat visits.
• Continuously track device-specific performance metrics for optimization.

These steps, combined with other image optimization techniques, can significantly improve Core Web Vitals and overall site performance.

sbb-itb-880d5b6

Next-Gen Image Formats

Modern image formats like WebP and AVIF are changing how visual content is delivered online. These formats offer smaller file sizes while maintaining excellent image quality, outperforming older formats like JPEG and PNG. By reducing file sizes, they improve page load speed and enhance the user experience.

WebP and AVIF: What They Offer

Both WebP and AVIF bring advanced features to image optimization:

• WebP: Supported by most modern browsers, WebP offers features like lossless compression, alpha transparency, animation support, and metadata retention.
• AVIF: Taking it a step further, AVIF provides better color depth, handles fine details like sharp edges and text more effectively, supports HDR images, and delivers high-quality visuals in even smaller file sizes.

By using these formats, websites can load faster and achieve better Core Web Vitals scores, which are essential for performance and user satisfaction.

How to Convert Images to Next-Gen Formats

To effectively implement WebP and AVIF, consider these methods:

• Automated CDN Conversion: Many Content Delivery Networks (CDNs) can automatically detect a user’s browser and serve the most suitable image format. Configure your CDN to generate WebP and AVIF versions while keeping the original formats as backups. Caching these converted images can further boost performance.
• Build-Time Conversion: Incorporate tools like Sharp (Node.js), ImageMagick (command-line), or the Squoosh API into your build process to convert images during development.
• Quality Checks: Regularly evaluate image quality to ensure visual fidelity while maintaining bandwidth efficiency.

For browsers that don’t support these formats, use a fallback strategy like this:

<picture>
  <source type="image/avif" srcset="image.avif">
  <source type="image/webp" srcset="image.webp">
  <img src="image.jpg" alt="Optimized image">
</picture>

This approach ensures every user gets the best possible image quality and performance, regardless of their browser.

CDN and Lazy Loading Setup

Setting Up a CDN

A Content Delivery Network (CDN) can significantly improve image delivery and enhance your Largest Contentful Paint (LCP) scores. Here’s how to get started:

1. Choose and Configure Your CDN

• Select a CDN provider that offers automatic image optimization.
• Enable origin pull to fetch images directly from your server.
• Map your custom domain to the CDN endpoints for seamless integration.

2. Optimize Images Automatically

Configure your CDN to handle image optimization by:

• Creating WebP or AVIF image variants.
• Compressing images based on the user’s device.
• Resizing images dynamically to match viewport dimensions.
• Caching optimized images at edge locations for faster delivery.

3. Set Up Cache Rules

• Set a cache TTL (Time To Live) of at least 30 days for static images.
• Use cache versioning to handle content updates effectively.
• Configure a cache purge system for updated content.

Performance Monitoring

Keep track of your CDN’s performance using these metrics:

These steps not only improve LCP but also enhance the overall user experience. Once your CDN is optimized, you can further reduce loading times by deferring off-screen images with lazy loading.

Configuring Lazy Loading

Lazy loading is an effective way to improve page load times and reduce Cumulative Layout Shift (CLS) by only loading images when they are needed.

Native Lazy Loading Example

Add the loading attribute to your <img> tags like this:

<img src="image.jpg" 
     loading="lazy" 
     width="800" 
     height="600" 
     alt="Description">

Implementation Tips

1. Set Image Dimensions: Always define width and height to prevent layout shifts.
2. Use Suitable Loading Types:
   • Use loading="eager" for critical, above-the-fold images.
   • Apply loading="lazy" for below-the-fold content.
3. Progressive Loading: Enable progressive loading for high-priority images.

Additional Optimization Tips

• Keep a loading buffer of approximately 1.5x the viewport height.
• Use lightweight placeholders, such as low-quality image placeholders (LQIP), for smoother transitions.
• Implement error handling to manage failed image loads gracefully.

Fallback for Browser Compatibility

For browsers that don’t support native lazy loading, include a fallback mechanism:

if ('loading' in HTMLImageElement.prototype) {
    // Native lazy loading is supported
} else {
    // Use a fallback library for lazy loading
}

Image Delivery Guidelines

Image Space Requirements

Always define explicit image dimensions to avoid layout shifts and ensure a stable page design. Here’s an example of proper HTML formatting:

<img src="product-image.jpg"
     width="800"
     height="600"
     alt="Product description"
     loading="lazy">

Aspect Ratio Tips

Maintaining consistent aspect ratios across devices is key. Follow these recommendations for common image types:

Image Size Standards

To ensure fast load times and high-quality visuals, match image dimensions to their display size.

Desktop vs. Mobile Dimensions

Resolution Guidelines

• Use 72 DPI for web images.
• For Retina displays, provide images at 2x resolution.
• Keep the total image file size under 25% of the page load size.

Alt Text and SEO

Descriptive alt text not only improves accessibility but also strengthens SEO. Here’s how to write effective alt text:

Best Practices for Alt Text

• Be clear and specific about the image content.
• Aim for a length of 50-125 characters.
• Include relevant keywords naturally, avoiding overuse.
• Do not use alt text for purely decorative images.

Example Alt Text Structure

<!-- Good Example: -->
<img src="red-nike-running-shoes.jpg"
     alt="Nike Air Zoom Pegasus 38 running shoes in university red, side view"
     width="800"
     height="600">

<!-- Poor Example: -->
<img src="shoes.jpg"
     alt="shoes nike red running shoes sneakers footwear athletic shoes"
     width="800"
     height="600">

Alt Text by Image Type

Summary

This guide focuses on strategies to improve your website’s performance and enhance Core Web Vitals, including metrics like LCP (Largest Contentful Paint), CLS (Cumulative Layout Shift), and FID (First Input Delay).

• Compression and Format Selection
  Switching to modern image formats like WebP and AVIF reduces file sizes compared to JPEG or PNG, which can directly improve LCP.
• Responsive Implementation
  Delivering device-specific images through responsive techniques minimizes data usage, boosting performance across devices.
• Performance Optimization Tools
  Combining a CDN with lazy loading, defined image dimensions, and optimized alt text ensures better layout stability and supports SEO efforts.
• Tracking Results
  These methods lead to noticeable improvements in Core Web Vitals. Regular monitoring and fine-tuning are critical for maintaining and enhancing long-term performance.

Related posts

• Ultimate Guide to Mobile Page Speed Optimization
• Core Web Vitals as a Ranking Factor Explained
• How To Test Core Web Vitals With Free Tools
• Core Web Vitals Metrics Explained: CLS, LCP, INP