One of the most common questions we get asked by clients is what size should the photos for my website be? If you’ve wondered this too, read on.
Why website image size is important
Some think that responsive website design (where images automatically scale to fit the screen size) means image size no longer matters but it’s still very important.
The reason is due to the need for web pages to load as fast as possible. Images generally add the most ‘weight’ to a page, potentially slowing it down. Slower websites can rank lower in Google, particularly in mobile search results (where speed and lightweight pages are even more important).
But this needs to be balanced with quality and filling out the page (without pixelating), particularly for images that need to expand across the full width of the screen, as well as for screens with higher pixel density, such as Apple retina screens.
It’s not just size – aspect ratio is important too!
In fact, I would probably say it’s more important since a mobile friendly website will automatically resize an image, but it won’t change the aspect ratio.
What do we mean by aspect ratio? Aspect ratio is basically the proportion of width to height. For example, a square image has an aspect ratio of 1:1 as the width and height are exactly the same. A rectangle image (positioned horizontally) will have a longer width than height. Commonly, digital cameras take photos that are a 3:2 ratio.
The most important thing with aspect ratio, and website images in general, is to keep them consistent across the website
The most important thing with aspect ratio, and website images in general, is to keep them consistent across the website. If you use a 21:9 aspect ratio for your hero images (see image below), then use this ratio for all your hero images, on all pages. This will keep your layout nice and tidy, regardless of whether it’s being viewed on a desktop, tablet or mobile.
Here’s a link to a handy online tool to calculate the correct aspect ratio. It allows you to work out the height when you are only given a width and aspect ratio.
What sizes are normally best for website photos?
These sizes are a general guide, and will work for most situations. Your website designer will let you know if different sizes (or aspect ratios) are needed. Use the aspect ratio calculator to calculate the height.
- Logo – Width: 1000px Aspect ratio: 21:9
- Hero – Width: 2000px Aspect ratio: 21:9
- Body image – Width: 1000px Aspect ratio: 3:2
- Body image (Full width) – Width: 2000px Aspect ratio: 16:9
- Product photos – Width: 1000px Aspect ratio: 1:1 (minimise white space around the product as this can be managed using styles)
- Footer logos – Width: 1000px Aspect ratio: 21:9
The illustrated guide below gives you an idea of how different images are sized on a standard website.
How do I prepare my website photos for uploading?
If you’ve sourced some great photos for your website, you need to prepare (resize and/or crop) them before uploading.
This involves using photo editing software, like Photoshop or free online services such as picresize.com, to resize and crop your images.
Here are a few points to keep in mind:
- Your max width should be 2000px – Unless you know your website will be wider (the most common large screen resolution you’ll website will be viewed on is generally 1920px) then make sure photos are downsized to 2000px for any full-width images.
- Background images will be obscured – Where an image will site behind text (such as a hero image) keep in mind that parts of the background image may be obscured, or even cropped out when viewed on different screen sizes. If there’s something in the photo that should be seen at all times then consider a different layout than a background image.
- Avoid text on photos – Text in a photo doesn’t work so well on a website – better to have a background image and overlay the text on the website.
- JPG quality ~ 45-65 – Any JPG quality (normally an option when saving an image) between 45 and 65 is fine for most screens. Also, DPI above 150 is not necessary (most screens are 96dpi).
- File size shouldn’t be more than about 250kb – In most cases, a properly optimised website image shouldn’t be more than 250kb in size. If it’s more than this consider using a different photo editing tool, or check your quality settings (see above).
- Keep the subject in the centre – Try to keep the main subject of the image in the centre, or employ the rule of thirds (one of the golden rules of photography, along with the rule of never trying to out-selfie a russian).
- Remove white space – Don’t include white space around an object when cropping as this can be added using website styles.
- Convert PNGs to JPGs – Unless there is transparency in the PNG that’s needed for the website, convert (save as) these images to JPG, which has better compression.
- Edit before uploading – While website programs like WordPress have built-in editing options, it’s best to edit before you upload.
- Name them logically – As part of the optimisation process it makes sense to rename them to something logical that will help you (and your website designer) to know where the image is to be used, and what it’s for, and also how to find it quickly in the future. It can also help a little with your SEO. For product photos, we recommend including the product name, category and SKU code.
When your website photos are ready, send them to your website developer (what’s the best way to do this?).
Need help with your website images?
Over time website images can take up a lot of space on your hosting. WordPress websites are particularly bad for image bloat, as often a lot of unnecessary thumbnails are created with each image upload.
If it’s time for a clean up let us know, we can help. We run a service that clears out all the thumbnails (most modern WordPress themes don’t need them) and optimises the images for screen resolution. For large media libraries this process could save over a gigabyte in space.
We also recommend you use a CDN service to serve photos on your website, and employ lazy loading to further improve the speed of your website (you can check your current website speed here).
Get in touch if you need help, or more advice about managing your website photos.