Reduce Image Size for Website Pages

A page with clean code can still load slowly if the images on it are heavier than they need to be. Photos from a phone or a stock library are made for printing and zooming, not for sitting in a blog post at a few hundred pixels wide. Go through this checklist before you upload the next batch, and you will reduce image size for website pages without guessing.

Image size for page speed is not just a technical detail either. A page that loads faster keeps more visitors on it, and speed is one of the factors search engines look at when ranking pages.

Resize images for website use, not for print

The most common mistake is uploading a file sized for something else entirely. A photo straight from a camera might be several thousand pixels wide, which is right for a large print but far more than any web page needs. Before you resize images for website pages, decide the largest size the image will ever appear at on your site, and work from there.

Match the display size

• Find out how wide the image will actually appear on the page. A banner that shows at 1200 pixels wide does not need a 4000 pixel original behind it.
• If the same image needs to look sharp on a large screen and a phone, size it for the largest display it will realistically use, not for print.
• Crop before you resize. Cutting out empty space reduces both the dimensions and the detail the browser has to draw.

Pick a sensible format

• Use JPG for photographs. It gives the smallest files for realistic images and every browser supports it.
• Use PNG only for graphics that need transparency or sharp flat colours, such as a logo. A photo saved as PNG is usually far heavier than the same photo as a JPG.
• WebP can save extra weight over JPG, but check that your website platform serves a JPG fallback for visitors on older software.

Compress before you upload

• Run each image through a compressor before adding it to the page. This site's image compressor lets you set a target size, such as 200 KB, and it searches for the best quality that fits.
• Aim for a size that matches how much the image matters on the page. A hero image at the top can justify a bit more weight than a small thumbnail further down.
• Check the result at the size it will display, not zoomed in. A slight softness that nobody will notice at normal size is not worth chasing away.

Think about the whole page, not one image

• Count every image on the page, not just the biggest one. A page with twenty small images can be heavier overall than a page with two large ones.
• Reuse the same image file for a logo or icon shown on every page, so the visitor's browser only needs to load it once.
• If your website platform offers lazy loading, use it for images further down the page, so they load only once someone scrolls near them.

Watch out for these mistakes

• Uploading a screenshot of a photo instead of the photo itself. Screenshots add extra pixels and rarely compress as well.
• Resizing the image visually with width and height settings in the page code while leaving the original file at full size. The browser still downloads the full file.
• Compressing the same file more than once across different tools. Each pass loses a bit more, so go back to the original when you need a different size.

To optimize images for web pages is rarely about one clever trick. It comes down to sending a file that matches what the page actually needs, in a format built for that kind of content, compressed sensibly before it goes live. Website image compression done this way is a habit you build once and then repeat for every image you add, and it pays off on every page it touches.