Whether you run a website, a blog or an ecommerce store image optimization is something you want to learn because it will take you a long way down the line. Images can make or break your site if you do not optimize them properly for quality, size and meta data. It is a very important search engine optimization technique. Images are very vital for your website ranking. I know that you got the image size and the speed part but you must be wondering what the hell is meta data? There is more to to image optimization than just using a jpeg compressor to reduce its size.
Well, the term “meta data” means data about data. So something which is said about the image is the meta data of the image.
Google now uses something called a blended search result. Blended search result is nothing but showing images and videos in its SERPs (Search Engine Result Pages).
If you do a search google for “Ferrari cars speed” then you will see a page which is something like the one below :-
Here you will see there is a mix of images, one video and the rest are text results. Users tend to click more on rich content than plain text. So it might so happen that you site shows up in the first page if you have optimized your images properly for google to read and index.
So now that you know the importance of optimizing your images for search engines let us understand how to optimize your images for search engines.
1. Use of Alt tags
In olden times there were some browsers that could not display images. They were only text based. A few of them are Emacs, EWW and Line Mode Browser. The average speed of internet was very slow and hence these browsers were very useful. Alt tags were very helpful in these browsers. If there was an image that the browser could not render then it would show its Alt tag or “Alternative Text” tag. In this way the user would know what the image was of.
Think of another scenario. Maybe for some reason a browser is not able to display the image. Then it shows the Alt tag of the image so that the image becomes meaningful to the user.
Now the question is how to create a good and search engine optimized alt tag for your image. Well the answer is :-
Write a proper description for the image : E.g. if the image is of a BMW car then you can mention the colour and the model number of the car as well. Look at the image given below :-
What does the image tell you? It is definitely a BMW car but we can also write it is a RED BMW and its model number is 650i. So the whole alt tag would look something like this :-
<img scr=http://www.freelancing-on-net.com/redbmw650i.jpg alt=”Red BMW 650i” />
The advantage of this is your website shows up when one searches for BMW or red BMW or red bmw 650i.
So as you can see alt tags should be rich in keywords but remember not to overuse them. They should be brief and to the point. For example never use an alt tag like “red BMW 650i serial cheap bargain price steal deal”. This is called keyword stuffing and is not an advisable search engine optimization technique. It is known as black hat seo.
If you run an ecommerce business and have a website then alt tags are invaluable. You can incorporate your product name, model number, colour etc. in your alt tags. This will improve your website ranking.
2. EXIF information
EXIF is something like a meta data for images. EXIF stands for Exchangeable Image InFormation. These information are embedded in images so wherever you use the image the EXIF information goes along with it.
Some information embedded in EXIF data are like :-
- What camera was used to take the photograph
- Was flash used to take the photograph
- Datestamp and timestamp
- Image dimensions
- Shutter speed that was used
- Aperture size that was used etc.
There are many more information embedded in EXIF data but it is not relevant in this context.
3. Anchor Text
Just like links to webpages, we can add links to images as well. If we build a lot of anchor texts and point them to the image, the image will rank higher. So if we build a number of links to the image of the car with anchor text “Red BMW 650i” then whenever someone searches for that string or any substring of it our image will show up.
4. Product details and product angles
If you have an ecommerce site then you would want to display the same product in different angles in order to attract potential customers. Now it would be wise to incorporate them in your alt tags. This will work wonders for long tai keyword search.
Let me explain a bit. Some people use a number of keywords to specify their searches. Now these are called long tail keywords For example a person might search for “2016 model red BMW front view”. So if you use an alt tag like this :-
Alt =”2016 model red BMW 650i front view” then your chances of showing up in the search will be even better. Even if the “650i” is not there in the user’s search term still your image is highly probable to show up.
5. Long descriptions
There is one more attribute that is seldom used these days. It was originally created keeping the visually impaired in mind. This is the longdesc attribute.
We can mention an url which has even more detailed description of the image than the alt tag. A typical long description of an image looks something like this :-
<img scr=http://www.freelancing-on-net.com/redbmw650i.jpg alt=”Red BMW 650i” longdesc=”http://www/freelancing-on-net.com/bmwlongdesc.html />
6. Optimize the file size of the Images you use
According to Kissmetrics which is an analytical tool, the website abandonment threshold for desktop/laptop is 3 seconds and that of a mobile device is 5 seconds. In another very interesting study amazon found out that if their pages slowed down by 1 second then they would lose $1.6 billion of business per year. Google also uses page load time as a factor in its ranking algorithm. So now that we know how important page speed is, we have to optimize our images in order to get the best performance from our web pages. It is a known fact that images in a image rich page takes most time to load. So we have to optimize for image size. We generally do this by an image compressor (jpeg compressor or png compressor) but there is more to it.
There are two kinds of sizes of an image file. First is the dimension and the second is how much storage space it occupies. When we optimize images out primary goal would be to have the smallest amount of storage size for a given image without compromising on the image quality. For this purpose you can use free image compressor tools that are available in the web. One such image compressor is http://www.imageoptimizer.net. It compresses jpeg and png.
If you are using a tool like Photoshop then you can use the “Save for Web” feature. Take into account the fact not to compromise on the image quality while using this feature.
If you do not want to pay for buying Photoshop then there is a free and open source image compressors available that has pretty good image editing capabilities. It is called GIMP. It does not have all the features that photoshop has but considering that fact that it is a free tool, you will be surprised with its capabilities.
If you at all want to provide larger images for your viewers then it is always advisable to use the smaller image as a thumbnail when the page loads and associate the thumbnail with a pop up or a link to the original image. This will make your pages load faster yet enable your users to view the high quality / high resolution image if necessary.
Let us now take a look at the common file types used in the internet. Well the most common image file types used on the internet are JPEG, GIF and PNG.
JPEG (Joint Picture Experts Group) images are being used for a long time on the interned and they form the major chunk of images that you view on the web. JPEGs are used so commonly because they are highly compressed files without not much loss in the quality of the images.
GIF (Grpahics Interchange Format) is an 8 bit format and supports a maximum of 256. Due to this limitation their quality is a bit inferior to JPEGs but they have great compression. They are normally used for small animations or decorative items like bullets in a web page.
PNG (Portable Network Graphics) is a raster file graphics format that supports lossless data compression. PNG was actually an improvement on the GIF file format. So PNG is a step above the GIF format.
7. How to manipulate the thumbnails
Thumbnails are an integral part of any ecommerce website. They should be small in size yet good in quality. If they mage quality is not good then sales will suffer. Customers who buy online these days are very sensitive and that only way for them to get a feel of the product is through images. So quality of thumbnails are equally important. There is no point of loading an image at lightning fast speed if it does not serve its purpose.
Generally the category pages take a huge time to load because of the thumbnails. I have already mentioned before that in a very interesting study amazon found out that if their pages slowed down by 1 second then they would lose $1.6 billion of business per year. Now imagine how much revenue you would lose if your pages slowed down because of thumbnails.
So if you would want to strike a balance between speed and quality I would suggest to lean a little bit towards speed. This is because if your pages don’t load fast you lose customers. Also if each thumbnail takes a little bit more time then it creates a domino effect and your total webpage becomes significantly slower. If you want to show high quality images you can do so in the individual product pages. In the product pages you have have 6 to 8 high quality images for your customers to review before they make the purchase.
If you are interested in knowing more about google image sitemaps and how to create them then you can visit this link.
9. Backgrounds, borders and aesthetic images.
We often use borders, backgrounds and other images which enhance a website aesthetically. These images often make the file size of the page pretty large and hence the performance of the page suffers and load time increases. Hence it is always advisable to optimize those images in order to keep their file sizes lean.
After you have reduced the files sizes to the minimum without compromising the quality of the images you can take a few more steps to optimize load times.
Firstly you can use GIF (Graphics Interchange Format) or PNG (Portable Network Graphics) file types to further reduce the file size. These two file types are more compressed than JPEG(Joint Picture Experts Group) file type.
Secondly, if there is a plain border of a particular colour then you might try using CSS Styling to create that border instead of an image. A few lines of CSS code is much smaller in size than an image in any format.
For background images reduce them as much as possible since they generally tend to be bulky in size.
10. Take care while using Content Delivery Networks (CDNs)
First let me explain what a content delivery network is. Let us take the example of images. Since a lot of images make a site slow we store the images separately in another domain of a content delivery network. So when your website is viewed, the textual content comes from your domain but the images are called from the domain of the CDN. This speeds up the website but there is a flip side to this technology.
Since backlinks are very important in SEO there will be a basic problem when someone links back to your images. These links will point to the domain of the CDN and not your domain. So your domain will not get any credit from search engines for these links.
So my suggestion would be not to use a CDN if you don’t have tons of traffic that is actually slowing down your website. You don’t need to use a technology simply because someone else is even if you don’t need it in the first place. So if you get a few thousand visitors per day my advice will be not to use a CDN. Any decent hosting server can handle a few thousand visitors per day.
11. A/B Split testing (for an ecommerce website)
The whole idea of decreasing load time of your website and reducing image size is to increase conversion. Ultimately how many clients are buying from your ecommerce website will determine the success of your website.
It may so happen that providing more product images increases your sales. Maybe customers want to see more images of the product from different angles or providing some lifestyle photos increases your sales. So it is always better to do a A/B split testing in order to find out what works.
You also have to think about the optimum number of product listings per page. Is it 20, 30, 40 products or more? Try a few combinations to find out what works best for your customers.
12. Wrap keyword around
Whether you have an ecommerce website or a blog it is always a good idea to wrap content around images. Try to make the text related to the images. Take care not to spam the page by overuse of any particular keyword. This will hurt your website ranking.
13. Geolocation tagging
If you use a mobile phone to take a photo then modern smartphones embed the geolocation to the photos. Even modern cameras come with this feature. They embed the latitude an longitude of the place where the image was taken. If the image is sensitive in nature they you can remove this data from the EXIF information but if not then you might leave it there. This will increase the chances of your image showing up when the place is searched for.
If you have a brick mortar business and say your business is located in Brooklyn. You might geotag a few relevant images in your website “Brooklyn” and your chances of being found by google for that keyword is increased.
So now you see that there are various other ways of optimizing your images than only alt tags and filenames. Chances are that you are not deploying all these techniques to optimize your images in your website. Any one tactic from these will not have a huge impact on your ranking but when you utilize at least some of them, you shall definitely see results in the long run.
If you know any other tactic which I have not discussed in this post kindly leave a comment in the comment section and I would love to hear from you.
Latest posts by Priyankar (see all)
- 7 secrets you must know about guest blogging - August 11, 2016
- 13 awesome image optimization tips for better search engine ranking - July 20, 2016
- 6 priceless lessons Steve Jobs taught me about Blogging - July 13, 2016