I mentioned in a recent post how optimising images can help improve page load speed. So I thought I would go into more detail on how optimising images for the web can be simple and have a positive impact on your SEO.
Page Load Speed
Page load speed is the main reason you need to optimise images for the web before uploading. Google has indicated that this is one of the factors they take into account to rank pages. It also affects user experience. If a page does not load fast it can affect bounce rate and time spent on page.
There are several ways that you can improve site speed or page load speed. You can compress the files that make up your website, improve the server response times and you can optimise images. I use Photoshop to optimise images for the web as it gives you the most control over size and quality. There are free tools online that you can use to compress images, this one allows you to control the quality of the image.
File Size & Format
JPG vs PNG. There are the two most common file types that you will be uploading to your website or blog. JPG is a smaller file type and is what you should be uploading photographs in.
PNG is a larger file type that is more appropriate for graphics, such as logos and infographics. PNG file types allow for a transparent background which is what you will need for your logo file. As a larger file type, it allows for a clearer image when zooming in which is why it is more appropriate for infographic images.
If you have a photograph with text or graphic overlay it is still best to go with JPG to keep the file size smaller.
File sizes are in KB, MB, and GB. When optimising images for the web that are full-screen you don’t want it to be more than 1MB. Ideally, you would keep it under 500KB. For other smaller images used throughout your content try to keep it below 300KB.
The SEO site crawling tool I use recommends all images need to be below 100KB. If you can achieve file sizes this low without losing image quality on important images then this would be ideal. But the quality of the image is still important. It’s about finding a good balance.
Image files can be measured in pixels.
You can see in this screenshot the dimensions are 1080 x 1080 this is pixels. When you are resizing your images for the web you want to make sure that they are not unnecessarily large.
Images straight from my DSLR camera are 6000 x 4000 pixels. This is far larger than average computer screen sizes and will make the file size well over 1MB. 2400 x 1600 px is optimal for a full-screen image. For images within the content, the largest width you will need is 1500px and the max height 1000px. These are guides for the largest dimensions you might need, but the exact sizing will depend on the layout of your website.
An important part of web design and good user experience is having good quality images. Although we want them to be appropriately sized for the space and not to weigh too much, they still need to look good. One way to make sure that you are achieving this is to start with a good quality image. Whether its one you have taken yourself or a stock image.
For photos, you’re taking yourself make sure they are well lit and the subject is in focus. Think about where this image will sit on your website. Will have text overlayed on the images? so does the subject need to be off-centre to allow the space for text?
If you want to get creative with graphics Canva is a fantastic tool. You can use your own or stock photography and overlay text and graphics or create graphic images. It is an easy to use tool that has a variety of templates to choose from to get you started. It also has different options for exporting your files in the appropriate format.
There are many free and paid stock photography sites. They allow you to download license-free images that you can use for commercial purposes. I like to try and find what I am looking for on the free stock sites if I don’t have my own image that is suitable. Here are some of my favourite free stock sites –
To ensure these images are suitable dimensions, format and quality I use the save for web function within Photoshop. It converts the image into a web-ready format and gives you the options to adjust all these variables. You can select from JPG or PNG, adjust the quality of the image and see the impact it has on the file size before you hit save.
Once you have chosen a good quality image and optimised it ready to upload it to the web you need to name the file. You might not think this is important but it is a potential opportunity to improve your SEO by including keywords. It also makes files easier to find when making a change to your website.
To stay consistent, follow these guidelines for naming files.
- No capital letters, all lowercase
- No underscores or other character use only hyphens to separate words
- You can use numbers
Here is an example:
Instead of “IMG_1234.jpg” use “coolangatta-sunset.jpg”
When you download images from free stock sites the file name might look something like this “majo-villalon-5kIfcAHwLSU-unsplash.jpg”. Make sure to make it relevant to your blog post with a name like “optimising-blog-images.jpg”.
Alternative text is the text that website users can’t see, it is behind the images on your website. Google can’t see what is in your picture so the alternative text is where you can describe what is in it. Alternative text is also to improve the website experience for visually impaired users. So make your text as accurate and descriptive as possible and preferably include your keyword for that page or post.
NOTE: Although the alternative text and the file name are opportunities to add in your focus keywords try not to keyword stuff. It is more important that the wording you use is relevant and accurate to the image.
So these are the key things to consider when optimising images for the web. Make sure to find a balance that you are happy with between image quality and image size so that your users have the best possible experience on your website. Make the most of the opportunity to include keywords. And get creative with the images you are choosing for your posts. After all, a picture is worth a thousand words!