A practical guide to images for the web

Choose a format, resize thoughtfully, and compare compression without losing sight of quality.

A good web image should look clear at the size it is displayed without making a page unnecessarily heavy. The best result usually comes from combining sensible dimensions with an appropriate file format.

1. Start with the dimensions you need

A 4,000-pixel photograph is often more than a small article card needs. Determine the display size first, then allow enough pixels for high-density screens. A card displayed at 600 pixels wide may benefit from a 1,200-pixel image.

Open the Image resizer, enter your target width, and leave aspect ratio enabled. Keep an untouched original for future edits.

2. Choose the right format

JPEG is broadly compatible and useful for photographs. PNG is useful for transparency and sharp graphics, though it can be large for photos. WebP supports both photographs and transparency and can offer compact files. Actual sizes depend on the image.

3. Compare the output

Use the Image compressor to try a quality setting around 80, then inspect edges, faces, and gradients. Lower quality only if the result still looks acceptable. An already compressed original may not get smaller.

4. Check before publishing

Review the image at its intended display size and on a smaller screen. Give it a descriptive filename and supply useful alternative text in your website editor. File conversion alone does not create accessible content.