Image Compression with JPEGtran and OptiPNG

Share on FacebookShare on Google+Tweet about this on TwitterShare on LinkedIn

I remember the first time I opened the new Photoshop 7.0 in the computer lab in high school. This is back when there was only one room in the school that had computers, and there was only one computer that had a Photoshop licence.

I booked time on the machine, and cracked open some photos that I took, and wanted to upload them to the school website. I was in yearbook class, and that’s what we were tasked to do. Yes, I was in yearbook class, and yes, I’m a nerd.

Those pictures were way too big from the schools D100, being a whopping 6 megapixels. New in Photoshop 7 was the ability to create a web gallery that would automatically create thumbnails and “web ready” “large” images.

Nowadays, image compression is much more advanced, and thankfully, much easier as well. With Filepicker there are over 18 options to modify images once they have been uploaded – and all these conversion methods are done in the cloud, quickly, and programmatically.

Filepicker uses two key open source libraries to optimize your images: JPEGtran and OptiPNG.

JPEGtran

JPEGtran does lossless compression for JPEGs by optimizing the Huffman tables to increase compression without degrading the quality of the image. It also removes any application specific data that is sometimes unnecessarily inserted by image programs.

OptiPNG

Based on pngcrush, OptiPNG is lossless compression utility which means it’s goal is to have an identical quality image with less file size.

It uses multiple different algorithms with five different filters to reduce the size of the image. Since it has many different configurations, OptiPNG runs various different compression options in memory for speed, and outputs the smallest iteration.

Examples

Below are photos from Startup Stock Photos. We downloaded all the pictures and they came in at 285MB and after using our conversion tools, it’s down to 70MB. Here’s a few examples below:

 

[twentytwenty]


[/twentytwenty]
Original: 2.5Mb Compressed: 203KB 12x Smaller

[twentytwenty]


[/twentytwenty]
Original: 7.4MB Compressed: 833KB 9x Smaller

[twentytwenty]


[/twentytwenty]
Original: 3.9MB Compressed: 557KB 7x Smaller

How to:

Using Filepicker’s Image Compression is actually very simple. You can add /convert?compress=true to any image URL, or use our convert method in the javascript API: {compress: true}

https://www.filestack.com/api/file/zQ97puMYSrqtEgRkRP9k/convert?compress=true

Share on FacebookShare on Google+Tweet about this on TwitterShare on LinkedIn

Read More →