When a web page feels slow, images are very often the cause. A single uncompressed photo can weigh more than all the text, code and styling on the page combined. The good news is that image performance is one of the easiest things to improve, and you do not need to be a developer to do it. This guide walks through practical steps, in order of impact, that can make your pages load dramatically faster.
Why image speed matters
- Visitors leave slow pages. People expect pages to appear quickly, especially on phones.
- Mobile data is limited and costly for many visitors. Heavy pages cost them money.
- Search engines consider page speed and user experience.
- Faster pages feel more professional and trustworthy.
Step 1: Resize images to the size they are displayed
This is the biggest win, and it is often overlooked. Phone and camera photos are typically 4,000 pixels wide or more. Most websites display images at 800 to 1,600 pixels wide. Sending a 4,000 pixel image to be displayed at 800 pixels wastes the vast majority of the data, because the browser downloads all of it and then throws most of it away.
Resize images to roughly the largest size they will be displayed, perhaps a little larger for high-resolution screens. A photo resized from 4,000 to 1,600 pixels wide contains about one sixth of the pixels, so the file shrinks by a similar amount before you even change format.
Step 2: Choose the right format
- Photos: WebP is usually the best balance. Use JPG to WebP to convert existing photos.
- Logos, icons and screenshots: lossless WebP keeps sharp edges and transparency. Use PNG to WebP with lossless on.
- Animations: animated WebP is usually far smaller than GIF. Use GIF to WebP.
- AVIF images you received: if your platform does not accept AVIF, AVIF to WebP keeps files small.
Step 3: Choose sensible quality
For photos in WebP, a quality between 75 and 85 typically looks indistinguishable from the original at normal viewing size. Going higher increases file size without visible benefit. For graphics, use lossless mode rather than raising quality.
Pick one setting for a whole page or site so images look consistent.
Step 4: Remove what you do not need
Crop
If only part of a photo matters, crop it. Fewer pixels means a smaller file.
Avoid decorative images that add nothing
Every image should earn its place. A large background photo that sits behind text may cost more than it adds.
Drop hidden metadata
Photos from cameras carry hidden information such as camera settings and sometimes GPS location. Our converters do not copy this metadata into the new file, which keeps files lean and protects privacy.
Step 5: Let the page load images only when needed
Most website platforms can "lazy load" images, meaning images further down the page only download when the visitor scrolls near them. If your platform offers this setting, switch it on. Combined with smaller files, it makes the first view of a page appear much faster.
Step 6: Measure before and after
Most browsers include developer tools that show how much data a page downloads. Note the total before you start, apply the steps above, and measure again. Seeing the difference in numbers is motivating and helps you decide where to focus next.
A worked example: a small business homepage
A bakery's homepage has a large header photo at 5 MB, six product photos at 3 MB each, and a 4 MB animated GIF of bread coming out of the oven: about 27 MB in total. On a phone with an average connection, the page takes a long time to appear.
The owner applies the steps:
- Resizes the header to 1,600 pixels wide and the product photos to 800 pixels wide.
- Converts all photos to WebP at quality 80.
- Converts the GIF to animated WebP and reduces its size.
The page drops from about 27 MB to a small fraction of that, mostly thanks to resizing, with WebP adding further savings. The page now appears almost instantly, even on mobile data.
Common mistakes
- Converting format but not resizing. Format changes help, but resizing usually helps more.
- Using PNG for photos. PNG photos are huge. Use WebP or JPG.
- Using lossy compression for screenshots with text. Use lossless.
- Uploading the same huge image and relying on the website to shrink it. Some platforms do this well, many do not. Prepare images yourself to be sure.
- Forgetting about animations. A single GIF can outweigh every other image on the page.
A quick checklist for every new image
Before you upload any image to your website, run through these questions:
- Is it the right size? Resize to roughly the largest size it will be displayed.
- Is it the right format? WebP for photos and graphics, animated WebP instead of GIF.
- Is the quality sensible? Around 80 for photos, lossless for screenshots and logos.
- Is it cropped? Remove anything that does not need to be there.
- Does it need to be there at all? Every image should help the visitor.
- Does it have a text description? Alt text helps people using screen readers and helps search engines understand the image.
Following this checklist takes a minute per image and prevents slow pages from creeping back as your site grows.
Images on phones
Most visitors now arrive on phones, often on mobile data. Test your pages on a real phone, not just a fast office connection. If a page feels slow on your phone, it feels slower for someone with a weaker signal or an older device.
Keeping originals
Always keep your original, full-size images somewhere safe. Website images are delivery copies. If you redesign your site or need images for print, you will want the originals.
In short
Resize images to their display size, convert photos and graphics to WebP with sensible settings, replace heavy GIFs with animated WebP, crop and remove unnecessary images, and measure the results. These simple steps can turn a slow, heavy page into one that loads almost instantly, without your visitors noticing any loss in quality.