Boost Bloggers is A Blog for Entrepreneurs and Bloggers, we give SEO tips, Growth hacking techniques, Blogging tips, Affiliate marketing tactics and much more

Sunday, 2 July 2017

Complete guide on image optimization

No matter how much attractive your writing is, No matter how long the post is, One thing that easily grabs the user attention is Images!! Using good quality and highly optimized images is key to attract both users as well as search engines.

A picture is worth a thousand words




Whenever a SEO analyst get a client's request to search engine optimize the site, the first thing they do is to check how much the site is optimized by making use of several tools, I have analysed hundreds of sites which includes popular sites like shoutmeloud.com too, One thing i have observed is most of the sites which rank in first 5 positions for any query are image optimized, In other words image optimization is one of the major part of onpage seo, Today let us know how to optimize images of a site. 

  1. The first part of image optimization is to use non copyright protected images, Many bloggers usually ignore this, but believe me  if your site uses non copy right protected images, your site is not only safe from google penalty but also improves the search engine rankings of the site.
Google currently do not let the users know which of the images are copy right protected and which are not, So using google images in your blog articles may not be safe, So we tell you the sites in which you can find, download for free to use in blog posts.

Free range provides users free images to use personally or in websites, The images are either captured by their talented community of photographers or uploaded by other photographers.

Features
  • Allows users to download images in full, medium and small sizes, The best thing about free range is that most of the images downloaded in medium and small sizes will lie in 10-100KB and there is no need to use other compression tools to compress the images.
  • Users need to signup to the site to download the images.
  • Photographers can upload images and get adsense revenue share if a user clicks on an add attached to that image.

All images and videos on pixabay are free of copyrights under Creative commons cco. Its one of the best sites to download high quality images.

The images are of high quality and can be downloaded in original, large, medium and small sizes.


Other sites to consider are: UnsplashPexelsFlickr

  2. The second part is optimizing the images
Size of the images can be reduced by two ways, looseless compression and lossy compression, 
  • Losseless compression is compressing the image without reducing the size, there will be no visual difference in image before and after compression, 
  • Lossy compression is reducing the actual size of the images, Images optimized through lossy compression method look different than actual images.
There are many sites on internet for optimizing the images, The best ones among them are 

Tiny png uses looseless compression techniques to reduce size of images, You can upload upto 20 images of upto 5MB Images each at one time, Tiny png uses Quantization technique to reduce images.

Each pixel of an image is represnted in RGB ( red , green, blue) format, in which 8 bits is used to represent each colour, a combination of red, green and blue colours is used to represent a pixel, so 24 bits is needed for each pixel, Quantization is the process of reducing the number of bytes to represent an image in such a way that the difference is not visible to human eye.

Tinypng also has a Premium version for drag and drop interface and support for images of size larger than 5MB.

We uploaded an image of size 4.8MB, and tinypng compressed it to 2.25MB without reducing the dimension of the image.

There is also a Tiny Png wordpress plugin


Optimizilla is another image compression site, optimizilla also uses both lossless and lossy compression techniques to reduce the size of the image. Make use of only losseless compression and download the image.

We uploaded the same image and optimizilla compresses it to 2.29MB by its lossless compression technique, we didn't use the lossy compression technique of optimizilla as we didn't like it.

Unlike Tinypng there's no limit on the size of the image.


This site is not suitable to compress large images, but when it comes to images smaller than 50Kb, no software can do better than this tool.

While lossless compression is cool, but lossless compression alone could not reduce an image much, that's why post lossless compression, lossy compression is used to further reduce the size of the image, The best tool used available in internet for lossy compression is image optimizer.

You can select both the quality as well as the resolution to which the image is to be compressed.

We uploaded the compressed image from tiny png which was 2.25MB , when we set resolution to 512*512 and quality to normal, the output image was of just 233Kb, ofcourse 233kB is too large to be used in blog posts, you can reduce it further if you want, But compressing an image from 4.8Mb to 233 Kb without losing its quality is really cool.


Wondering how Google page speed insights can help in image optimization? Just enter your site's url and observe the results, at the bottom of the page you'll find a link to download optimized images, js and css files.

Google page speed insights



While you couldn't really get css and js optimizations for every site, but you can get fully compressed images.

Some of these images will be in right size and can easily replace the original image without much change, but some images are reduced to tiny sizes which cannot be used. By replacing the original image with the compressed image , the image optimization problem will be solved.

When you use any third party services make sure the images used by it in your site is rightly optimized. It is better to not include images in gadgets like Facebook, Google pages in your blog. When you use Facebook page plugin make sure that you're not using show friends faces option, it requests around 10 images from Facebook server, which slows down your site. and the images are also not optimized.

 3. The third part of image optimization is including the attributes of images.


  • As of now search engines crawlers could not analyse the image properly, it couldn't even get the text written in the image, so image alternate or image alt attribute is necessary to tell the search engine crawlers what the image is all about. The alt attribute shows up in place of the image when browser fails to load the image. If the image is a meme or quotes or troll, the text should be written as alt attribute, otherwise a sentence describing the image can be included as alt attribute. It is wise to hide keywords in alt attributes.
  • The title, caption and the name of the image file should also indicate the contents of the image.
That's it!!

8 comments:

  1. Great tips. I especially appreciate the Google Page Speed Insights tip. I never realized that could be a source of optimized images. As a web designer, I look for different ways to optimize images as I know how important it is to page speed.

    ReplyDelete
  2. Very useful info. I use Smush for my WP site but I will look into the programs for uploading compressed images.

    ReplyDelete
    Replies
    1. Thanks Gallian, I will be writing an article on WordPress image optimization soon

      Delete
  3. Thank you for the great advice. This is very useful, especially as a food blogger!

    -Sarah
    www.myfrostedlife.com

    ReplyDelete
  4. Great advice! Thanks so much for sharing!

    ReplyDelete

All comments will be moderated before it's displayed, so don't include hyperlinks in comments