Website Image Optimisation: Faster Pages Without Losing Quality

Images are often the largest files on a web page and one of the most common reasons websites load slowly. Optimising them means using the right format, the right dimensions and appropriate compression, then delivering them efficiently. Done well, image optimisation can cut page weight dramatically without visible loss of quality, improving user experience, conversion and Core Web Vitals.

Why images slow websites down

Common problems include:

• Uploading photos straight from a camera or phone, often several megabytes each.
• Images much larger in dimensions than the space they occupy on screen.
• Older formats, such as PNG for photographs, that produce large files.
• Many images loading at once, even those far below the visible area.
• Large hero images or sliders at the top of the page.

Choose the right format

WebP: widely supported by modern browsers and typically much smaller than JPEG or PNG at similar quality. A good default for photos and graphics.

AVIF: often smaller still, with growing browser support. Useful where your platform supports it, often with fallbacks.

JPEG: still fine for photos, especially as a fallback.

PNG: best for graphics requiring transparency or sharp edges, but usually inefficient for photos.

SVG: ideal for logos, icons and simple illustrations; scales without quality loss.

Many platforms and plugins convert images to WebP or AVIF automatically.

Resize to the displayed size

An image displayed at 800 pixels wide does not need to be 4,000 pixels wide. Resize before uploading, or use a platform that generates multiple sizes. WordPress creates several sizes automatically and uses responsive image markup (srcset) so browsers can choose an appropriate size for each device.

For high-resolution screens, images around twice the displayed dimensions are generally enough.

Compress sensibly

Compression reduces file size by removing data. Lossy compression at moderate quality settings usually produces files far smaller than the original with little visible difference. Tools such as Squoosh, TinyPNG or optimisation plugins handle this. Check results visually, especially for product photos where detail matters.

Lazy load below-the-fold images

Lazy loading delays images until a visitor scrolls near them. Modern browsers support native lazy loading with the loading=”lazy” attribute, and WordPress adds it by default for most images.

Do not lazy load the main image at the top of the page. It is often the Largest Contentful Paint element, and lazy loading it delays the main content. See our guide to Core Web Vitals.

Prevent layout shift

Include width and height attributes, or use CSS aspect ratios, so browsers reserve space for images before they load. This prevents content jumping around, which affects Cumulative Layout Shift.

Use a CDN

A content delivery network serves images from servers close to the visitor, speeding delivery. Many hosts and image services include CDNs, and some image CDNs resize and convert images automatically.

Alt text and file names

Descriptive file names and alt text help accessibility and image search. Alt text should describe the image for someone who cannot see it. See our guide to website accessibility.

Platform tips

WordPress: use an optimisation plugin or host-level tool for compression and WebP conversion, and avoid uploading oversized originals. Our guide to WordPress plugins covers choosing well.

Shopify: Shopify serves images through its CDN and can deliver modern formats automatically, but upload sizes and theme implementation still matter.

Checking your results

Use PageSpeed Insights or Lighthouse to identify oversized images and opportunities. Look for warnings such as “Properly size images” and “Serve images in next-gen formats”. Compare page weight before and after optimisation.

Faster pages with the same visual impact

Image optimisation is one of the quickest, highest-impact performance improvements for most websites. It combines easily with other speed work, covered in our guide to why websites are slow.

If your site is slowed down by heavy images, our website design and development service can set up automated optimisation and fix image-related performance issues.