PageSpeed : Optimize images

Published

Properly formatting and compressing images can save many bytes of data.

Images are the essential parts of a good webpage. but serving non-optimized images can result in a negative feedback from users.


What it means by Optimize Images?


Optimize images means Reducing the file size and make the image progressive to ensure it is loading faster in browsers.

Why Should you optimize Images?


If you are making a graphic from scratch, or you are taking a snap in your cam, you make some edits before you upload it. but most of don't know how to optimize and reduce the size of images or we just dont care about the size.
But when it comes to our site's health, it does matter. loading huge images can result in slow loading of page.
and if a user with slow connection visit the page, can leave as soon as he see such huge images  that takes much time to load.

Solutions to optimize images.

There are many tools available there just to optimize images.
or you can use Photo editors like "Photoshop" and GIMP to make images progressive and optimized.

Here  I list some of cool Image optimizers.


For Windows OS


PageSpeed Image optimizer Command line tool


http://page-speed.googlecode.com/files/pagespeed_optimize_image.exe [Direct Link]

Usage     : pagespeed_optimize_image.exe
Example : pagespeed_optimize_image.exe myimage.png myimage_optimized.png

Adobe PhotoShop.


An article on Making Images progressive - http://aslamise.blogspot.com/2013/07/how-to-make-an-image-progressive-photoshop-tutorial.html

JPEG for windows


http://gnuwin32.sourceforge.net/packages/jpeg.htm

RIOT(Radical Image Optimization Tool) 


http://luci.criosweb.ro/riot/


For Linux OS


Gimp

http://www.gimp.org/


For MAC OS


ImageOptim


http://imageoptim.com/


Online Image optimization Tools


Smush.it


http://www.smushit.com/ysmush.it/


Recommendations.


  • Use PNG if you want trasperacy with image. PNG-8 is the best option than PNG-24 as PNG-24 will be larger in file size.
  • Use JPGs for all photographical images, and for gradient images.
  • Use GIF for much smaller images. (eg:less than 10x10 pixels)
  • Never use BMP or  TIFF images in webpage



Comments

Post a Comment