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 and type of website images for the right purpose.
Website 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 for full-size website images
The width you need for an image within a page is 500-1000px.
Correct size for in-page website images
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.
Correct size image v. pixelated image
A large image can be displayed smaller, but your page will load more slowly if it is unnecessarily large – a website no-no!
The best website image 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
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 website images
You need to compress, or optimize, images to reduce the file size.
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. (We’ve written another blog about sourcing stock images that you’ll find useful.)
Therefore, you need to reduce the file size by reducing the pixels and compressing the image.
3 great apps to compress website images
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 find all this information a bit tech-y and daunting, we’re here to help. You’ll learn exactly how to add images correctly, and much more, with our one-to-one support. Buy one of our packages, and we will show you exactly how to make your images look great.
Book a Quick Chat with Fred to find out which of our website packages will work best for you.
Category: Demystifying Websites, Small Businesses