Image Loading Optimization for Search Engine Optimization

The Importance of Image Loading for User Experience

The image loading speed is one of the core factors affecting the user experience. According to Google's research, for every additional second of page loading time, the user bounce rate may increase by 7%, and the conversion rate may decrease by about 20%. On mobile devices, delayed image loading can lead to layout shift (CLS), disrupting the visual smoothness. Moreover, if the loading of the first-screen image exceeds 2.5 seconds, it will directly affect the LCP (Largest Contentful Paint) indicator and reduce the page weight. High-quality and fast-loading images can enhance the credibility of the content and help users quickly understand the information (such as e-commerce product images). In contrast, poorly adapted images (such as those without reserved dimensions or with an overly large format) can cause layout confusion on mobile devices, significantly reducing user satisfaction. Optimizing image loading is not only a technical requirement but also a key strategy for improving user retention and conversion.

The Impact of Image Size on Core Web Vitals Metrics

• LCP (Largest Contentful Paint): Images are one of the main sources of LCP elements. It is necessary to ensure that the first-screen images are loaded within 2.5 seconds.
• CLS (Cumulative Layout Shift): When images without reserved dimensions are loaded, it will cause the page to jump. This problem can be eliminated by using the width/height attributes.
• FID (First Input Delay): Excessive image loading can block the main thread. It is recommended to control the priority of image resources within a reasonable range.

Basic Settings for Image Optimization

Image format selection (WebP/AVIF/JPEG/PNG)

Format	Compression Rate	Transparency Support	Browser Compatibility	Applicable Scenarios
WebP	★★★★☆	Supported	Modern browsers (over 92%)	Photos, complex graphics
AVIF	★★★★★	Supported	Chrome/Firefox	Scenarios where extreme compression is pursued
JPEG	★★★☆☆	Not supported	Fully compatible	Photos, images without transparency requirements
PNG	★★☆☆☆	Supported	Fully compatible	Icons, elements with transparent backgrounds

Image Compression Tools (TinyPNG/Squoosh)

• TinyPNG: Supports PNG/JPEG formats, has a high compression rate, and does not require installation. It can compress up to 20 images at a time, with a maximum size of 5MB.
• Squoosh: Supports WebP/AVIF/JPEG/PNG formats, allows for custom compression parameters, supports batch compression, and does not require installation.
• ZipPic: In addition to supporting WebP/AVIF/JPEG/PNG formats, it also supports the GIF format and WebP animations. It has a high compression rate, does not require installation, and supports batch compression. It is more powerful than TinyPNG and Squoosh.

Let's take the image of Super Mario as an example.

The size comparisons after processing with the above three compression tools are as follows:

Original Image Size	After Compression by TinyPNG	After Compression by Squoosh	After Compression by ZipPic
514KB	124KB	436KB	136KB

Image Loading Optimization Strategies

Lazy Loading

Lazy loading means loading image resources only when the images enter the visible area. This can reduce the first-screen loading time and improve the user experience. Common implementation methods of lazy loading include:

• IntersectionObserver API: Monitors whether an element enters the viewport and triggers the loading event.

const observer = new IntersectionObserver((entries) => {
  entries.forEach((entry) => {
    if (entry.isIntersecting) {
      const img = entry.target;
      img.src = img.dataset.src;
      observer.unobserve(img);
    }
  });
});

document.querySelectorAll("img").forEach((img) => {
  observer.observe(img);
});

• lazyload.js: A lightweight image lazy loading library that supports functions such as image preloading, placeholder images, and lazy loading events.

<script src="https://cdn.jsdelivr.net/npm/lazyload@2.0.0-beta.2/lazyload.min.js"></script>
<img class="lazy" data-src="image.jpg" src="placeholder.jpg" />
<script>
  new LazyLoad();
</script>

Preloading

Preloading means loading image resources into the browser cache in advance. When users need to view the images, they can directly obtain them from the cache, which speeds up the image display.

• Using the preload tag: In HTML, specify the resource to be preloaded through the rel="preload" attribute of the link tag, and at the same time, set the as attribute to specify that the resource type is an image.

<link rel="preload" href="important-image.jpg" as="image" />

• JavaScript preloading: Achieve preloading by creating an Image object and setting the src attribute.

const preloadImages = (imageUrls) => {
  imageUrls.forEach((url) => {
    const img = new Image();
    img.src = url;
  });
};

const imagesToPreload = ["image1.jpg", "image2.jpg", "image3.jpg"];

preloadImages(imagesToPreload);

Responsive Images

Provide appropriate sizes and resolutions of images according to the screen sizes, resolutions, and pixel densities of different devices to avoid loading overly large or small images and improve the loading efficiency.

• Using the srcset and sizes attributes: The srcset defines a set of image URLs and their corresponding width descriptors, and the sizes defines the width of the image to be selected under different screen widths.

<img
  src="default-image.jpg"
  srcset="small-image.jpg 480w, medium-image.jpg 800w, large-image.jpg 1200w"
  sizes="(max-width: 480px) 480px, (max-width: 800px) 800px, 1200px"
  alt="Responsive Image"
/>

• Using the <picture> element: Different image sources can be selected according to different conditions (such as media queries, support for image formats, etc.).

<picture>
  <source media="(min-width: 800px)" srcset="large-image.jpg" />
  <source media="(min-width: 480px)" srcset="medium-image.jpg" />
  <img src="small-image.jpg" alt="Responsive Image" />
</picture>

Optimizing Image Format and Compression

Selecting the appropriate image format and performing reasonable compression can reduce the file size while ensuring the image quality, thus speeding up the loading speed.

• Selecting the appropriate format: As mentioned earlier, WebP and AVIF formats have an advantage in compression rate and are well supported by modern browsers; JPEG is suitable for photo-like images; PNG is suitable for images with transparent backgrounds or simple graphics.
• Further compression: In addition to using tools such as TinyPNG and Squoosh, automated compression plugins can also be integrated during the build process to perform batch processing on images, ensuring that all images in the project are optimized.

By comprehensively applying the above image loading optimization strategies, the performance and user experience of websites or applications can be significantly improved. While increasing the page loading speed, it can also reduce the user bounce rate and increase user retention and conversion rates.