How to Optimise Images for a Website: Size, Format, and Compression
A simple three-step routine for website images that load fast and still look sharp: pick the right dimensions, the right format, and the right compression.
Published · Updated
Why image size matters so much
On most websites, images make up the largest share of what a visitor's phone has to download. A single unoptimised photo straight from a phone can be 4 to 8 MB, more than the rest of the page put together. On a mobile connection that means a blank space where the image should be, and visitors who leave before it appears.
Search engines measure loading speed too, and slow pages are at a disadvantage. The good news is that images are also the easiest thing to fix.
Step 1: Use the right dimensions
The biggest saving comes from not sending more pixels than the page shows. A photo 4000 pixels wide displayed in a column 800 pixels wide is wasting most of its data.
Work out the largest width the image is displayed at, then allow for high-density phone and laptop screens, which use about twice as many pixels:
- Full-width hero images: around 1920 to 2400 pixels wide
- Images inside an article column: around 1200 to 1600 pixels wide
- Thumbnails and cards: around 400 to 800 pixels wide
Resize Image with Keep proportions on does this in one step. Resizing a phone photo to 1600 pixels wide alone often cuts its size by 80 percent or more.
Step 2: Choose the right format
- Photos: WebP if your site accepts it, otherwise JPG
- Logos, icons, and graphics with transparency: WebP or PNG
- Screenshots and diagrams with text: PNG or lossless WebP, so text stays sharp
WebP is usually around a quarter to a third smaller than JPG at the same visible quality and is shown by every current browser. Our PNG vs JPG vs WebP guide explains the trade-offs in more detail.
Step 3: Compress
Compression removes detail the eye will not notice. After resizing, run JPG and PNG images through Compress Image, or convert them with Image to WebP, which compresses as it converts.
As a rule of thumb, aim for most content images to be under 200 KB and hero images under 400 KB. A photo that still looks noticeably soft after compression probably needed resizing more than compressing.
A routine for every new image
- Crop away anything that does not add to the picture with Crop Image
- Resize to the display width, keeping proportions
- Convert to WebP, or compress the JPG or PNG
- Give the file a descriptive name, such as blue-ceramic-mug.webp rather than IMG_4821.webp
- Write meaningful alt text when you add it to the page, for accessibility and search
Doing this before upload takes a minute per image and keeps your pages fast as the site grows.
Common mistakes
- Uploading full camera images and relying on the website to shrink them on screen, which still sends the full file
- Saving photos as PNG, which can be several times larger than JPG or WebP
- Compressing the same JPG repeatedly, which adds visible blocks and smudges each time; always compress from the original
- Using text inside images for headings, which cannot be read by search engines or screen readers
How to tell if images are slowing your site
Google's free PageSpeed Insights tool tests any public page and lists images that are larger than they need to be, with the potential saving for each. It is a good way to find the worst offenders on an existing site.
You can also check a single image by opening it in a new browser tab: the address bar shows the file, and saving it shows its size. If a photo in an article column is more than 500 KB, it is worth optimising.
Try Compress image
Free, with no account. It runs in your browser, so your files are not uploaded.
Open Compress image