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 always true. Images have more info about themselves, which we can not see. In this post, we will tell you about those data, and share tools to optimize images, reduce the size to load websites and blogs faster.
List of factors which make to the final size of images
- Repeating pixels in different frames in case of GIF images
- Metadata information, which is mostly required by photographers, also called 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 that 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 Photoshop and similar tools. They have loads of data of these kinds 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.
Tools to Optimize Images, Reduce Size to load websites faster
I will talk about some of the best tools which are available and can help you reduce the size of images by removing the useless information which I had just talked about above.
1] ImageMagick can be used to improve and convert GIFs to PNG8. It removes not required pallet size from it and works like GIF. It is supported on many browsers also. There is n GUI for this and operates entirely on the command line. Find More
2] Tweak PNG: This is for explicitly tweaking PNG files. It removes Chunk Type, Length, CRC ( checksum), Attributes, and contents. Find More
3] PNGCrush: Another for reducing the size of PNG images. It reduces the size of the PNG IDAT data stream by using various compression levels and the PNG filter methods. Like I said before, it can remove specific chunks, including gAMA, tRNS, iccp, and textual fragments. Find More
4] Jpegtran: This is famous for doing a lossless transformation of image files and Lossless as you don’t lose 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.
5] Smush Pro: It’s an online service that uses most or all of the above tools to reduce the size of images without losing the quality of the photos. 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: It strips 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: It can remove all metadata from JPEGs (currently disabled) and try progressive JPEGs.
- GIFsicle: It can optimize GIF animations by striping repeating pixels in different frames.
The significant advantage of using this is the WordPress Plugin, which can reduce the size of the image as you load and can also reduce the size of existing images. Plugin Link
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. To reduce the size of your images in small chunks and you will see a considerable performance benefit and minimize bandwidth consumption also.