Image best practices

Best Practices for Using Images on Websites

Images play a major role in modern web design. They help communicate information faster, improve visual appeal, support branding, and can even increase engagement and conversions. However, poorly optimised images can slow down a website and negatively impact user experience and SEO.

This guide explains the best practices for using images on websites, including when to use JPEGs vs PNGs, image optimisation techniques, responsive images, and performance considerations.

Why Image Optimisation Matters

Website performance is one of the most important factors for both users and search engines. Large or unoptimised images are often the biggest cause of slow page load times.

Optimised images help to:

1. Improve website speed
2. Reduce bandwidth usage
3. Improve SEO rankings
4. Enhance user experience
5. Increase mobile performance
6. Reduce hosting and CDN costs

Even visually stunning websites can feel slow if images are not handled correctly.

---

Choosing the Right Image Format

Selecting the correct image format is one of the most important decisions when adding images to a website.

---

When to Use JPEG

JPEG (or JPG) is best for photographic images and complex visuals with many colours.

Best Uses for JPEGs

1. Photography
2. Blog feature images
3. Hero banners
4. Product photography
5. Background images
6. Real-world imagery

Advantages of JPEGs

1. Smaller file sizes
2. Compression options
3. Faster loading times

Disadvantages of JPEGs

1. Lossy compression can reduce quality
2. No transparency support
3. Repeated editing can degrade image quality

JPEG Best Practice

Export JPEGs at around 70–85% quality for a good balance between visual quality and file size.

---

When to Use PNG

PNG is best for graphics that require transparency or very sharp edges.

Best Uses for PNGs

1. Logos
2. Icons
3. UI elements
4. Screenshots
5. Graphics with text
6. Transparent images

Advantages of PNGs

1. Supports transparency
2. Crisp image quality
3. Lossless compression
4. Ideal for sharp graphics

Disadvantages of PNGs

1. Larger file sizes
2. Slower loading if overused

PNG Best Practice

Only use PNGs when transparency or sharp graphical detail is required. Avoid using PNG for large photographic images.

---

Image Optimisation

1. To optimise Images, use compressor.io, or
2. Alternatively, use tinypng

---

When to Use SVG

SVG files are vector-based and scale perfectly at any resolution.

Best Uses for SVG

1. Logos
2. Icons
3. Simple illustrations
4. UI graphics

Advantages of SVG

1. Tiny file sizes
2. Infinite scaling
3. Crisp on Retina displays
4. Editable with CSS

Avoid SVG For

1. Complex photography
2. Large illustrations with heavy detail

SVG Optimisation and Sanitization

1. To optimise SVGs, use SVGOMG
2. Once optimised, then sanitise using svg.enshrined

---

Image Sizes

While there is no exact science for best sizing images, I generally tend to stick with:

1. 1200px wide x 800px high (this being a ratio of 6:4) for most images

2. 1600px wide x whatever height for full width hero images

But its best to make them only as large as you think they’ll be responsively, for example, on desktop, the image may only be a half column (say 552px wide), but on tablet it could be full width (712px), so make the image the full width tablet size, rather than the smaller desktop size.

And there is no need to export JPEGs at 2x, that’s really only necessary for PNGs eg. logos, icons.

---

File Naming

Image file names can help search engines better understand the content of an image. While file naming alone will not dramatically improve rankings, it does contribute to overall image SEO and accessibility.

A good file naming strategy also helps keep media libraries organised and easier to manage.

Why Image File Names Matter

Search engines cannot fully “see” images in the same way humans do. They rely on supporting information such as:

1. File names
2. Alt text
3. Surrounding page content
4. Captions
5. Structured data

A descriptive file name provides additional context about the image content.

Use Descriptive Keywords

File names should clearly describe the image.

Good Examples

1. project-modern-office-interior.jpg
2. home-hero-office-interior.jpg
3. home-hero-office-style.jpg

Bad Examples

1. IMG_4837.jpg
2. image-final-v2.png
3. creenshot123.jpg

For SEO

1. just use dashes to separate filename terms
2. don’t include ambiguous text like ‘img’ on filenames.