Image Optimization Basics: Formats, Sizing, and Lazy Loading Done Right

On most websites, images are the single heaviest thing on the page, which makes them the single biggest speed opportunity. A page can have perfect code and a fast host and still crawl because it is loading enormous, unoptimised images, and conversely, getting images right is often the fastest way to turn a slow page quick. The good news is that image optimization is not arcane: it comes down to a few basics done correctly, the format, the size, and how and when images load. Get those right and you remove most of the weight dragging your page down. Here are the fundamentals every marketing site should have in place, and why each one matters for both speed and conversion.

Why Images Are the Usual Culprit

It helps to understand why images dominate page weight, because it explains where the wins are. Text is tiny, code is usually modest, but images are heavy by nature, and modern sites use a lot of them, often at far higher resolution than they are actually displayed at. A hero image alone can outweigh the entire rest of a page, and a gallery or a long page full of visuals compounds the problem fast. Because images are such a large share of the weight, optimising them delivers a larger speed gain than almost anything else you can do, which is why it is the first place to look when a page is slow. This is the practical front line of treating speed as a revenue problem: the heaviest thing on the page is usually the most fixable, and fixing it moves the numbers most.

Get the Format Right

The first basic is using the right image format, because format alone can cut weight dramatically at the same visual quality. Older formats are heavier than they need to be, while modern formats compress far better, delivering the same image at a fraction of the size. The practical rule is to serve images in an efficient modern format wherever supported, falling back gracefully where it is not, so every visitor gets the lightest version their browser can handle. Choosing the right format for the kind of image matters too: photographs and flat graphics compress best in different ways, and using the format suited to the content squeezes out more weight. This is unglamorous and high-impact, because the same picture at half the size loads twice as fast for free, with no visible quality loss. Format is the cheapest win in the whole exercise.

Size Images to How They Are Actually Displayed

The most common and costly image mistake is serving an image far larger than it is ever shown at. A picture displayed in a small space but delivered at full camera resolution forces the visitor to download enormous data to render a modest area, which is pure waste. The fix is to size images to their actual display size, and to serve appropriately smaller versions to smaller screens rather than shipping one giant image to everyone. A phone showing an image in a narrow column should not be downloading the same massive file a large desktop display uses, so responsive sizing, delivering the right dimensions for the device, is one of the biggest weight savings available. This matters especially on mobile, where both the screens and often the connections are smaller, and where a lot of traffic lives, so the mobile experience suffers most from oversized images. Match the file to the frame, and you stop shipping pixels nobody sees.

Compress Without Wrecking Quality

Beyond format and dimensions, compression squeezes out remaining weight by reducing the data used to store the image, and the art is doing it without visible degradation. Most images can be compressed substantially before any quality loss is noticeable to a human eye, so there is usually a large free saving available between an uncompressed file and the point where compression starts to show. The goal is to find that sweet spot: as small as possible while still looking clean. Over-compressing to the point of visible artefacts is a false economy, because a page that loads fast but looks cheap undermines the trust you are trying to build, but under-compressing leaves easy weight on the table. Sensible compression, tuned to keep quality high, is the third leg of getting each individual image as light as it can be without anyone noticing the difference except the load time.

Load Lazily, But Not the Important Ones

Once each image is as light as it can be, the next lever is when they load, and this is where lazy loading comes in. Lazy loading defers images that are not immediately visible, so the browser only loads them as the visitor scrolls toward them, rather than downloading the entire page’s images up front. This makes the initial load much faster, because the page only fetches what is actually on screen to begin with. The crucial exception is the images that are visible immediately, especially the main hero image, which should load eagerly and fast, because it is often the largest element the visitor waits for and deferring it hurts the very first impression. So the rule is nuanced: lazy-load the below-the-fold images to speed the initial paint, but prioritise the above-the-fold ones, particularly the hero, so the first view appears instantly. Deferring the right images and rushing the right images is what makes a long, image-heavy page still feel fast.

Watch Out for Layout Shift

An image optimization discussion is incomplete without the layout-shift trap, because how images load affects not just speed but stability. If an image loads without its dimensions reserved in advance, the page content jumps as the image pops in, shoving text and buttons around just as the visitor tries to read or tap them, which is jarring and can cause misclicks. This is a Core Web Vitals problem as much as a comfort one, and the fix is straightforward: always reserve the correct space for an image before it loads, so the layout stays stable as images arrive. Getting this right is part of keeping a page from jumping around as it loads, and it pairs naturally with image work because images are a leading cause of the jumps. Fast and stable go together: an image that loads quickly but shoves the page around has traded one problem for another.

Serve Images From the Right Place

Getting each image light is most of the work, and where the image is served from is the quieter other half. An image, however well optimised, still has to travel from a server to the visitor, and if that server is far away or slow, the file arrives slowly no matter how small it is. This is what a content delivery network solves: it keeps copies of your images close to visitors geographically, so the file has a short trip rather than a long one, which matters especially for an audience spread across regions. Alongside delivery, caching ensures that a returning visitor, or a visitor moving between your pages, does not re-download the same images every time, because the browser holds onto them. Both of these are set-up-once wins that keep paying off: a good delivery-and-caching layer means your already-light images also arrive quickly and do not get needlessly re-fetched, which compounds the speed gains from format, sizing, and compression. It is the difference between a small file that still takes a moment to arrive and a small file that appears almost instantly, and for a site serving many images to many people, that difference adds up across every visit.

How to Audit the Images You Already Have

Most of this advice is easiest to apply to new images, but the weight dragging your site down right now lives in the images already on it, so a one-time audit of what you have is worth doing. The approach is straightforward: look at your key pages and find the heaviest images, because a small number of oversized files usually account for most of the excess weight, and fixing those few delivers most of the gain. Check whether your largest images are in an efficient format, whether they are being served far larger than they display, especially the hero and any prominent visuals, and whether anything below the fold is loading eagerly when it could wait. You will typically find a handful of genuine offenders, an enormous uncompressed hero, a background image at full camera resolution, a gallery shipping desktop-sized files to phones, and fixing just those moves the needle immediately. This kind of targeted audit, fixing the worst offenders first rather than perfecting every image, is the fastest path from a heavy existing page to a light one, and it pairs naturally with the broader speed pre-check you would run before any period of higher traffic. Start with the heaviest files, because that is where the wasted weight is concentrated.

Do Not Let It Decay

Image optimization is not a one-time task, because new images get added all year, often by people uploading whatever they have without compressing or sizing it, so a site that was optimised at launch quietly bloats again as fresh oversized images accumulate. The durable fix is to build image discipline into how content gets added: a simple standard for sizing and compressing images before they go up, and a periodic check that catches oversized files that slipped through. This is exactly the kind of thing a light recurring health check should include, because image weight is one of the most common ways a fast site slowly becomes slow. Keeping images optimised is less about a heroic cleanup and more about a standard that stops the bloat from rebuilding, so the speed you win stays won.

Do Not Sacrifice the Right Images

A word of balance, because image optimization taken too far becomes its own mistake. Images are not just weight to be minimised, they do real work: they build trust, convey quality, show the product, and make a page feel premium rather than cheap. So the goal is not to strip images out or compress them until they look poor, it is to deliver the images you genuinely need at the lightest weight that keeps them looking good. A page that loads instantly because it gutted its visuals or crushed them into artefacts has traded one conversion problem, slowness, for another, looking untrustworthy or low-quality, which is a bad trade for a brand that depends on looking credible. The skill is holding both goals at once: keep the images that earn their place, present them beautifully, and make them as light as they can be without visible compromise. Fast and good-looking is the target, not fast at the expense of good-looking, because the whole point of a quick page is to convert better, and a page that loads fast but looks cheap converts worse. Optimise ruthlessly on weight, and protect the quality that makes the images worth having.

The Payoff

Image optimization is the highest-return performance work most sites are not fully doing, because images are the heaviest part of the page and the most fixable. Get the format right to cut weight for free, size images to how they are actually displayed so you stop shipping unseen pixels, compress sensibly to squeeze out the rest, load lazily below the fold while prioritising the hero, reserve space to prevent layout shift, and build a standard so it does not decay. Do those basics and a page bogged down by its own visuals turns genuinely fast, which every visitor feels and which search engines reward. Images are the low-hanging fruit of web performance, and picking that fruit is one of the simplest ways to make a site quicker without touching anything else. If you do only one performance thing this quarter, sort out your images, because no other single change reliably returns as much speed for as little effort on most sites.

If you want your images optimised so your site loads fast and stays that way, that is exactly the kind of work we do.