Image Optimisation for Website Speed: A Practical Guide

Images make a website easier to understand, but they are also one of the most common reasons a page feels slow on a phone. A camera photo, product banner or decorative background can contain far more pixels and data than the visitor’s screen needs. When several such files arrive together, the browser must download, decode and paint them before the page feels complete. A beautiful design can therefore create a frustrating experience on a mobile connection.

Image optimisation is the process of delivering the right visual quality at the right dimensions and loading it at the right moment. It is not simply a race to make every file as small as possible. A product photo that becomes blurry can reduce trust, while a hero image that loads too late can harm the first impression. The goal is a sensible balance between clarity, accessibility, speed and the purpose of the page.

This guide explains a repeatable workflow for blogs, tool pages, portfolios, stores and small business websites. It also shows how image decisions connect to Core Web Vitals, layout stability, SEO and privacy. You can begin with the browser-based Image Compressor, Image Resizer and Image to WebP Converter, then validate the page as a whole.

Why images affect mobile performance

An image affects performance in several stages. The browser first discovers the URL, requests the file and waits for bytes to arrive. It then decodes the compressed file into pixels and paints those pixels into the layout. A large image can be expensive at each stage. The cost becomes more noticeable on a phone with limited processing power, a busy network or a data plan where every megabyte matters.

The file’s byte size is important, but it is not the only factor. A very large image displayed at a small size wastes bandwidth. A file with no declared dimensions can push the text downward after it arrives. A gallery with dozens of images can compete with the article’s important content. A background image may be difficult for the browser to prioritise because it is discovered through CSS.

Images can also affect user experience after the first paint. If a page shifts while photos load, a visitor may tap the wrong control. If an image is technically fast but has poor contrast or missing alternative text, the page is still less usable. Performance and accessibility should be planned together.

1. Audit every image before changing it

Start with a list of the images on important pages. Record the URL, file type, file size, pixel dimensions, where it appears and whether it is decorative or meaningful. Include logos, icons, hero images, thumbnails, product photos, social previews and images loaded by CSS. A quick audit usually reveals a few unusually large files that are responsible for a disproportionate amount of weight.

Sort the list by file size first. Then compare each image’s intrinsic dimensions with its displayed dimensions. A 2400-pixel photograph shown inside a 360-pixel mobile card may be useful at a smaller size, especially if the desktop layout has a different requirement. If the same file is reused in many places, create appropriate variants rather than forcing every context to download the largest version.

Look for duplicates and unused files as well. Removing an unused image from the project or from a page template prevents future confusion, but do not delete files from a live site without checking whether an old URL is still referenced. Replace or redirect carefully so you do not create broken images.

2. Choose display dimensions before compression

Compression cannot fix an image that is fundamentally too large for its use. Decide the maximum display width first. A blog content image may need a different width from a small card thumbnail. A full-width desktop banner may need a mobile crop rather than the same wide file squeezed into a narrow screen.

Use the layout as your guide. If a content column is 780 CSS pixels wide, a source around that width may be sufficient for normal display, with some allowance for high-density screens. If a card is 300 pixels wide, a 300–600 pixel source may be more appropriate than a 2000-pixel original. Exact values depend on the design, but the principle is consistent: do not send five times more pixels than the component can show.

Preserve the subject when resizing or cropping. Keep important faces, product details and text away from edges that may be removed on mobile. For repeated formats, create a small set of predictable sizes and use them consistently. This makes future optimisation easier and avoids a different oversized file for every page.

3. Pick the right image format

Format selection should follow the image’s content. JPEG is still useful for photographs when a reasonable quality setting keeps the file compact. PNG can be appropriate for graphics that need lossless detail or transparency, although it often produces larger files for photographs. SVG is excellent for simple logos and icons when the artwork is genuinely vector-based.

WebP can provide a good balance for many photographs, illustrations and transparent graphics. The format is widely supported by modern browsers and can reduce bytes compared with an equivalent older format. AVIF can be efficient in some cases, but you should consider your delivery setup, fallback strategy and editing workflow before making it the only option.

Do not convert every file automatically and assume the result is better. A graphic with sharp text may show unwanted softness at an aggressive quality setting. A small icon may be smaller as SVG or PNG. Compare the original and converted versions at the size visitors will actually see. Keep the format that delivers the best practical result.

4. Compress with a quality target

Lossy compression removes visual information to reduce file size, while lossless compression keeps the image data intact but may produce a larger file. For most web photographs, moderate lossy compression is a useful starting point. The correct setting depends on the subject, the size and how much detail the visitor needs to inspect.

Use the Image Compressor to test a copy, then compare it side by side with the original. Check faces, fine lines, gradients, shadows and text inside the image. Zooming to 100 percent can expose artifacts that are invisible in a small preview, but do not judge a web image only at extreme zoom. The page’s actual display size matters more.

Keep an original master outside the web delivery folder. This lets you create a new version later without repeatedly recompressing an already compressed file. Name the optimised output clearly so the source and web version are not confused during updates.

5. Use responsive images for different screens

A responsive image strategy lets the browser choose a suitable source for the available space and resolution. In HTML, the srcset attribute can list several widths and the sizes attribute can describe how wide the image is expected to be. The browser can then avoid downloading a desktop-sized asset for a narrow phone layout.

For art direction, where the crop itself should change, the picture element can provide different sources. A wide landscape banner might use a tighter portrait crop on mobile so the subject remains visible without sending a huge image that will be clipped. This is especially useful for hero areas and promotional cards.

Responsive markup is helpful only when the candidate files are genuinely different sizes. Listing the same large file several times does not save anything. Test the final page at common viewport widths and inspect the network panel to see which file the browser selected.

6. Prevent layout shifts with dimensions

Reserve space for an image before it loads. The simplest method is to include accurate width and height attributes that reflect the image’s aspect ratio. CSS can then scale the image responsively while the browser retains the correct space. This reduces unexpected movement and supports a better Cumulative Layout Shift result.

If the image is displayed inside a fixed-ratio card, use an aspect-ratio rule or an equivalent layout reservation. Avoid inserting images into a document without knowing how much room they will occupy. Advertisements, late-loading widgets and other elements can also shift the page, so measure the complete layout rather than blaming every movement on photos.

Do not distort images to fill a box. Use object-fit: cover for intentional crops or object-fit: contain when the complete object must remain visible. The visual choice should match the page’s purpose.

7. Load important and secondary images differently

The image that is part of the first visible section may be important to the page’s largest contentful paint. It should be discoverable early and should not be hidden behind an unnecessary JavaScript loader. At the same time, loading every image eagerly can make the initial page heavier than necessary.

Images below the initial viewport are usually good candidates for native lazy loading with loading="lazy". The browser can delay them until they are likely to be needed. Use this carefully for long articles and galleries. A small image just below the fold may be fine either way, while lazy loading the main heading’s visual can delay the page’s most important content.

Set decoding and priority choices only when they match the page. decoding="async" can allow the browser to continue other work, but it does not turn a large file into a small one. If you use a priority hint or preload, reserve it for a truly important resource. Too many priority requests cancel one another out.

8. Write useful file names and alt text

Before uploading, give the file a short descriptive name that reflects its subject, such as mobile-image-compression-guide.webp. Avoid camera defaults, long strings of numbers and repeated keywords. A clear file name helps people manage assets and provides context, but it does not replace the visible page content.

Alt text serves people who cannot see the image or whose connection prevents it from loading. Describe the image’s purpose, not every decorative detail. “Before and after comparison of a compressed website photo” is useful for an explanatory graphic. If an image is purely decorative and adds no information, an empty alt attribute can be more appropriate than a distracting description.

Do not stuff alt text with search phrases. Do not start every description with “image of” when the context already makes that clear. If text inside an image is essential, include the information in the surrounding HTML as well so it is available to everyone.

9. Optimise images for blogs and tool pages

A blog image should earn its place by explaining a step, showing an example or making a complex idea easier to remember. A decorative image that adds no meaning may be unnecessary, especially near the top of a mobile article. Use headings, text and lists for information rather than screenshots containing paragraphs that search engines and assistive technologies cannot easily use.

Tool pages often need a different balance. A product-style preview can build confidence, but the tool itself should remain visible and usable without waiting for a large illustration. Keep logos and icons lightweight. If a screenshot is important, crop it to the relevant interface and provide a text explanation beside it.

For an online store, image clarity affects buying decisions. Use consistent angles, backgrounds and dimensions so products can be compared quickly. Deliver thumbnails for listing pages and larger images only on the product detail view. Do not make a visitor download every gallery image before the first product information appears.

10. Test the page, not just the file

A compressed image is not proof that the page is fast. After adding the file, test the complete page on a mobile viewport and a throttled connection. Check which resource is the largest, when the main content appears, whether the page shifts and whether the browser downloads images that are never seen.

Review the page with a performance audit tool and read the recommendations instead of focusing only on the headline score. A score can change with device conditions, network simulation, advertising, analytics and server response. The most useful result is a repeatable improvement in loading and interaction for real visitors.

Use the Image Resizer to create a display-sized variant, the Image to WebP Converter for a format test and the SEO Analyzer to check visible image attributes on a page source. These browser tools are convenient for preparation, but the website’s final HTML, caching and server delivery still need review.

11. Keep caching and delivery in mind

When a visitor returns to a page, strong caching can prevent the same image from being downloaded again. Configure long cache lifetimes for files whose names change when their contents change. If you replace an image without changing its URL, an old cached version may remain visible to some visitors. Versioned filenames or cache-busting rules can make updates predictable.

A content delivery network can place static assets closer to visitors, but it does not remove the need for correct dimensions and compression. Delivery infrastructure is most effective when the bytes being delivered are already appropriate. If your site uses a host-level image optimiser, verify the final format, quality and cache headers instead of assuming its defaults match your design.

Be careful with third-party image hosts and remote backgrounds. They may introduce extra DNS, connection and privacy work. For a small static website, serving a few optimised local assets is often simpler and more predictable than adding a remote widget for decoration.

12. A repeatable image optimisation workflow

1. List the images used on the page and mark the important above-the-fold asset.
2. Choose the displayed dimensions and create an appropriate crop or variant.
3. Pick a suitable format based on the image’s content and transparency needs.
4. Compress a copy, compare it at the real display size and keep the original master.
5. Add descriptive filenames, accurate dimensions and useful alt text.
6. Use responsive sources when the same image appears at very different widths.
7. Lazy load images below the initial viewport and reserve layout space for all images.
8. Test the complete page on mobile, check network requests and fix the largest remaining cost.

Document the choices in a short content checklist so every new contributor follows the same process. Consistency prevents a fast page from becoming slow again after a redesign or content update.

Common image performance mistakes

• Uploading camera originals: the image has more pixels and detail than the page can display.
• Using one desktop file everywhere: mobile visitors download data that will be cropped or reduced.
• Lazy loading the main visual: the most important content arrives later than necessary.
• Skipping dimensions: the page moves when the browser finally learns the image’s size.
• Converting without checking quality: sharp text, gradients or product details can become damaged.
• Adding too many images: even small files add requests, decoding and visual clutter.
• Using keyword-heavy alt text: it makes the page less accessible and less natural.

Frequently asked questions

Why do images make a website slow?

Large or incorrectly sized images add download bytes and decoding work before a page becomes useful. Images can also cause layout movement when their dimensions are not reserved. Several medium-sized files can be a problem too, especially on long pages.

Is WebP better than JPG for every image?

WebP is efficient for many photographs and graphics, but the best format depends on the image, browser support, transparency needs and the quality required. Test the result instead of converting blindly. A small SVG, PNG or JPG can still be the better choice for a particular asset.

Should every website image be lazy loaded?

Images below the initial viewport are good candidates for lazy loading. The main above-the-fold image usually needs an eager or carefully prioritised load so it does not delay the visible content. Test the result on the actual page.

Does image alt text improve SEO?

Useful alt text improves accessibility and helps describe an image’s purpose. It can support image understanding, but it should never be a list of keywords or a replacement for relevant page content.

Can image optimisation guarantee a 95+ PageSpeed score?

No. Image work can remove a major source of bytes, but the final score also depends on hosting, scripts, CSS, caching, ads, fonts, device conditions and other page features. It is better to test the live page and improve the complete experience.

Fast images are the result of many small, sensible decisions: choose the display size, select a suitable format, compress with care, reserve layout space, load only what is needed and describe meaningful visuals accurately. Make those decisions part of your publishing workflow and a new blog post or tool page can remain light without looking unfinished. Good optimisation respects both the visitor’s connection and the purpose of the image.