How to add website images correctly
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.
The width you need for an image within a page is 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.
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.
If you buy one of our website packages, we’ wi’ll make sure you know exactly how to make your website look and work beautifully.
Book a Quick Chat with Fred to find out which of our website packages will work best for you.