Optimise Images for Your Website: Size, Format and Compression That Speed Up Pages

Step one: the right pixel size

The biggest saving comes from not sending pixels nobody sees. A modern phone camera takes photos of 4000 pixels width or more. A content column on a website is usually 700 to 1200 pixels wide; even on a high-resolution screen, an image there needs at most about twice that. A photo scaled to 1600 to 2000 pixels on its long side looks sharp almost everywhere and has a fraction of the original's pixels.

Work out the size from the layout: how wide is the image shown on a large screen? Double that for high-density displays and you have a sensible maximum. Full-width hero images may need up to 2400 pixels; thumbnails in a grid often need no more than 600.

In Compress Images, set Max dimension to the longest side you want; the range goes from 720 to 4096 pixels. Resize Images gives more control when an image must have exact dimensions, for example a fixed width for a newsletter template.

Step two: the right format

JPG is the classic format for photos: small, supported everywhere, but without transparency. PNG stores pixels losslessly and suits screenshots, logos and graphics with sharp edges and few colours, but makes photos very large. WebP and AVIF are newer formats that every current browser displays. At the same visible quality WebP files are usually clearly smaller than JPG, and AVIF files often smaller still; both support transparency.

For logos, icons and simple illustrations, consider SVG, a vector format that stays sharp at any size and is often only a few kilobytes. SVG files from design programs usually contain editor data that browsers don't need; the SVG Optimizer removes it and strips scripts and external references at the same time.

• Photos: WebP or AVIF, JPG where an older system needs it
• Screenshots and graphics with text: PNG, ideally as a lossy PNG with a reduced palette
• Logos and icons: SVG
• Photos with transparency, such as cut-out products: WebP, AVIF or PNG

Step three: enough compression, not too much

Lossy formats throw away detail the eye barely notices. How much they throw away is set by the quality setting. For JPG, values between about 75 and 85 percent are a common compromise for web photos; below that, blocky artefacts appear around edges and in skies. AVIF uses a different scale: in Toolula its default is 60 percent, which looks similar to a much higher JPG setting.

Instead of guessing, judge by looking: compress one typical image, open it at 100 percent next to the original and look at fine detail, faces, text and smooth gradients. Toolula shows the new size next to each file, and the before-and-after view lets you compare both versions directly.

If a system demands a maximum file size per image, switch Compress by to Target size and enter it. Toolula searches for the highest quality that still fits and only reduces the pixel size if even a low quality is too big. For screenshots, the PNG output uses up to 256 colours with careful dithering, which keeps text crisp and often makes files several times smaller than the original PNG.

Metadata, colour and orientation

Camera photos contain EXIF data: camera model, exposure, often the GPS position where the photo was taken. On a website this is dead weight at best and a privacy problem at worst, for example on a photo taken at home. Strip image metadata is on by default in Toolula's image tools; leave it on for web images. The guide Remove Metadata Before Sharing explains what these fields contain.

A colour profile and the orientation are worth keeping. Remove EXIF in Toolula keeps the ICC profile and, for rotated JPGs, a minimal orientation entry, so the photo is neither displayed with wrong colours nor sideways.

HTML details that matter

If you edit the HTML of your pages or your content system allows it, a few attributes make a measurable difference. Always give images their width and height attributes. The browser then reserves the space before the image arrives, and the text doesn't jump down while the page loads, a shift that Google measures as Cumulative Layout Shift.

Add loading="lazy" to images further down the page, so they are only loaded when the visitor scrolls near them. Do not use it for the main image at the top: that one is often the Largest Contentful Paint, the moment Google uses to judge how fast a page appears, with 2.5 seconds as the threshold for a good result. That image should load as early as possible.

With srcset and sizes, the browser can choose between several widths of the same image and load the small version on a phone and the large one on a desktop monitor. Many content management systems create these variants automatically if you upload a sufficiently large original.

A routine for every upload

Alternative text is not a speed factor, but it belongs to every web image: it describes the picture for screen reader users and for search engines. Toolula's AI Alt Text generator suggests a description on your device that you can edit.

• Choose the longest side from the layout, usually 1600 to 2000 pixels for content images.
• Pick WebP or AVIF for photos, PNG for screenshots, SVG for logos.
• Compress, then compare one image at 100 percent with the original.
• Leave metadata stripping on.
• Use a descriptive file name and write alternative text for each image.

Measuring the result

Optimisation is easier to keep up when you see the effect. Google's free PageSpeed Insights tests a page as a phone on a mobile connection would see it, reports the Largest Contentful Paint and lists images that are larger than necessary or could use a modern format. Run it before and after optimising a page, and you see the difference instead of guessing.

In the browser's developer tools, the Network tab lists every file a page loads with its size. Sort by size: in most cases the top entries are images, and the very first one is the one to fix. A typical article page with a hero image and a handful of photos can usually be brought from several megabytes to well under one without anyone noticing a difference in quality.

Frequently asked questions