In this post I tried to provide you few image optimization tips and techniques that could help you to optimize your website’s images to increase your website traffic. And how Not optimizded images can lead you to less sales and traffic, Why Image optimization help you in Search Engine Optimization (SEO).
Image Optimization & SEO
In the early days of Internet Image Optimization was a very important part for the webmasters. As you know we didn't have super fast internet connection or broadband in the past, So many webmaster used to avoid placing heavy or High resolution images on the websites. But even today many of us think the same thing and optimize our images by using free tools. Image Optimization Tools provide you ability to re-size images or make them small to load faster without loosing the image quality.
Note: Always keep in mind that we optimize images to make them small in size not the quality.
Why do we optimize our images?
We optimize our images to maintain good user-experience and speed-up our websites or blogs. As you must read it before that 80% visitors bounce because of slow speed and the never visit that websites that don't load within 8 seconds. So be careful never ignore the speed and the user-experience.
1. Slower means less traffic and sales:
500 ms slower = 20% drop in traffic (Google)
400 ms slower = 5-9% in full-page traffic (Yahoo)
100 ms slower = 1% in sales (Amazon)
2. Web has a lot of images:
On average, 45,6% of page weight is images
(Based on the top 10 websites, e.g. Google, Yahoo, YouTube, etc.).
Find image optimization tools on Google these tools are easily available on the web, and you don't have to pay money 😉
Top 5 Image Optimization Tips and Techniques for SEO Purpose
These are few tips and SEO Techniques for image optimization that i always apply and get results.
1. Use the HTML img-tag
Always add height and width to the image
Always add an Alt-attribute to the IMG-tag
Always add a Title-attribute to the IMG-tag
The Alt text and the image title
We add Alt-tags to provide short descriptions about the images, thus Alt Text is to provide information when image cannot be displayed. We also provide information about the image in Image-Title, I Put my keywords in Image-Title so Search Engines can easily determine its value 😉
Additional information to make you understand:
We add Alt-tags to provide accessibility and mobile usage. Some people switch off the Display images options in the browser, So even in this case your visitors easily understand that what the image is about.
Alt-text helps you in Search Engine Optimization (SEO), If you link your image to other website Alt-text will be your anchor-text of the image.
Put important information in your title text, Title-text helps you in SEO and it will be shown as tool-tip on the many browsers.
2. The height- and width-attributes of an image
Adding height and width is important for faster loading. When you define the height and width of an image, browser can continue loading the rest of the page, while "filling" the space defined with height and width with the actual image. This is essential for speed when you have images on a webpage.
Using all the attributes of the img-tag
The end result of a good img-tag, using all the attributes, would look something like this:
<img src="descriptive-image-name.jpg" width="200" height="150" alt="img-tag example" title="Good example of a proper img-tag usage" />
3. Avoid Image Re-Sizing By HTML
Re-sizing image using HTML to keep it fit for your content is the easiest way but it effects your performance badly, you also loose Image Quality. Instead of using HTML Re-sizing create separate files for different sizes of your image.
4. Link the image
Visitors like to click on image. Unless you specifically don't want people to click links on the page you post the image to, make the image a link.
If you have got a bigger or full version of the image uploaded yet, link to that from the smaller image.
If the aim of the page is to create peoples click a link, e.g. to shop for a product via review you posted, link the image to the target page.
As a bonus tip for sales letters or sales pages, attempt adding a screenshot-image of the searching cart below the "Add to cart" -button, showing what successive page (the shopping cart) can appear as if and link that image to the cart yet.
As mentioned within the initial tip, the Alt-text are equivalent for anchor-text during a traditional link for SEO Purpose (in addition to the Alt-attribute being vital for accessibility as well).
5. Make image optimization a habit
Optimize all the images you upload and use on the web, whether or not the image goes to your own blog or another web site. Use tools to automate the image optimization process.
When you make it a habit to optimize images for each SEO and speed, you'll use little or no time to optimize images, however reap the rewards as long because the image is on-line for the Years. Most impact, minimum effort – simply the approach I prefer it.