Paste a URL and we scan every image on the page for the things that slow it down: outdated formats, oversized files, missing lazy-loading and layout shift. You get a score and a prioritised fix list.
Slow-loading images hurt Core Web Vitals, rankings and conversions. JW Digital rebuilds sites to be fast by default, or tunes your existing one for performance.
On most websites, images are the single heaviest thing the browser has to download. Text, CSS and even JavaScript are usually small by comparison, so image optimisation for website speed is often the fastest, highest-impact win available to you. When a page feels slow, an oversized hero photo or a gallery of full-resolution product shots is very frequently the culprit.
This matters beyond a general sense of speed. Google measures a metric called Largest Contentful Paint (LCP), which is the moment the biggest visible element finishes rendering. On the majority of pages, that biggest element is an image, so a heavy hero directly drags down your LCP score. Because Core Web Vitals feed into how Google assesses page experience, images are not just a performance concern, they are an SEO concern. Getting Core Web Vitals images under control is one of the most reliable ways to improve both.
The audit above flags four common problems: outdated formats, oversized files, missing lazy-loading and missing dimensions. This guide explains how to actually fix each one, so you leave with a plan rather than just a list.
The term next-gen image formats refers mostly to WebP and AVIF, which pack the same visual quality into far fewer bytes than the older formats. Choosing the right format is the foundation, because no amount of compression rescues the wrong one. Here is the honest comparison of webp vs jpeg vs avif, plus where the legacy formats still belong.
A practical rule of thumb: photos go to WebP or AVIF, logos and icons go to SVG, and JPEG, PNG and GIF get retired unless you have a specific reason to keep them.
This audit diagnoses problems, it does not convert anything for you, and that is deliberate. The good news is that free tools do the job beautifully. Squoosh is a browser-based image optimizer from the Google Chrome team: drop in a JPEG or PNG, pick WebP or AVIF, and drag the quality slider while watching a live before-and-after preview. It runs entirely in your browser, so nothing is uploaded anywhere. TinyPNG is the faster route for bulk work, handling many files at once and doing a smart job of shrinking PNG and JPEG while keeping quality high. Use Squoosh when you want fine control over a single important image, and TinyPNG when you need to compress images for web in batches.
Lossless compression shrinks the file while keeping every pixel identical to the original. It is the right choice for logos, diagrams and anything with crisp text or flat colour, where artefacts would be obvious. Lossy compression throws away detail your eye is unlikely to notice, which is how it achieves much smaller files. For photographs, lossy is almost always the correct choice, and the trick is finding the point where quality still looks perfect but the file is as small as possible. In Squoosh, this usually sits somewhere around 60-75 on the quality slider for photos, but trust your eyes rather than a fixed number. Zoom in, check faces and fine detail, and back off only if you see the image start to break down.
Compression alone will not save you if the image is simply too big in pixel dimensions. A common and costly mistake is uploading a 4000-pixel-wide photo straight from a camera or stock library and displaying it in a slot that is only 800 pixels wide. The browser downloads all those wasted pixels and then throws most of them away. Always resize an image down to roughly the largest size it will ever be shown before you compress it.
Better still, serve a different size to different devices. Responsive images srcset is the mechanism that makes this possible. Using the srcset and sizes attributes, you provide several versions of the same image at different widths, and the browser picks the smallest one that still looks sharp on that particular screen. A phone might load a 480-pixel version while a desktop loads a 1200-pixel version, from the same markup.
If your site runs on a modern framework or a platform like WordPress, this is often handled for you: Next.js and the WordPress media library both generate multiple sizes and write the srcset automatically. It is worth checking that your theme or build is actually taking advantage of it, because plenty do not.
Lazy loading images tells the browser not to download an image until the user is about to scroll it into view. For a long page with images far down the layout, this saves a lot of upfront bandwidth and speeds up the initial render. In modern HTML you get it with a single attribute, loading="lazy", on the image tag, with no JavaScript library required.
There is one critical exception, and it catches people out constantly. Do not lazy-load your hero image or anything else visible above the fold. If you lazy-load the image that is your LCP element, you deliberately delay the very thing Google is timing, which makes your Largest Contentful Paint worse rather than better. The rule is simple: the main above-fold image loads eagerly, and often benefits from a fetchpriority="high" hint, while everything below the fold gets loading="lazy".
When an image has no dimensions declared in the HTML, the browser does not know how much space to reserve for it. So it renders the surrounding text first, then the image arrives and shoves everything down the page. That jump is called layout shift, and it is exactly what the image dimensions layout shift warning in the audit is pointing at. It is measured by Cumulative Layout Shift (CLS), another Core Web Vital, and it is genuinely annoying for users who lose their place or tap the wrong thing.
The fix is refreshingly cheap. Add the real width and height attributes to every image tag. The browser uses that ratio to reserve the correct space before the file has even downloaded, so nothing jumps when it lands. You still control the displayed size with CSS, but the attributes give the browser the aspect ratio it needs. This one habit eliminates most image-driven layout shift on its own.
Pull the threads together and the picture is clear. Modern formats and honest compression cut file size, which improves LCP. Resizing and responsive images stop you shipping pixels no device will use. Correct lazy-loading protects the above-fold image while trimming everything below it. Declared dimensions keep CLS low. Each of these maps directly onto a Core Web Vital, and Core Web Vitals are part of how Google judges page experience.
A quick reality check: fixing images will not, on its own, vault a weak page to the top of Google, and anyone promising that is not being straight with you. What it does reliably do is remove a common technical drag on rankings, improve the experience for real visitors, and lift conversion, because faster pages keep more people around. It is foundational work that makes everything else you do in SEO land more effectively.
If you would rather not audit, convert and re-code every image by hand, this is the sort of work we handle as part of our performance optimisation service, from next-gen formats and responsive sizing through to CDN delivery and Core Web Vitals. And if your site is fighting you at every turn, a fresh build on a fast foundation through our bespoke website design often solves the problem at the root rather than patching it. Either way, run the audit above first, fix what you can with Squoosh and TinyPNG, and you will already be ahead of most of your competitors.