Image optimisation for the web

If your website is slow and you're not getting a good LCP (Largest Contentful Paint) score in the PageSpeed Insights report, the problem is most likely images. Images are usually the heaviest part of any web page and sometimes account for more than 60% of the total page size. In this article, we provide a complete and practical process for image optimization; from choosing the right format to implementing lazy loading. This guide is useful for web designers, developers, and site managers working with WordPress or raw coding.

Why Does Image Optimization Directly Affect LCP?

LCP is one of the main Core Web Vitals metrics that measures the loading time of the largest visible element on the page. On most pages, this element is a hero image or the main article image. If this image is 2 megabytes, the browser must download, decode, and render it; this process can take several seconds and severely hurt your LCP.

According to statistics published by Google, 53% of mobile visits are abandoned if the page takes longer than 3 seconds to load. Image optimization not only improves user experience but is also a positive signal for Google ranking.

Three Main Factors That Determine Image LCP

• File size: The lighter the file, the faster the download.
• Download start time: If the image is loaded with lazy loading and is not in the viewport, the download start is delayed.
• Decode time: Modern formats like WebP decode faster than old JPEG.

Step One: Choosing the Right Format (WebP vs. JPEG and PNG)

The WebP format, developed by Google, is on average 25-35% smaller than JPEG with similar quality. For images with transparency, WebP is a much better replacement for PNG; a PNG image with transparency might be 1 megabyte, while the same image in WebP format will be less than 300 kilobytes.

Of course, WebP is not the only option. For simple images like logos or icons, SVG is the best choice because it's scalable and has a very small size. For complex photos, AVIF is also a newer option that compresses even better than WebP, but browser support for it is not yet complete.

How to Convert Images to WebP?

If you use WordPress, plugins like WebP Converter for Media or Smush can automatically convert images. But if you're coding, the best command-line tool is cwebp, which is installed with the libwebp library. Example:

# Install on Ubuntu/Debian
sudo apt install webp

# Convert a JPEG image to WebP with quality 80
cwebp -q 80 input.jpg -o output.webp

# Convert an entire folder in batch
for img in *.jpg; do cwebp -q 80 "$img" -o "${img%.jpg}.webp"; done

Important note: quality 80 is usually the best balance between size and visual quality. Quality higher than 90 significantly increases the size without a noticeable difference in display.

Common Mistake: Using WebP Without a Fallback

If the user's browser doesn't support WebP (like some older browsers), the image won't display. The standard solution is to use the <picture> tag:

<picture>
  <source srcset="image.webp" type="image/webp">
  <img src="image.jpg" alt="Image description" loading="lazy">
</picture>

Modern browsers will choose the WebP file, and older browsers will fall back to JPEG. This method is standard and fully SEO-compatible.

Step Two: Resizing Images to Actual Dimensions

One of the biggest mistakes is uploading a 4000-pixel image and displaying it in an 800-pixel frame. The browser has to download the entire large file and then downscale it. This wastes bandwidth and ruins LCP.

Before uploading, resize the image to exactly the size it will be displayed on the site. If you're not sure, use 2x images for display on Retina screens; meaning if the image is displayed at 400 pixels wide in CSS, save the file at 800 pixels wide.

Resizing Tools

• ImageMagick: The most powerful command-line tool. Example: convert input.jpg -resize 800x600 output.jpg
• Photoshop or GIMP: For manual resizing and quality control.
• Online services: Like Squoosh.app from Google, which both resizes and converts formats.

In WordPress, plugins like Smush or ShortPixel automatically fix image sizes during upload and generate different versions for responsive design.

Common Mistake: Forgetting width and height Attributes

If you don't specify the width and height attributes in the <img> tag, the browser first renders the page and then shifts the layout when the image downloads. This phenomenon, called CLS (Cumulative Layout Shift), is another Core Web Vitals metric and lowers your score. Always specify the dimensions:

<img src="image.webp" width="800" height="600" alt="Description">

Step Three: Implementing Lazy Loading

Lazy loading means that images outside the user's view (below the fold) are not loaded until the user scrolls to them. This focuses the browser's resources on important images (like the hero image) and improves LCP.

The simplest method is using the native loading="lazy" attribute, which was added in HTML5 and is supported by all modern browsers:

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

But a critical note: Never apply lazy loading to the hero image or any image at the top of the page. This image must load immediately for a good LCP. For the hero image, use loading="eager" and fetchpriority="high":

<img src="hero.webp" loading="eager" fetchpriority="high" width="1200" height="675" alt="Main image">

Advanced Method: Intersection Observer

If you need more control, you can use the Intersection Observer API. This method allows you to load the image before it enters the viewport (e.g., 200 pixels earlier) for a smoother user experience:

const images = document.querySelectorAll('img[data-src]');
const observer = new IntersectionObserver((entries) => {
  entries.forEach(entry => {
    if (entry.isIntersecting) {
      const img = entry.target;
      img.src = img.dataset.src;
      observer.unobserve(img);
    }
  });
}, { rootMargin: '200px' });

images.forEach(img => observer.observe(img));

In this method, you use data-src instead of src so the browser doesn't download the image from the start.

Common Mistake: Lazy Loading on All Images

Some developers apply lazy loading to all images for simplicity. This is wrong; the hero image must load immediately. If lazy loading is applied to the hero image, the browser may load it with a delay, and your LCP will get significantly worse. Always mark images above the fold with loading="eager".

Step Four: Compression Without Noticeable Quality Loss

Image compression is divided into two types: lossy (with quality loss) and lossless (without quality loss). For web photos, lossy compression with quality 70-85 usually gives the best results; the quality difference from the original is almost imperceptible, but the file size is reduced by 50-70%.

Popular compression tools:

• ImageOptim (Mac): Free and very effective.
• RIOT (Windows): Compression with live preview.
• TinyPNG / TinyJPG: Online service with API for automation.
• mozjpeg: A fork of JPEG that offers better compression.

Automation with gulp or webpack

If your project uses a build tool, you can automate compression. Example with gulp:

const gulp = require('gulp');
const imagemin = require('gulp-imagemin');
const webp = require('imagemin-webp');

gulp.task('images', () =>
  gulp.src('src/images/**/*')
    .pipe(imagemin([
      imagemin.mozjpeg({ quality: 80 }),
      imagemin.optipng({ optimizationLevel: 3 }),
      imagemin.webp({ quality: 80 })
    ]))
    .pipe(gulp.dest('dist/images'))
);

This ensures that every time you add an image, it's automatically optimized, so you don't have to worry about forgetting to compress.

Measuring the Impact of Image Optimization on LCP

After applying the changes, you need to measure the results. Use the following tools:

1. PageSpeed Insights: Detailed LCP report and specific recommendations.
2. Lighthouse in Chrome DevTools: For quick local testing.
3. WebPageTest: For deeper waterfall analysis and precise timing.

A real example: Suppose your hero image was previously a 1.8 MB JPEG and your LCP was 4.2 seconds. After converting to WebP at quality 80 and resizing to 1200 pixels, the size drops to 240 kilobytes. With this same change, LCP typically drops below 2.5 seconds, which is in the green range of Core Web Vitals.

Final Tip: CDN and Caching

Image optimization isn't limited to files. Using a CDN (Content Delivery Network) ensures images are delivered from the server closest to the user, significantly reducing download time. If your site is on shared hosting and has high traffic, moving to a cloud infrastructure with a CDN can have a dramatic impact on LCP. ServerNet, as a provider of cloud services and hosting, offers infrastructure with built-in CDN that can help in this regard.

Also, don't forget browser caching. By setting the Cache-Control header on images, the user's browser stores images for a long time, and on subsequent visits, no requests are sent to the server. This greatly improves LCP on repeat visits.

Summary

Image optimization is a multi-step process that, when done correctly, has a direct and measurable impact on LCP and overall site speed. Summary of actions:

• Convert images to WebP format and provide a fallback.
• Reduce image dimensions to actual display size.
• Use lazy loading only for images below the fold.
• Apply lossy compression with quality 70-85.
• Specify dimensions in the img tag to prevent CLS.
• Review and optimize results with measurement tools.

By implementing these steps, not only will your LCP improve, but you'll also provide a better user experience and increase your chances of ranking higher in search results. Image optimization is one of the most cost-effective and impactful things you can do for your website.