Saving images correctly before uploading them to your site can have a huge impact on your search engine ranking and website engagement. This article attempts to bring all of the tips we’ve learned through the years into one place.
Check to ensure you are using the right dimensions:
Check to what size the image will appear on your website. It is important ensure that you save your image using these dimensions.
For example, if the image appears in a space that is 300px X 300px, then size the image to 300px X 300px. This will stop the following problems:
- if the image is too small for the space, it will start to look blurred and lose quality
- if the image is too big for the space, it will take longer to load than necessary. The bigger the image, the larger the file size, and the longer the load time. Page load times are crucial for user experience and search engine ranking.
If you’re planning for the image to be full width (i.e. take up 100% of the screen width) we recommend a width of 1500px-2500px.
Tools to edit images offline:
Tools to edit images online:
Compress the image as much as possible:
If you’re using Photoshop, you can use the “Save for web” feature to adjust the quality. By lowering the quality, you can reduce the image file size. Your aim is to get the file size as low as possible, while still having acceptable image quality.
Here are programmes that will help you compress images:
Check to ensure you’re using the correct image file format:
Make sure you save your image to the correct format. The main formats used are:
- Jpeg – most common, great for large images and photographs
- Png – good for small icons, logos and if you need a transparent background (bad for file size though)
- Gif – good if you need to show animation or movement.
Fat Rabbit Creative offer a good overview on the differences in the file formats.
Check to ensure you’re saving to the correct colour mode:
Save images in RGB colour mode. 99 Designs has a great article on the difference between CYMK and RGB.
Check to ensure you’re using a good file name:
The file name should help describe what the image is. For example, instead of “DSC_2323.jpg”, use “vegetarian-burrito-with-nachos.jpeg”. Separate words with a hyphen.