Guide
How to optimise images for the web
To optimise images, resize them to the size they are actually displayed, choose a modern format such as WebP or JPEG, compress them, add descriptive alt text and lazy load the ones below the fold. Do this and a page can often shrink dramatically, with faster loading, better Core Web Vitals and no visible difference to visitors.
The process
Five steps for every image
Crop and resize
Make the image no wider than the largest size it will show, allowing for sharp displays at about twice that.
Pick the right format
JPEG or WebP for photographs, PNG or SVG for logos and graphics.
Compress
Use a tool to remove invisible data and lower quality slightly, until the difference is not noticeable.
Name it and describe it
Use a clear file name and meaningful alt text.
Load it wisely
Set width and height, lazy load images below the fold, and do not lazy load the main image.
Why
Images are usually the heaviest part of a page
On most small business sites, images account for more of the page weight than everything else combined. A single photograph straight from a phone camera can be several megabytes, far larger than the whole of the rest of the page. Uploaded unchanged, it forces every visitor to download all of it, even when it is shown in a small box.
That costs you in several ways. Pages load slowly, particularly on mobile data. The main image is often the Largest Contentful Paint element, so heavy images directly hurt Core Web Vitals. And large files use more of your bandwidth and disk space.
The good news is that image optimisation is the easiest big win in speed work. It needs no coding, and the result is permanent for each file.
Formats
Which image format to use
| Format | Best for | Strengths | Weaknesses |
|---|---|---|---|
| JPEG | Photographs | Small files, works everywhere | No transparency, loses detail when over-compressed |
| PNG | Logos, screenshots, transparency | Sharp edges, lossless | Large for photographs |
| WebP | Photographs and graphics | Smaller than JPEG and PNG, supports transparency | Very old software may not display it |
| AVIF | Photographs | Often smaller still than WebP | Slower to create, less universal tooling |
| SVG | Icons, logos, simple illustrations | Tiny, sharp at any size | Not suitable for photographs |
| GIF | Very short simple animations | Universal | Large and low quality, use video instead |
Hosting that serves images fast
LiteSpeed web server and UK servers in London on every plan.
Size
Resizing: the most common mistake
Dimensions matter more than compression. If your content column is 800 pixels wide, a 4,000 pixel photograph squeezed into it by the browser wastes about twenty-five times the pixels. Resize before uploading so the file matches the biggest size at which it will display. For sharp results on high resolution phone screens, allow up to twice the displayed width, but rarely more.
WordPress and many site builders make several sizes of every upload and choose the best one for each screen using the srcset attribute. This helps, but it starts from your original, so a sensible original still matters. A 1,600 or 2,000 pixel wide image is plenty for almost any full-width banner.
Do not rely on CSS to shrink images. Setting a width of 300 pixels on a 3,000 pixel file looks right, but the whole file is still downloaded.
Compression
Compression options
Lossy
Discards detail the eye barely notices. JPEG and WebP at around 75 to 85 percent quality are usually indistinguishable from the original and far smaller.
Lossless
Reduces size without changing a pixel, by tidying how the data is stored. Savings are smaller but quality is untouched.
Metadata removal
Camera files carry location, device and other details. Stripping them saves space and avoids sharing information you did not intend.
Desktop tools
Free image editors and apps can export at a chosen size and quality in seconds.
Online tools
Browser-based compressors work without installing anything. Avoid uploading private images to unknown sites.
Plugins
WordPress plugins can compress new uploads automatically and convert them to WebP.
Loading
Lazy loading, done right
Lazy load these
- Images far down the page
- Gallery thumbnails
- Images in tabs and sliders
- Embedded videos and maps
- Footer images
Do not lazy load these
- The main hero image
- Anything visible when the page opens
- The logo in the header
- The first product photo
- Images that are the LCP element
Search
Alt text, file names and image SEO
Alt text describes an image for people who cannot see it, such as screen reader users, and for search engines. Write what the image shows in a short, natural phrase, for example "Baker pulling sourdough loaves from an oven in a Leeds bakery". Do not stuff keywords, and leave the alt empty for purely decorative images so assistive software skips them.
Use a meaningful file name such as sourdough-loaves-leeds.jpg rather than IMG_4021.jpg. Put images near relevant text, and consider an image sitemap for sites where pictures matter to search. Always give images width and height attributes, so the browser reserves the right space and the page does not jump while loading, which protects your layout stability score.
Checklist
Before you upload an image
- Cropped to what matters
- Resized to the display size
- Right format chosen
- Compressed with a visible quality check
- Descriptive file name
- Meaningful alt text written
- Width and height set
- Lazy loading applied only below the fold
Existing sites
Fixing a site that already has heavy images
Run a speed test and note which images are flagged as too large. Start with the biggest. For WordPress, a bulk optimisation plugin can compress and convert existing uploads in the background. Take a backup first, in case you wish to return to the originals.
Check afterwards that the images still look right on phone and desktop, and that nothing has broken, such as older images not appearing because of a format change. Then retest, following our guide to testing website speed. If you want a broader plan, see how to speed up a WordPress site.
Worked example
A worked example: one photograph, three outcomes
Take a photograph from a phone, 4,032 by 3,024 pixels, around 4 MB. Placed straight into a page where it appears 800 pixels wide, a visitor downloads all 4 MB to see a picture the size of a postcard. Resize it to 1,600 pixels wide, enough for sharp display on a high resolution phone, and it falls to a few hundred kilobytes before any compression.
Now export it as WebP or JPEG at a quality of around 80 percent. Typically the file drops to well under 200 KB with no visible change at normal viewing size. Multiply that saving by every image on the page and a gallery that once took many seconds to load on mobile data can appear almost at once.
The exact figures depend on the picture, because detailed images compress less than plain ones. Always look at the result at the size visitors will see before you publish it.
Responsive images
Serving the right size to each screen
A phone needs a much smaller picture than a large desktop monitor. The srcset and sizes attributes let a page offer the browser several versions of the same image, so it downloads the smallest one that still looks sharp. WordPress adds these automatically for images in the media library, which is one more reason to upload sensible originals and use the built-in image blocks rather than pasting raw code.
Check the result in your browser's network tab on a phone-sized window. If a small screen is still downloading the largest file, something in the theme or builder is bypassing the responsive set, and it is worth fixing.
FAQ
Common questions
What is the best image format for websites?
WebP for most photographs and graphics, JPEG as a safe alternative, and SVG for logos and icons.
How big should a website image be?
As wide as it is displayed, up to about twice that for sharp screens. Many photographs end up well under 200 KB with good compression.
Does image size affect SEO?
Indirectly. Heavy images slow pages and can harm Core Web Vitals, and alt text helps images appear in search.
Will compression reduce quality?
Lossy compression can, but at sensible settings the difference is not visible. Always compare before publishing.
Should I use a CDN for images?
It can help international audiences. For UK-focused sites, resizing and compression usually matter far more.
Keep reading
Related pages
Fast pages start with fast hosting
LiteSpeed, Redis and UK servers on every plan.