Images are usually the majority of a page's weight, and usually the easiest thing to fix. A five-step workflow typically cuts image bytes by 70% with no visible difference.
On most websites images account for more transferred data than everything else combined. They are also the easiest performance problem to fix, because optimising them requires no code changes, breaks nothing, and produces immediate measurable improvement. This is the workflow.
Step 1: Fix the dimensions first
This step alone often delivers the majority of the available savings, and it is the one most frequently skipped. If an image is displayed 800 pixels wide but the file is 4000 pixels wide, roughly 96% of the pixel data is discarded by the browser at render time — after being downloaded in full.
Work out the largest width each image will actually be displayed at in your layout, then double it to serve high-density screens crisply, then export at that size using the Image Resizer. A hero image in a 1200-pixel container becomes a 2400-pixel export. A thumbnail shown at 300 pixels becomes 600.
No compression setting can compensate for wrong dimensions, and no amount of quality tuning matters if you are shipping four times the pixels you need.
Step 2: Choose the right format for the content
Format choice depends on what the image contains, not on habit.
- Photographs and anything with smooth gradients: WebP first, JPG as a fallback.
- Logos, icons, screenshots, diagrams, and anything with sharp edges or flat colour: PNG or lossless WebP.
- Anything needing transparency: WebP or PNG. JPG cannot do transparency at all.
- Vector logos and icons: SVG, which is resolution-independent and often only a few kilobytes.
WebP typically produces files 25 to 35% smaller than JPG at equivalent perceived quality, and it is supported by every current browser. Test your specific images with the Image Converter rather than assuming — a flat illustration and a textured photograph respond very differently.
Step 3: Tune quality to the point just before you notice
For lossy formats, find the lowest quality setting whose output you cannot distinguish from the original at display size. For photographic content this usually lands between 75 and 85. Below roughly 70, blocking artefacts start appearing around edges.
Use the Image Compressor to sweep through settings, and inspect the parts of the image most likely to break first:
- Edges of text and logos, where ringing artefacts appear earliest.
- Smooth gradients such as skies, which can develop visible banding.
- Large flat colour areas, where compression sometimes introduces subtle blotching.
- Fine repeating texture like fabric or foliage, where loss shows up as mush.
Compress once, from the highest-quality original. Re-compressing an already compressed file compounds artefacts without meaningfully reducing size.
Step 4: Control when images load
Images the visitor has not scrolled to do not need to be fetched immediately. Native lazy loading removes their weight from the initial page load entirely with a single HTML attribute.
Two important exceptions: never lazy-load your hero or any above-the-fold image, because doing so delays Largest Contentful Paint and makes the page feel slower even though total bytes fell. And always declare width and height, or an aspect ratio, so the browser reserves space and content does not jump as images arrive.
Step 5: Serve appropriately per device
A phone does not need the same image as a desktop. Responsive image markup lets the browser pick from several sizes based on viewport and pixel density, so mobile visitors download a fraction of the data. Exporting three widths — roughly 600, 1200, and 2400 pixels — covers nearly every real-world case.
Additional refinements worth doing
Crop rather than shrink
If only part of an image carries meaning, crop to it with the Image Cropper. A tighter crop at the same display size means fewer pixels and a stronger composition. This is both a performance and a design improvement.
Strip unnecessary metadata
Camera files carry EXIF data including device model, settings, timestamps, and sometimes GPS coordinates. This adds weight and can leak location information. Re-encoding through a converter typically removes it — a privacy and performance win simultaneously.
Reconsider decorative images
The fastest image is the one you do not ship. Background textures, generic stock photography, and decorative flourishes often add hundreds of kilobytes while communicating nothing. CSS gradients, solid colours, and typography frequently look better and cost nothing.
Handle phone photos correctly
If your source images come from an iPhone, they are likely HEIC files. Convert them with HEIC to JPG before web use, then continue with resizing and compression as normal.
Realistic targets
- Hero image: under 200 KB.
- In-content images: 50 to 150 KB each.
- Thumbnails: under 30 KB.
- Logos and icons: under 10 KB, or SVG.
- Total image weight per page: under 1 MB.
Verify with real conditions
Open your browser's network panel, sort by transfer size, and look at the top five items. Then throttle the connection to a mid-range mobile profile and reload. Your own fast connection is not representative of your audience, and testing on it hides exactly the problems you are trying to find. Fix the largest offender, measure again, repeat. Two or three passes usually transforms a page.