Jpeg.io doesn't have any customisation options like image quality or compression. When, as with the Progressive JPEG method, image rendition is a two-stage process in which an initially coarse image snaps into sharp focus, cognitive fluency is inhibited and the brain has to work slightly harder to make sense of what is being displayed Customisation Note, however, that users might prefer baseline images, according to a study, which was later presented at Velocity: It provides a standard way to progressive load images without having to do something as fancy as Medium's technique. Compared to baseline JPGs, progressive ones will render a larger area of the image earlier, though more pixelated. Progressive JPEGsĪnother advantage is that it generates progressive JPGs. Some images were left untouched, while others reduced their size as much as 70% ( before 236kB, after 71kB). Jpeg.io results for some of the images of this blog. I run it through all JPG images on this blog, and I liked seeing that there were savings even though the images had already been optimised:

This site claims to convert any image into a highly Optimized JPEG, so I decided to give it a try. Reading this week's FrontEnd Focus (formerly HTML5 Weekly) newsletter I found out about Jpeg.io. A lossy mode is available and can be enabled from the app's preferences panel. ImageOptim performs a lossless optimisation by default, removing EXIF data and preview images that are not needed. Since I normally have full control on the assets of my projects, I can pass the images through it once and commit them optimised. I'm a big fan of automated tools like ImageOptim. Tobias himself has a script that goes through the whole process of applying SSIM to an image, though you will need to install some libraries to run it. Structural similarity is used for measuring the similarity between two images, which can be applied to our use case. Some time ago I discovered cjpeg-ddsim at a talk by Tobias Baldauf who works at Akamai and has written several tools for optimising images.

We need to find an automated approach that measures how different (or similar) two images are, and loop through several compression levels to find the most suitable one. The same compression level doesn't generate the same amount of artifacts in two different images. Often, we tweak this level by hand until we consider we don't have too many artifacts and the resulting image is close enough to the original one. The size of images in JPG varies a lot based on the compression level we choose when saving them.

Imageoptim exif