Optimise images for the web

Why images are often the first lever

An image that is too heavy slows loading, consumes more bandwidth, and weakens perceived quality on mobile. By contrast, a better-sized image improves the experience immediately without changing the design.

Image optimisation acts on several fronts at once: performance, accessibility, editorial consistency, and SEO understanding when files and attributes are properly filled in.

Choose the right format for the use case

• JPG : often a strong choice for compressed photos.
• PNG : useful for some transparency needs or visuals that require limited loss.
• WebP : helpful for reducing weight while keeping good perceived quality.
• SVG : suitable for icons, simple logos, and vector illustrations.

The right choice depends on the expected rendering, the level of detail, and the need for transparency or scalable display.

Reduce weight and keep dimensions coherent

An image displayed at 640 pixels wide usually does not need to load at 4000 pixels. Resizing beforehand and compressing properly often deliver the quickest gains.

• Prepare the image as close as possible to its real display size.
• Compress the file before publishing it.
• Avoid using the page itself as a brute-force resizing tool.

Do not overlook the alt attribute and file name

The alt attribute first serves accessibility. It should describe the image when that description is useful to the meaning of the page. For SEO and maintenance, a simple and descriptive file name is still the better choice.

• Describe the image if it adds useful information.
• Leave an empty alt for a purely decorative image.
• Choose coherent file names in lowercase with hyphens.

Lazy loading and responsive images

Lazy loading avoids loading visuals immediately when they are not visible on the first screen. Responsive images, meanwhile, make it possible to send more suitable sizes depending on device and screen density.

These optimisations become particularly useful when a page contains several visuals or when most browsing happens on mobile.

Good and bad examples

Mini checklist before publishing

• The chosen format matches the image type.
• The file has been compressed before going live.
• The dimensions match the real display size.
• The file name is descriptive and readable.
• The alt attribute is useful, or empty when the image is decorative.
• Lazy loading is used when it genuinely makes sense.

Useful resources and internal links

Conclusion

Optimising images for the web is often one of the most profitable improvements you can make. By choosing formats, dimensions, and attributes more carefully, you improve performance, clarity, and accessibility at the same time.