There is a small myth that I have heard around is only images with higher resolution and more details ONLY make their size bigger. That’s not true always. Images have more info about themselves which we can not see i.e.
- Repeating pixels in different frames in case of GIF images
- Meta data information which is mostly required by photographers also called as EXIF data. The most common image format used by digital cameras and other photographic image capture devices
- Unwanted or Unneeded chunks of PNG images. They are Chunk Type, Length, CRC ( checksum), Attributes and contents.
- Uncompressed JPEG ( Progressive JPEG are better and faster to load )
- A palette PNG (PNG8) is better than GIF
These data might be occupying small size but when considering a web site which loads 20 to 30 images every byte transferred to the end user matters.
Most of the time images created using sci fi tools like Adobe Phototshop and similar tools have loads of data of these kind . After these tools are built for professional usage and not for websites unless you have a photography site or image related site where you need them.
I will talk about some of the best tools which are availble and can help you reducing the size of images by removing the useless information which I had just talked above.
ImageMagick can be used to improve and convert GIFs to PNG8. It removes not required pallete size from it and works like GIF. Its supported on many browsers also. There is n GUI for this and works completly on command line. Find More
Tweak PNG : This is specifically tweaking PNG files. It removes Chunk Type, Length, CRC ( checksum), Attributes and contents. Find More
PNGCrush : Another for reducing the size of PNG images. It reduces the the size of the PNG IDAT data stream by using various compression levels and PNG filter methods. Like I said before it can remove certain chunks including gAMA, tRNS, iccp, and textual chunks. Find More
Jpegtran : This is famous for doing a loss less transformation of image files and Loss less as you don’t loose the quality of images.
The reason there is no quality loss because it works by rearranging the compressed data (DCT coefficients), without ever fully decoding the image. It converts baseline JPEG to progressive JPEG or vice versa. Read More
Now coming to the ultimate tool which became the inspiration for this article is Smush IT.
Smush IT : Is an online service which uses most or all of the above tools to reduce the size of images without loosing the quality of the images. Works on GIF to PNG, Jpeg Size reduction, Tweaking the PNG. All in one. In their own words
- ImageMagick to identify the image type and to convert GIFs to PNG.
- pngcrush to strip unneeded chunks from PNGs. We’re currently experimenting with other PNG tools such as pngout, optipng, pngrewrite that will allow for even better png optimization.
- jpegtran to strip all meta data from JPEGs (currently disabled) and try progressive JPEGs.
- gifsicle to optimize GIF animations by striping repeating pixels in different frames.
The major advantage of using this is
- Simple to use web interface [ Link ] You can reduce Images size in batch if you give a direct url or upload from computer.
- Firefox extension which allows you to reduce size of images in any web page and download it. FF Extension
- WordPress Plugin which can reduce the size of image as you load and can also reduce size of existing images . Plugin Link
- And it uses all the technology available to improve performance to max.
I have already started using the FF extension and it has really reduced the image sizes to acceptable amount. Our site uses more of images in every post and lot of GIF images sometimes. This makes the load of images slow sometimes. But with this We can do it faster.
We are also planning to use SmushIT wordpress plugin after a couple of testing ( We are more interested on improving GIF performance ) and will update on this soon.
That’s all from our side, small tools and plugins which are useful because every byte counts and every second a user waiting is not good. So just reduce the size of your images in small chunks and you will see a huge performance benifit and reduce bandwidth consumption also.