20 min read

Choosing and Optimising Images

Pick the right format, resize and compress images for fast pages, write alt text, and use only images you have the right to use.

Why Optimise?

Photos are usually the heaviest part of a web page. A photo straight from a phone camera can be 4-8 MB and 4,000 pixels wide — far bigger than any screen shows. On mobile data it loads slowly and costs the visitor money. Optimising means making the file as small as possible while it still looks good.

1 Resize to the largest size it will be shown at. A gallery thumbnail might be 400 px wide; a full-width hero photo about 1600 px. 2 Compress — export as JPEG or WebP at about 70-80% quality. Most people cannot see the difference. 3 Aim for photos under about 200 KB each where possible. Free tools: Squoosh (in a browser), GIMP, Photopea, or "Export As" in Photoshop.

Worked example

Optimising a gallery photo

Before After Size 4032 \times 3024 px 800 \times 600 px Format JPEG from the phone WebP, quality 80 File size 3.6 MB about 90 KB The page now loads about 40 times less data for this photo, and it still looks sharp in the gallery.

Describe what matters in the picture in one short sentence. Do not start with "image of". A purely decorative image can have an empty alt (alt="").

Use your own photos, photos the organisation owns, or images with a licence that allows reuse — for example from Wikimedia Commons, Unsplash or Pexels — and follow the licence conditions (such as giving credit). A Google image search is not permission.

Practice

Which is usually the best format for a photo on a modern website?

Why Optimise?

Photos are usually the heaviest part of a web page. A photo straight from a phone camera can be 4-8 MB and 4,000 pixels wide — far bigger than any screen shows. On mobile data it loads slowly and costs the visitor money. Optimising means making the file as small as possible while it still looks good.

Choosing a Format

Resize, Then Compress

1 Resize to the largest size it will be shown at. A gallery thumbnail might be 400 px wide; a full-width hero photo about 1600 px. 2 Compress — export as JPEG or WebP at about 70-80% quality. Most people cannot see the difference. 3 Aim for photos under about 200 KB each where possible. Free tools: Squoosh (in a browser), GIMP, Photopea, or "Export As" in Photoshop.

Worked example

Optimising a gallery photo

Before After Size 4032 \times 3024 px 800 \times 600 px Format JPEG from the phone WebP, quality 80 File size 3.6 MB about 90 KB The page now loads about 40 times less data for this photo, and it still looks sharp in the gallery.

Alt Text

Describe what matters in the picture in one short sentence. Do not start with "image of". A purely decorative image can have an empty alt (alt="").

Only Use Images You Have the Right to Use

Use your own photos, photos the organisation owns, or images with a licence that allows reuse — for example from Wikimedia Commons, Unsplash or Pexels — and follow the licence conditions (such as giving credit). A Google image search is not permission.

Practice

Which is usually the best format for a photo on a modern website?