Skip to main content

Advanced Image Compression Techniques

Tobias Baldauf (Akamai Technologies)
Performance
Grand Ballroom F
Tutorial Please note: to attend, your registration must include Tutorials on Tuesday.
Average rating: ****.
(4.16, 19 ratings)
Slides:   1-PDF 

THIS TUTORIAL HAS REQUIREMENTS AND INSTRUCTIONS LISTED BELOW

Image assets are still a major impediment for page load time. Despite Internet providers promising improved web performance by offering higher bandwidths on both mobile and cable, the physical limitations of connection latency deny significant improvements to website load times beyond 5Mbps client bandwidth.

While new image formats offer improved savings in bytesize, we will be working with common image formats for about another decade. Learning to work around the limitations of existing image formats to improve compression will result in significant performance gains.

We will look at lossy PNG compression and adaptive JPEG compression to reduce bytesize for these common image formats. To ensure visually acceptable results of these advanced techniques, we will discuss how to automatically calculate image SSIM scores and use them to improve compression levels.

A side by side comparison of the newly established formats WebP and JPEG XR and how to serve them to capable clients will bring us to the subject of saliency detection and how neighboring image processing disciplines such as computer vision and machine learning can help us improve compression levels by making our tools smarter in understanding actual image contents.

These advanced compression techniques will enable you to reduce bytesize of all image formats even further and improve the overall user experience and bottom line of your websites and apps.

TUTORIAL REQUIREMENTS AND INSTRUCTIONS FOR ATTENDEES

To participate live in every single demonstration during this workshop, attendees should have the following tools available to them. Please note that it is entirely possible to just listen to the workshop without installing these tools or to only install a subset of the tools to participate only in a specific demo.

List of tools and installation instructions:

* ImageMagick >= version 6.6
""sudo aptitude install imagemagick"" on Ubuntu
""brew install imagemagick —with-libtiff"" on OSX

* JPEGOptim
""sudo aptitude install jpegoptim"" on Ubuntu
""brew install jpegoptim"" on OSX

* JPEGTran
""sudo aptitude install libjpeg-progs"" on Ubuntu
""brew install jpeg-turbo"" on OSX

* JPEGRescan

Perl script executable in user’s $PATH

* Adept Adaptive JPEG Compressor

Bash script executable in user’s $PATH

* MSS Saliency Detector
Manual compilation via ‘make all’. Then put as executable in user’s $PATH. Source here

* WebP
""sudo aptitude install webp"" on Ubuntu
""brew install webp"" on OSX

* JPEG XR
Manual compilation via ‘make’. Then put as executable in user’s $PATH. Source here on OSX

* Pornel’s Mediancut Posterizer
Manual compilation via ‘make all’. Then put as executable in user’s $PATH. Source here

* PNGQuant
Manual compilation via ‘make’ and ‘sudo make install’. Then put as executable in user’s $PATH. Source here

* DSSIM Score Tool
Manual compilation via ‘make’. Then put as executable in user’s $PATH. Source here

To run these tools, attendees of course also need a set of representative images to use the tools with, e.g.. Of course attendees can run the tools on whatever image set they like.

Questions for Tobias? You can reach him via Twitter or by email.

Photo of Tobias Baldauf

Tobias Baldauf

Akamai Technologies

Tobias Baldauf is a web-performance consultant with a passion for full stack web development. He created vital interfaces for European train-operations, tools for the world’s largest peering exchange and gives talks and workshops on web performance.