Image Optimization
Definition
Images are usually the heaviest thing a page carries — on a typical site they account for well over half the total transferred bytes, and a median page ships around a megabyte of them. Optimisation is four decisions taken in order: what pixel dimensions the image actually needs, which format suits its content, how hard to compress it, and which variant each visitor should receive. The first decision dominates the rest, because no encoder setting recovers what an oversized image wastes: a photograph served at 3000 pixels into a 600-pixel slot is carrying twenty-five times the data the layout can use. None of this is something a static host does for you — the files are optimised on your machine and uploaded finished.
Why It Matters
On most pages the Largest Contentful Paint element is an image, so its weight sets the number visitors feel. Cutting a hero from 900 KB to 180 KB removes roughly 1.2 seconds on a 4 Mbps connection, which is the difference between a page that feels immediate and one that does not. Multiply that across a gallery and the effect is larger still: a listing page of 38 MB and one of 2.4 MB contain the same photographs. There is a cost to the visitor too, since data on a metered mobile plan is their money, not yours.
How It Works
Work in this order. Resize to the largest size the image will genuinely display, which for a high-density screen means about twice the CSS width and no more. Strip EXIF and colour-profile cruft. Encode with the best format the audience supports, usually AVIF first, then WebP, with a JPEG or PNG fallback, and choose the quality by looking at the result at full size rather than by habit — JPEG around 75 to 85 and WebP around 70 to 80 are usually indistinguishable from the original. Provide two or three widths in a srcset with a matching sizes attribute so each device downloads only what it needs, and set width and height attributes so the layout does not jump. Tools that do all of this locally include Squoosh, sharp, ImageMagick, cwebp, avifenc, oxipng and pngquant.
Real-World Example
An estate agent publishes a property listing on 99helpers at flat-tour.99helpers.site with fourteen photographs straight from a camera, 38 MB in total. Resized to 1600 pixels and encoded as WebP at quality 75 they come to 2.4 MB, and the page goes from unusable on mobile data to loading in under two seconds. Because 99helpers serves exactly the files you upload and does not resize anything on request, the whole pass runs once on the laptop before publishing.
Common Mistakes
- ✕Compressing hard without resizing first — a 4000-pixel image at quality 60 is still four times the data of a 1600-pixel image at quality 80, and looks worse
- ✕Optimising once and forgetting — the next person to add a photograph uploads the camera original and quietly undoes the work
- ✕Chasing the newest format and skipping the fallback — a broken image is a worse outcome than a slightly larger one
- ✕Judging quality settings at a thumbnail size — artefacts that are invisible at 200 pixels are obvious when the image fills a laptop screen
Related Terms
Responsive Images
Responsive images means publishing the same picture at several sizes and letting the browser pick the one that fits. The srcset and sizes attributes are how you describe that choice in HTML.
WebP File
WebP is an image format from Google that handles lossy and lossless compression, transparency and animation in one file. At comparable visual quality it is typically 25 to 35 percent smaller than JPEG.
Lossy Compression
Lossy compression shrinks a file by permanently throwing information away. What comes back out is an approximation of the original, chosen so that the missing part is hard to notice.
Lazy Loading
Lazy loading defers fetching an image or iframe until the visitor is close to scrolling it into view, so only what is actually looked at gets downloaded. In a browser it is one attribute: loading set to lazy.
Largest Contentful Paint
Largest Contentful Paint, or LCP, marks the moment the biggest visible element in the viewport has finished rendering. It is the closest single number to the question a visitor actually asks: when did this page look like it had loaded?
Put a file online in seconds
Drop in a document, an image, a page or a whole static website and share the link — free, with no build step and no server to set up.
Host a file free →