How to make images load faster on a website
The five changes that cut image weight on any website, in order of impact.
On most websites, images make up the majority of what a visitor downloads. A single unoptimised photo from a phone can weigh more than the rest of the page combined. Fixing images is usually the biggest and cheapest speed improvement available, and faster pages rank better, keep visitors longer and convert more.
1. Upload images at the size they are shown
A photo straight from a phone is 4000 pixels wide or more. A content column on a website is rarely wider than 1200 pixels, and a card or thumbnail far less. Every extra pixel is downloaded and then thrown away by the browser. Resize before uploading: about 2000 pixels wide for full-width banners (to stay sharp on high-density screens), 1200 to 1600 for content images, and 600 to 800 for cards. The resize tool does a whole folder at once.
2. Compress
At the right dimensions, compression does the rest. A photo saved at quality 80 looks identical to one at 100 on a web page and is often a third of the size. The image compressor handles batches and shows the saving for each file.
3. Use WebP
WebP is supported by every current browser and is typically 25 to 35 percent smaller than JPG at the same visible quality, with transparency support that makes it a replacement for many PNGs too. Convert with JPG to WebP or PNG to WebP. AVIF is smaller still but slower to encode and less universally supported by upload systems, so WebP is the practical default.
4. Pick the right format for the content
| Content | Best format |
|---|---|
| Photos | WebP, or JPG where WebP is not accepted |
| Logos and icons | SVG if you have it, otherwise PNG or WebP |
| Screenshots with text | PNG or lossless WebP |
| Simple animations | A short video instead of a GIF |
5. Help the browser load them sensibly
- Lazy loading. Images below the first screen should load only when the visitor scrolls near them. Most platforms do this automatically; in plain HTML, add loading="lazy" to img tags that are not visible at first.
- Dimensions. Give every image a width and height so the page does not jump around as images arrive. Layout shift is one of Google's Core Web Vitals.
- The main image first. The large image at the top of a page, usually the one that counts as the Largest Contentful Paint, should never be lazy loaded. It should load as early as possible.
How much difference it makes
A typical page with ten photos straight from a phone might weigh 30 MB. Resized to sensible widths and compressed, the same page is usually around 2 MB. Converted to WebP, closer to 1.4 MB. On a mobile connection that is the difference between a page that appears in a second and one that many visitors abandon.
Checking your results
Google's PageSpeed Insights and the Lighthouse panel in Chrome's developer tools both list oversized images, images that should be WebP, and the Largest Contentful Paint element. Run them before and after, and focus on the pages that get the most traffic first.