Updated 2 November 2026. First published in 2020.
Images are the essence of a modern website. Without them, it's hard to make a lasting impression on your visitors.
Images help businesses engage their visitors and keep them on the page. However, they're also one of the most common reasons a website feels slow. Heavy images push up loading times, and slow pages cost you rankings, visitors and sales.
Most websites still have work to do. Only 48% of mobile sites pass all three of Google's Core Web Vitals, according to the HTTP Archive Web Almanac 2025. Loading speed is the weakest of the three, and on 68% of mobile pages, the largest element Google measures for it is an image.
Fewer than half of mobile sites pass Core Web Vitals
Share of mobile websites with a good score, 2025
Source: HTTP Archive Web Almanac 2025, performance chapter, July 2025 data.
So how do you show stunning, high-quality images without slowing your website down? This guide covers the steps website owners, SEO teams, developers and online shops can take, from optimising single images to speeding up large websites with thousands of pages.
Post summary
What's changed in Google's Core Web Vitals
Why optimising images matters
How to optimise images for faster loading
Page speed on WordPress, Squarespace and Shopify
Page speed for enterprise and large websites
How to find image issues on your website
What's changed since we first wrote this guide
Google measures page experience with three Core Web Vitals. On 12 March 2024, Interaction to Next Paint (INP) replaced First Input Delay (FID). INP measures how quickly a page responds to every click, tap and keystroke, not just the first one, which makes it a much tougher test.
Images affect all three metrics, as the table shows. Google rates a page as good when it meets these thresholds for at least 75% of visits.
| Core Web Vital | What it measures | Good | How images affect it |
|---|---|---|---|
| Largest Contentful Paint (LCP) | How long the main content takes to appear | 2.5 seconds or less | The largest element is usually a hero or product image, so its size and loading order matter most. |
| Interaction to Next Paint (INP) | How quickly the page responds to clicks, taps and typing | 200 milliseconds or less | Image sliders, galleries and heavy scripts that decode large images can delay responses. |
| Cumulative Layout Shift (CLS) | How much the page jumps around as it loads | 0.1 or less | Images without a set width and height push content down when they load. |
Why optimising images matters
Optimising images for the web has many benefits that most website owners overlook. Here are four reasons it's worth the effort.
1. A lighter website
Heavy images take up more space on your server and need more bandwidth to deliver. That might not be a problem on a generous hosting plan, however it pushes up your hosting and delivery costs. Optimised images reduce both and load faster, even on slow mobile connections.
2. Faster pages
Lighter pages take less time to load all their assets, so visitors can see and use the page sooner. That matters, because most visits now happen on phones. Mobile devices accounted for 59.9% of web traffic worldwide in October 2026, according to StatCounter.
3. SEO benefits
Google states that "Core Web Vitals are used by our ranking systems." Speed won't make up for weak content. However, when two pages are equally relevant, the faster one has the edge, and a fast site is easier for search engines to crawl. Page speed sits alongside SEO and user experience as part of the same job.
4. More sales and enquiries
Visitors stay longer on pages that load quickly and work smoothly, and small gains add up. In a study by Deloitte for Google, covering 37 European and American brands, a 0.1-second faster mobile site lifted retail conversions by 8.4% and travel conversions by 10.1%. For lead generation sites, progress to the enquiry form rose by 21.6%.
How to optimise images for faster loading
You can use these techniques one at a time or all together, depending on how fast you need your website to be.
1. Choose the right file format
When we first wrote this guide, the debate was mostly JPEG vs PNG. Today, modern formats such as WebP and AVIF give you much smaller files at the same visual quality, and every major browser supports them.
| Format | Best for | Good to know |
|---|---|---|
| AVIF | Photos and product images | Usually the smallest files for photos. Can be slower to create, so it suits sites that convert images automatically. |
| WebP | Photos and graphics | Much smaller than JPEG and PNG, and supports transparency. A safe default for most websites. |
| JPEG | Photos, as a fallback | Still widely used. Compress it before uploading. |
| PNG | Graphics that need transparency or sharp edges | Lossless, so files are large. Avoid it for photos. |
| SVG | Logos, icons and simple illustrations | Made of code rather than pixels, so it stays sharp at any size with a tiny file. |
| GIF | Very short, simple animations | Animated GIFs get heavy fast. A short MP4 or WebM video is usually far smaller. |
2. Resize images before you upload them
When we talk about resizing, we mean changing the image file itself, not just shrinking it on the page with HTML or CSS.
Say you want to use a 3,800 x 5,000 pixel photo as a 300 x 300 pixel product thumbnail. If you upload the full image and set its size in the code, every visitor still downloads the large file. Resize it first and you cut loading time, bandwidth and storage.
The same goes for redesigns. Images sized for an old design are rarely the right size for a new one. If your old banner was 1,600 x 1,800 pixels and the new layout only has room for 800 x 1,000, resize it and save the extra weight.
Many people assume bigger is always better. However, few layouts need images wider than around 2,000 pixels. Use responsive images (the srcset and sizes attributes) so phones get a smaller version and large screens get a bigger one.
3. Compress without losing quality
Businesses that sell highly visual products are often reluctant to compress their images, worried they'll look poor. However, compressing correctly makes a big difference to file size with little or no visible change.
Drop the quality from 100% to 0% and the image will look grainy and pixelated. Reduce it slightly, however, and in our experience most visitors won't see any difference, while the file loads much faster.
4. Understand lossy and lossless compression
Lossy compression removes some of the image data for good. Done well, visitors won't notice, and the file is much smaller. It suits photos in JPEG, WebP and AVIF.
Lossless compression keeps all the image data, so the quality is identical. The savings are smaller, which makes it best for graphics, screenshots and images with text.
5. Use image optimisation tools
There are plenty of free and paid tools for optimising images. Which you choose depends on how many images you have and how you work.
Squoosh, Google's free browser tool for comparing formats and quality side by side
TinyPNG for quick compression of PNG, JPEG and WebP files
JPEGmini for shrinking photos in batches on Mac or Windows
ImageOptim for batch compression on a Mac
OptiPNG, a free command-line tool for lossless PNG compression
Adobe Photoshop or Affinity, now free from Canva, to export images for the web
Image plugins and apps for your website platform, which compress and convert images as you upload them
6. Load the most important image first
Lazy loading delays images further down the page until the visitor scrolls towards them, so the top of the page loads faster. Modern browsers support it natively with loading="lazy".
However, never lazy-load the main image at the top of the page. It's usually the element that decides your LCP score. Instead, give it fetchpriority="high" so the browser downloads it first. Always set a width and height on your images too, so the page doesn't jump around as they load.
7. Use a CDN and browser caching
A content delivery network (CDN) stores copies of your images on servers around the world, so visitors in New York and Stockholm both get them from somewhere nearby. Browser caching saves images on the visitor's device, so they load instantly on the next page or visit.
Page speed on WordPress, Squarespace and Shopify
We build and optimise websites on all three platforms. James looks after our WordPress builds, Kairi designs and builds on Squarespace and Shopify, and I handle the SEO side. Each platform needs a different approach.
WordPress
WordPress gives you the most control, and the most ways to slow a site down. Only 45% of WordPress sites pass all three Core Web Vitals on mobile, according to the Web Almanac 2025.
WordPress itself now handles a lot of this for you.
WebP since version 5.8. You can upload WebP files directly, which are much lighter than JPEG and PNG.
Automatic image priority since version 6.3. WordPress adds fetchpriority="high" to the image it expects to be your LCP image, so browsers load it first.
AVIF since version 6.5. According to WordPress, AVIF images can be up to 50% smaller than JPEGs at the same quality.
So when a WordPress site is slow, the cause is usually hosting, the theme or plugins. Here's where James looks first.
Hosting. WebP and AVIF uploads fail if your server lacks the right image library (GD or ImageMagick). Check under Tools, then Site Health, then Info and Media Handling to see which formats your host supports. A slow time to first byte (TTFB) usually means page caching is missing, and a current, supported PHP version helps too.
Themes. Heavy "do-everything" themes and page builders can block the page from rendering, or skip creating responsive image sizes. Check that your theme sets a width and height on images, so the layout doesn't shift as they load.
Plugins. Bloated or conflicting plugins load extra JavaScript and can even override WordPress's automatic image priority. Deactivate the ones you don't use, and let a dedicated plugin such as Modern Image Formats, from the WordPress Performance Team, convert new uploads to AVIF or WebP.
Squarespace
Squarespace handles hosting, its CDN and much of the image processing for you, so there's less to configure and less to break. In return, you have less control over the code. The biggest wins come from uploading images at a sensible size, keeping custom code blocks and third-party embeds to a minimum and limiting the number of fonts. Kairi builds our Squarespace websites this way from the start.
Shopify
Shopify serves AVIF or WebP automatically where a browser supports them, which takes care of formats. The usual problem is apps. Every app can add its own scripts, and a store with dozens of them can struggle with INP. Review your apps regularly, remove the ones you don't use and choose a well-built theme. Our Shopify development team checks this on every store, and there's more on product photos in our guide to how product images increase sales conversions.
Page speed for enterprise and large websites
On a large website, page speed is a technical SEO project rather than a one-off fix. Pages are built from templates, so one slow template can drag down thousands of URLs. The good news is that fixing it improves them all at once.
Fix templates, not pages. Group your URLs by template, such as product, category and article pages, and fix the slowest group first.
Audit third-party scripts. Tag managers, chat widgets, testing tools and tracking pixels often do more damage to INP than images do.
Set a performance budget. Agree limits on page weight and image sizes, so new campaigns and features don't quietly slow the site again.
Use real-user data. Search Console's Core Web Vitals report groups similar URLs and shows how real visitors experience your site.
Protect speed during migrations. A new platform or design is the easiest time to lose performance, and rankings with it. Plan for it as part of your website migration.
Speed work also needs SEO and development teams working together. It's one of the clearest ways to show a return on enterprise SEO, because faster pages help rankings, user experience and conversions at the same time.
How to find image issues on your website
Several free tools test your website for image and speed problems.
Google PageSpeed Insights shows real-user Core Web Vitals data for your page alongside lab tests, and flags images that are too large or in older formats.
Lighthouse, built into Chrome's developer tools, runs the same lab tests while you build.
Google Search Console shows which groups of pages pass or fail Core Web Vitals across your whole site.
ImageKit's website analyzer is still my favourite for images. Enter any URL and it checks image sizing, lazy loading and modern formats, with separate scores for desktop and mobile.
You may be surprised how different your desktop and mobile scores are. Pay attention to both, especially mobile.
Need a faster website?
We speed up websites as part of our technical SEO work, from single image fixes to template-wide improvements on large sites. Our SEO team finds what's slowing you down, and our developers fix it on WordPress, Squarespace or Shopify.
-
Core Web Vitals are Google's three measures of page experience. Largest Contentful Paint measures loading speed (good is 2.5 seconds or less), Interaction to Next Paint measures responsiveness (200 milliseconds or less) and Cumulative Layout Shift measures visual stability (0.1 or less). INP replaced First Input Delay in March 2024.
-
Yes. Google says Core Web Vitals are used by its ranking systems, although relevant, helpful content still matters more. Speed also affects how long visitors stay and whether they buy, so it improves your results even when rankings don't move.
-
For most photos, WebP or AVIF. Both give much smaller files than JPEG at the same quality. Use SVG for logos and icons, PNG only for graphics that need lossless quality, and short videos instead of animated GIFs.
-
Squarespace and Shopify handle hosting, image formats and caching for you, so they're quicker to get right out of the box. WordPress can be just as fast, however it depends on your hosting, theme and plugins, and only 45% of WordPress sites pass Core Web Vitals on mobile. The build matters more than the platform.
