How to add website images correctly

Red coffee cup for website images blog

You want your website to look fabulous and work beautifully too, right?⁠ ⁠ That’s why it’s really important to use the right size website images for the right purpose.⁠ ⁠

Image size

For screens, the measurement that matters is pixels, and measures the height and width of your image.

For website images, think in terms of width.

The maximum width you need for a full-screen image – such as a Hero Image or background image – is 2500px.

Correct size of full-screen website image: 1500-2000 px

The width you need for an image within a page is 500-1000px.

Correct size for in-page website image - 500-1000px

Think about where you will use the photo before re-sizing. A small image will be pixilated if it displays larger than the actual size, so don’t over-reduce your website image.

Pixilated website image of red coffee cup

A large image can be displayed smaller, but your page will load more slowly if it is unnecessarily large – a website no-no!

File type

Using the right file type for your website image is essential. The file type might be different for printed material. ⁠ ⁠

JPEGs are best for website photos because:⁠ ⁠

  • JPEGs support 16 million colours;⁠ ⁠
  • JPEGs can be compressed in a way that means your file size can be smaller without losing quality – important to make sure your website doesn’t load slowly

JPEGs aren’t good for text on images because the compression method means that the text edges can be blurry.⁠ ⁠

PNGs are best for website graphics because:⁠ ⁠

  • PNGs use a limited palette of colours with great vibrant colour depth;⁠ ⁠
  • The limited colour palette means that file sizes can be tiny – great for your website; ⁠ ⁠
  • PNGs can also be transparent, which is ideal for logos and favicons.⁠ ⁠

Although you can save photos as PNGs, the file size would be enormous, so unsuitable for websites. ⁠ ⁠

Compressing image

Large images are the biggest reason that websites load slowly.

And, given that people leave a website if it takes more than a few seconds to load, you need to make sure that all the website images you use are as compact as possible.

What is file size?

File size is measured in bytes – KB or MB (1MB=1000KB).

The maximum file size for a website should be 1MB. Your media library may allow you to load larger files, but your images won’t look any better, and your website will be slower.

Typical sizes

If you take photos on your phone, a photo can be 5MB or more. If you use stock images e.g. Unsplash, photos can be as bit as 8MB.

Therefore, you need to reduce the file size by reducing the pixels and compressing the image.

3 great apps to compress website images

Optimisation = compression.

ImageOptim (for Macs) – drag in image(s), and optimization happens automatically.

FileOptimizer (PC) – drag in image(s), and click “optimize”.

Photoshop: open image, then click “File > Save for Web”.


Our support is second to none, and, if you buy one of our website packages, we will make sure you know exactly how to make your website look and work beautifully.