Everyone knows how important SEO is nowadays, however, people can forget that images come into play with that too. Optimising images for the web goes further than making sure it’s labelled correctly, there are so many more elements like alt text, sizing and quality. Believe it or not, even the smallest incorrect element of an image could have potential website visitors bouncing and heading to greener pastures.
Google is the most used search engine in the world. In fact, over 90% of online traffic and searching is done through Google, so it makes sense that people try to cater favourably to it. With a lot of what we need to source being available online, from food to clothing, more and more businesses are battling it out for that number one ranking in their search term. With so many people focusing in on the text element of their websites or their blogs, are they missing an opportunity to optimise their images? After this blog, we hope you’re no longer amongst that group!
Of users expect a page to load within TWO SECONDS
Of consumers will leave a webpage if it takes over THREE SECONDS to load
Of traffic is lost for EVERY SECOND of loading time (over three seconds) according to Google
Stick a label on it
This ties in with the text element of SEO. Peppering your written content with the right keywords and phrases, which indicate what the content is about but in an authentic way, is essential to having a positive impact on Google but these keywords should also extend to your images. Make sure that your images are labelled with relevant keywords (don’t stuff them though!) and that you are able to slot them into the title and alt text for each image. This will tell search engines what the image is about, therefore, making it far more likely that their information will be indexed by Google.
It is also critical for allowing screen readers and assistive technologies translate what is in the image to end users. This may also benefit users if images are disabled for any reason, allowing them to better understand the elements they are missing out on.
This screenshot is taken from one of our recent blogs on targeting through social influencers, you can see our main image is a strong, related image that has been sized to span the width of the page. Most importantly though, it has alternate (alt) text that includes the keywords “Influencer targeting”. Meaning, that if someone searches for this term, our blog has a higher chance of ranking and will have an even higher chance of appearing in a Google Image search for the keyword, which is an often underrated form of referral traffic.
Ensure that your image has a simple, related file name, title and caption (should it need a caption) and always be sure to include some alt text. It’s a little hidden gem!
Another last minute tip, place your image near text relevant to the caption and the content of the image, this is just another small thing that will improve your ranking. Optimising images in this way helps you rank higher as it allows Google to translate the media file into meaningful text, contributing it to your keyword density and SEO ranking, otherwise it would just be something on the page that Google can’t read and will ignore.
Bigger isn’t always better
This isn’t only in reference to the height and the width of the image but also the file size. Oversized images slow your website down, it will take longer to load and sometimes text will load before the images do, leaving large blank spaces with no content, not exactly aesthetically pleasing online content! Like we said above, 40% of consumers will leave a webpage if it takes longer than three seconds to load and 47% expect it to load in less than two seconds. You can check the speed of your website here.
How long a page takes to load is also a ranking factor in the Google algorithm, so it may seem like a good idea to have the highest resolution possible on your images, but it isn’t.
It’s important to be aware of your image sizes and the file types you are working with. JPEG images are great for photographs, this is a smaller file format for images, but due to the mix of colour present in photographs, the loss in quality is almost unnoticeable to the human eye. PNG images are high-quality images, ideal for infographics, logos and images with transparent backgrounds, these image files look amazing but should only be used for text-heavy or very defined content. Otherwise, you will pay for it with a larger file size. Everyone loves a GIF, but these are obviously only used when you need some animation and the file sizes for gifs can be vast and varied so it’s always best to opt for a compressed file to preserve your loading time.
A lot of websites will automatically optimise images and their sizing to benefit the website or page. Although it’s better to do it beforehand, WordPress will give you several options for image sizing on blogs alone (small, medium, large, full size and even custom content sizes), you can use this to resize your content.
However, some websites do not and you have to resize your content yourself, you can use many programmes to do this including Photoshop, Lightroom and even your built-in image viewer on your laptop. For example, on Macs, it would be ‘Preview’. It’s recommended that you use images that are between 1500 and 2000 pixels wide, any smaller and you’re looking at blurry images and any bigger and you’re looking at a slower load time. If you’re looking for something a little more in-depth you can take a look at this article from Google, or this blog from our very own Ally, who takes you through a web developer’s approach (in layman's terms) to image optimisation for the web.
Smaller file sizes can still have a fantastic resolution, so target yourself with reducing file size wherever possible.
Squeezing in the detail
Compression is a great method for optimising images and reducing the file size, without a huge reduction in quality. There are several options for this, in fact, there’s even an option to compress images for AR and VR now with the JPEG XS! The most common compression, and arguably the best for the web is advanced lossy image compression. A testament to its reputation, lossy compression is commonly used in image editing programmes like Photoshop and even online image editors like Canva. Lossy compression can take huge images, drastically lower their file size and barely make a dent in image quality, making them a great choice for those focused on keeping those loading speeds low. There are also lossless options, however, they require to be uncompressed in order to be rendered. When using lossless compression, you won’t get as big of a reduction in file size but your image will look virtually untouched. If you are more concerned with the quality of the image, lossless is the way to go but it may have an impact on loading speed. For a more in-depth exploration of these two options, take a look at this article by Imagify.
Over time you will be able to identify the best process for your website, however, a good option for those starting out is to make use of Photoshop’s ‘save for web’ feature when saving content. This is a great way of optimising content in a really easy and effective way, if you’re a total newbie, we would recommend that!
Keep it dimensional
It may seem like common sense, but, uploading images already resized is a great way of optimising images. On social media, how a post performs, looks and engages people has a lot to do with how the attached image looks, ensuring that it is the right size for the particular newsfeed is an important element to getting great engagement levels. The same goes for optimising images for websites. If you know what size your images should be on your webpage, resize them before uploading. This will remove the need for resizing through your web host and will benefit your loading speed. Try and size the width of your image to align with the width of your website and this will prevent any upscaling or downsizing happening when the images are added to the page, meaning better loading times and no blank spaces as images start to load.
An average computer monitor is around 72dpi or 92dpi, anything smaller than that might end up blurry and anything larger than that is excess resolution that will just slow things down. If you don’t have images with a high enough quality, you can opt to try some royalty free options like Shutterstock, Unsplash, Pixabay, Pikwizard, and Pexels to find content that fits the theme of your website or blog but still looks professional.
Optimising Images: Cheat Sheet
To conclude, we’d like to quickly summarise some key points to keep in mind when you're optimising images for websites:
- Label your images well. Ensure that the caption, file name and alt text are simple, descriptive and include your keyword or phrase to rank favourably with the mystical Google algorithm.
- Resize your images to suit the website or formatting you have in place. This prevents your CMS having to do it for you in order to fit the page, meaning faster loading times.
- Full-screen background images should be no more than 1MB and around 2000 pixels wide.
- Take advantage of the ‘Save for web’ option when it presents itself (i.e. Photoshop), it’s a great way to get the right kind of content with half the faff.
- It’s better to start bigger and downsize than to try and force an image to be bigger. Go for a high-quality image and make the adjustments through resizing and compression to make it perfect for your website
- Lossy vs lossless compression. Lossy is the most common but lossless might be the better fit for you, try them out or research them a little more and pick the right format.
- JPEGs for photos, PNGs for graphics and GIFs for animation.
Hopefully, this quick guide will have given you some crucial information in optimising images for the web. If you’re still a little stuck, get out there and Google it! Research and test options, there’s nothing wrong with learning by trying. If you think we can help you with anything else, from web development to digital marketing, get in touch with us through the form below.