Whatever website it is that you are using, it is always key that images are used within the design to help bring your content to life. A simple image can illustrate a point that might need to be made in a paragraphs length of text. So by using images in your content, you are much more likely to keep the user engaged. This post will explain exactly what kind of images you should be using and how they should be optimised for search engines.
Content using images can get up to 94% more views
Choosing the right image to optimize for search engines
Picking unique images that are relevant to your page of content can help you to optimise your images for Search Engine Optimisation (SEO). Relevant images help your readers understand your article by allowing them to visualise what it is that the article is explaining.
For example, if you have a long paragraph of text with the topic of spending, a viewer may get slightly lost or confused in the text. Whereas, if there was an image of a graph next to the piece of content, then it can help the viewers understand what is happening more easily by seeing the change from year to year in spending, rather than reading about it.
Finding the right image is a key step when it comes to optimising them for SEO. This is because SEO will work better if the image is relevant to the subject. In order to find the perfect image, it can be a good idea to use original images that you have taken yourself. This allows you to make it more relevant to the article topic, which will in turn help with the search engine optimisation. Images with related text will rank better for the keyword that you have optimised them for.
JPEG vs. PNG vs. GIF
There are three main types of image files that can be used. Each has their own benefits and negatives, so it is important that you use the correct file for the image being used.
When to use a JPEG file
A Joint Photographic Experts Group (JPEG) is one of the most popularly used forms of an image file. If this is the choice of image file that you are going for, then it is crucial that you save it to your website as the correct size for the page you are uploading it to. This way you can ensure that it isn’t going to slow the website down with its large file size (please note there are additional declarations that can be added to an image tag, so that the browser will be able to show different images for various devices, optimising the usage).
You would typically go to use a JPEG when using photographic imagery, as the format used would be lossy compression (a type of compression which deteriorates the quality of the image to save space). Optimal compression settings on a photo would typically be around 60-70%. If at this point the quality of the image is severely lacking, then you would have to make a trade-off in terms of quality over image size.
As the human eye doesn’t actually pick up all colour details in an image, there is another trick when it comes to compressing the image size even further – by removing data in a colour channel. For example, flattening the detail in the blue channel of an image using the smart blur tool on photoshop helps compress the image by using less colour detail. The quality of the image when viewed will be minimal.
An image like this works well as a JPEG because of the photographic style.
Advantages and disadvantages of a JPEG file
| Advantages of JPEGs | Disadvantages of JPEGs |
|---|---|
| JPEG file format is supported on all browsers and devices | Quality and size work hand in hand with a JPEG file and may often require compromise on one or the other |
| Works well for images using a wide range of colours | JPEG files do not support transparent elements |
| They provide a high-quality image with little compression | JPEGs are not always suitable for graphic images as the lines may not remain ‘clean’, and will often give a ‘feathered’ look as the individual pixels start to show |
When to use a PNG file
Portable Network Graphics (PNG) is another popular image format typically used for graphic style images or those that are using a transparent background. With a PNG that uses a transparent background, you won’t get any feathered edges to the graphic object, meaning that the mask is gradual and clean. Whereas in comparison to GIF transparency, the transparency is generated by defining a colour/colours to make transparent, so there is no gradual blend. This can result in feathered edges. PNGs use lossless compression so they can also hold larger images than that of a JPEG, with no data loss (loss of quality).
Advantages and disadvantages of a PNG file
| Advantages of PNGs | Disadvantages of PNGs |
|---|---|
| PNGs support full transparency, while still maintaining clean lines and gradients | PNG files do not support animation |
| Can be replicated to any background and maintain their quality | Multiple images cannot be stored in one PNG file |
| PNGs use lossless compression, so a PNG won’t go down in quality the more it is saved or compressed | PNGs are larger in size for more photographic imagery than JPEGs |
When to use a GIF file
A GIF file is best used for images that are using a limited number of colours and for those that have a large area of flat colour. They are also used for files where an image may need to appear animated. They have a limit of 256 colours, which is much less than that of a PNG or JPEG. However, you can adapt the image depending on the number of colours used which means that the image can be compressed for the limited colour palette.
An example of an animated GIF.
Advantages and disadvantages of a GIF file
| Advantages of GIFs | Disadvantages of GIFs |
|---|---|
| GIFs support animation | GIFs only support 256 colours |
| They work well for images that use a limited colour palette | They don’t work when a gradient is used as a pixel is either transparent or not – never both |
| Can be compressed well for images that use a large area of flat colour | Animated GIFs can slow down page speed |
Optimizing your selected image for search engines
There are a few factors you need to consider when it comes to optimising your image for search engines:
Optimizing the image file name
Once you have selected the image that you want to use, it’s time to start optimising it. The first thing you need to do is sort out the file name. It is good to focus on key phrases or words mentioned in the article that can optimise the page even ore for search engines.
For example, if the article is about Barristers’ Chambers and you were putting up an image of the Chamber, then the file name be be saved as something like “(chamber name)-barristers-chambers”.
Optimizing image size
The scale of your image can also have an impact on the SEO because it can affect the sites loading time – another factor taken into consideration with page rankings in search engines. To solve this, just make sure that the images are saved are at a good file size prior to uploading to the Content Management System (CMS).
Optimizing alt text
Alt text is very important for SEO as it is used in place of the image for those that might be visually impaired. For example, if someone is blind then their page reader will read the alt text of an image, so they can hear exactly what an image is showing. For that reason, it is key that the alt text is very descriptive of what the image shows.
Alt text should be added to every image that you have on your website. You should embed keywords into the images alt text that you are optimising the article for, in order to help with search engine rankings.
What does Google read from image data?
Google knows exactly what is in an image and is able to work out how that image fits into the larger context. If you have a look at Google images and type in ‘flower‘, it comes up with lots of pictures of flowers, however, above the flowers are lots of different flower names. This means that Google is able to understand what flowers are, the different varieties, and show you the ones that you want to see.
Google does this by looking at lots of different factors, like the names of images and the descriptions that people have given them. Google then links all of this data together to come up with the search for that particular word. The better your image optimisation for search engines, the higher up in the search engines your image will be displayed.
As you can see there are so many easy ways you can get your images optimised for Google. As a form of free traffic to your website, it is definitely something you should be taking advantage of and continuously developing as part of your SEO strategy. Image optimisation should be part of the best practice of any website.
