Skip to main content
.com domains from $2.99 — free WHOIS privacy on every name

Payload budget · Beginner · an hour, then seconds

How to optimize images for the web — Images: The Bytes Your LCP Is Waiting For

On most pages the largest contentful paint is a photograph, which makes image weight the single biggest lever you hold over the number you are judged on.

View Email Hosting plansBrowse more How-To Library

The short answer

Find the LCP element before you optimise anything, because on most pages it is one image and that single file is worth more than the other forty combined. PageSpeed Insights names it, and Chrome's Performance panel marks it on the timeline.

Then work in order: correct dimensions, then modern format, then compression, then loading behaviour. A 4000-pixel original in an 800-pixel slot is the most common and most expensive mistake, and no amount of clever compression rescues it. WebP conversion and delivery are handled by the LiteSpeed plugin here, and WebP optimisation is built in at no extra cost.

By the HostingFast team · Reviewed 24 August 2026

Beginner

Assumed level

Quick

Time for the backlog

5

Steps to done

24/7

Engineers on call

An hour for the historical backlog, then a few seconds per upload once the pipeline is in place. The bulk pass is usually the largest single weight saving available to a mature site.

Two of the four steps are free and permanent: exporting at display dimensions, and setting width and height attributes. Neither costs anything and both keep paying.

Identify the LCP element first

Largest contentful paint measures when the biggest visible element finishes rendering, and on a typical page that is the hero image or the first product photograph. PageSpeed Insights names the element outright; Chrome's Performance panel marks the LCP moment so you can see what it was waiting for. Until you know which file it is, image optimisation is a scattergun.

Then check what that file actually costs on the wire: the network panel, sorted by transferred size. The published threshold is 2.5 seconds for LCP at the 75th percentile of your visitors, and a two-megabyte hero on a mobile connection will not meet it however fast your server is.

Dimensions, then format, then quality

Dimensions first, because it is the largest and dumbest saving. An 800-pixel-wide slot needs an 800-pixel image, or 1600 for high-density screens — not the 4000 pixels your camera produced. Let the platform generate the size set and serve them through srcset and sizes so each device downloads only what it will display.

Then format. WebP matches photographic quality at a fraction of the bytes, and AVIF goes further where browsers accept it; the LiteSpeed plugin handles conversion and delivery, and WebP optimisation is included on every plan at no extra cost. Then quality: around 80 is visually indistinguishable from 100 on photographs at roughly half the payload.

The two attributes that stop layout shift

Cumulative layout shift is a separate metric with a published threshold of 0.1, and images are its most frequent cause: the browser does not know how tall the image will be, lays the text out without space for it, then reflows when it arrives. Setting width and height, or an aspect-ratio in CSS, lets the browser reserve the box in advance.

This costs nothing, has no downside, and is invisible until you measure it. It is also the fix most likely to be missing on a site somebody built by hand, because a theme's own templates usually get it right and hand-written markup usually does not.

Loading behaviour, above and below the fold

Everything below the opening viewport should carry loading=lazy so the browser defers it until the visitor scrolls. That is the easy half. The half people get wrong is applying lazy loading to the hero as well, which delays the very element LCP is measuring and makes the number worse rather than better.

Give the LCP image the opposite treatment: no lazy attribute, and fetchpriority=high so the browser fetches it ahead of other requests. A blanket lazy-load-everything plugin setting is one of the most common self-inflicted LCP regressions there is.

A performance-test needle sweeping hard to the right

The image pipeline included on our plans

Built-in WebP image optimisation comes at no extra cost on every plan, and the LiteSpeed plugin handles conversion and delivery through the server's own cache rather than through PHP on each request.

NVMe SSD storage behind that cache on every tier means the optimised files are served from fast disk, not fetched through a rendering layer.

  • The LCP element identified before anything is compressed
  • Published thresholds quoted for LCP and CLS
  • fetchpriority and lazy loading applied to the right elements
  • Support on the desk at any hour of the backlog

Why HostingFast

Standard on every plan

Target chosen by measurement

Optimise the LCP element first, because one identified file usually outweighs the whole rest of the page.

The right order

Dimensions, format, quality, loading behaviour — the sequence that puts the biggest saving first.

Two free fixes named

Correct export dimensions and width and height attributes cost nothing and keep paying on every page.

CLS covered too

Layout shift is a separate metric with its own threshold, and images are its most frequent cause.

The lazy-loading trap

Lazy-loading the hero delays the element LCP measures, which is the most common self-inflicted regression here.

Conversion handled for you

WebP optimisation is built into every plan, so the format step is a toggle rather than a build pipeline.

Quick Start

From order to online

  1. 1

    Name the LCP element and weigh it

    PageSpeed Insights identifies it; the network panel sorted by transferred size tells you what it costs. Write both down. Everything that follows is aimed at that one file first.

  2. 2

    Export to the slot, doubled for high-density screens

    An 800-pixel slot wants 800 or 1600 pixels, never 4000. Let the platform build the size set and serve it via srcset and sizes so each device downloads only what it renders.

  3. 3

    Convert to WebP and compress to around quality 80

    The LiteSpeed plugin handles conversion and delivery, and WebP optimisation is included at no extra cost. Quality 80 on photographs is visually indistinguishable from 100 at roughly half the bytes.

  4. 4

    Set the loading attributes correctly, per position

    The LCP image gets fetchpriority=high and no lazy attribute. Everything below the fold gets loading=lazy. Blanket settings that lazy-load the hero make your headline metric worse.

  5. 5

    Run the bulk pass, then confirm in the field

    One optimisation run converts years of accumulated uploads. Then watch the field data over the following weeks, because that is where the change either shows up or does not.

Built In

Loaded onto every plan

  • Built-in WebP image optimisation at no extra cost on every plan
  • LiteSpeed caching in the server, serving optimised assets from cache
  • NVMe SSD storage on every tier, not only the expensive ones
  • Disk allowances that hold a full size set: 10, 20 and 200 GB across the shared tiers
  • Full SSH access with Git and Composer for bulk processing over the CLI
  • Per-site PHP version switching from the control panel
  • Daily backups before you run a bulk media conversion
  • 99.9% uptime as the target, monitored around the clock
  • Money-back cover: 30 days on hosting plans, 7 on reseller
  • Human support on duty every hour of every day

Frequently Asked

What people ask us most often

Which image is my LCP element, and how do I find it?

PageSpeed Insights names it directly in the diagnostics for the run. Chrome's Performance panel is the other route: record a load, find the LCP marker on the timeline, and it points at the element. It will not always be the image you expected — a background image set in CSS, or a large block of text, can hold the title. Identify it before optimising, because the wrong file compressed perfectly changes nothing.

Does lazy-loading the hero image hurt LCP?

Yes, measurably. Lazy loading tells the browser to defer the fetch until the element approaches the viewport, which for an above-the-fold hero means deferring the very thing LCP is timing. Give it fetchpriority=high and no lazy attribute instead. This is why a blanket lazy-load-all-images setting frequently makes a site's headline metric worse while appearing to be an optimisation.

Do I still need srcset once the images are WebP?

Yes — they solve different problems. WebP reduces the bytes for a given set of pixels; srcset reduces the number of pixels sent to a device that cannot use them. A WebP file at 4000 pixels wide is still four thousand pixels of data going to a phone rendering it at four hundred. Use both: the size set handles dimensions, the format handles compression.

Can a bulk conversion break existing pages?

A well-behaved optimiser keeps the original filenames and either replaces the file in place or serves the modern format conditionally, so links and embeds keep working. The risks worth managing are the irreversible ones: take a backup before the run, and keep originals if the tool offers it, because a quality setting you later regret is not undoable from the compressed copy. Every plan takes a daily backup, and one immediately before the run costs you nothing.

Keep reading

Changing hosts? Run through our checklist first.

A straightforward sequence for a switch your visitors never feel: which files move first, how to shift email across without losing a single message, the right moment to repoint DNS, and the two mistakes behind almost all the downtime we get asked to rescue.

You'll get the checklist email, then occasional pointers on keeping a site running fast. Unsubscribe the moment you want out — the privacy policy covers the rest.

Serve fewer bytes without a build pipeline.

WebP optimisation built into every plan, LiteSpeed in front of NVMe, generous disk for a full size set, and support answering at any hour.

View Email Hosting plans