The smaller an image file size is, the better. Get that wrong and your page will load more slowly, your users will leave more quickly, your site SEO will suffer and the site’s carbon footprint will tread more heavily. Anyone posting images to the web engages with image file compression at some point.
I hope that the days when people uploaded unprocessed image files to their sites are long gone. Way back in February 1999 Adobe added a Save for Web feature to Photoshop 5.5. This shelled out to their Image Ready helper utility and the compression functions that were employed there were fully integrated into later versions of Photoshop. It’s still there now, hanging around as Save for Web/Devices or as part of the Export functions. It does a fine job of compressing images that you display on your site.
I still use it and I’ve also recently found an even better way of compressing web images. It’s called JPEGmini Pro. It comes in two formats: a standalone app for Windows or iOS, or as a suite that includes the desktop app and Photoshop, Lightroom and Capture One plug-ins.
There are separate server modules for developers which can be addressed through a command line or integrated into an existing image-processing workflow. These come on a subscription basis. You can opt into the use of a web uploader and a mobile SDK.
Reducing image file size
I’ve been using the standalone application on Windows and enjoying some very interesting results. The interface is minimal, as are configurable options. You can choose to have JPEGmini re-compress files and then overwrite the original versions or to save them to a different destination of your choice. You can drag files to be compressed onto its interface or you can select them from a standard file-select dialog. That’s it. As files are re-compressed the app slides a miniaturised version of each into its interface and various counters are incremented: the number of photos processed, the total file size processed and the percentage of file size reduction attained during the current run and an accumulated file size reduction attained since the app was first used. That’s it. And it’s blisteringly fast.
I’ve run this on image files that I have already pre-processed in Photoshop using the Save for Web feature. I usually save jpeg files as Progressive jpegs to the sRGB colour space. I’ve settled on a 75% quality setting which I dip beneath for extra-large files that require a bit more compression. Sometimes I check the visual result but typically these settings work well enough. This has always made a dramatic shrinkage in file size. I now use JPEGmini on top of these files, post-processing them once more for an even more dramatic reduction in file size.
|Total number of files re-compressed:||2,607|
|Total size of files before re-compression with JPEGmini:||925 Mb|
|Total size of files after re-compression with JPEGmini:||640 Mb|
|Total disk space saved after re-compression with JPEGmini:||285 Mb|
|Percentage of file size saved after re-compression:||30.81%|
Reducing image file size without affecting their perceptual quality
And because size isn’t everything with images, we need to look closely at image quality. The publishers of JPEGmini say the following about that:
JPEGmini is a patented photo recompression technology, which significantly reduces the size of photographs without affecting their perceptual quality.
JPEGmini is capable of reducing the file size of standard JPEG photos by up to 80% (5X), while the resulting photos are visually identical to the original photos. The JPEGmini algorithm imitates the perceptual qualities of the human visual system, ensuring that each photo is compressed to the maximum extent possible by removing redundancies, without creating any visual artifacts in the process.
I back that up: I was completely unable to see any visible difference between the files that I compressed with Photoshop and these same ones after I had re-compressed them with JPEGmini.
Example image files compressed
Below are two pairs of files shown side-by-side. Use the blue circle slider to see if you can view any differences between them.
For the first pair, on the left is a jpeg that has been downsampled to 72dpi in Photoshop, then exported with Save As to produce a file that is 647 kb in size. On the right is that same file compressed by Photoshop using its native Save for Web function. The resulting file size is 275 kb. I have increased this image’s visible lightness to help you see that you are viewing two files.
For the second pair, below, on the left is the 275 kb jpeg from above which was compressed by Photoshop using its native Save for Web function. The resulting file size is 275 kb. I have removed the lightness added to it above. On the right is that file subsequently re-compressed by JPEGmini which resulted in a 199 kb file, again with added lightness so that you can see there really are two different files in there. This is a further reduction in file size of around 27%. I see no visibly discernable difference between these files — excepting the lightening that I’ve applied to the re-compressed one.
Clearly, the biggest saving comes from using Photoshop’s native Save for Web function. But what’s also clear is that you can then re-compress an image using JPEGmini for further file size reductions with no apparent loss of visible quality.
Just for interest, you can run JPEGmini on jpegs that haven’t been through Photoshop’s Save for Web export function. Using the larger one of the first pair above, I compressed that down to 230 kb in one jump, which is an improvement on what Photoshop can do alone. But the takeaway here is that for best performance you use JPEGmini on files that have already been compressed by Photoshop. Given that JPEGmini can run through thousands of images at a time, this extra step in your workflow is not excessive.
Measuring other advantages of JPEGmini file re-compression
One of the resources I use to run checks on the speeds at which web pages load is Web Page Test. This takes a snapshot of page load behaviour so that I can see if and where bottlenecks may lurk. As part of their final report of an individual page’s characteristics, they have a neat summary of various factors, colour-coded in A — F icons. One of these is the degree to which images are compressed. I aim for all their scores to be given an A score, but getting an A for their image compression score has been tricky.
Since I’ve been using JPEGmini, I’ve found that pages are more easily getting a full set of A scores. That difficult image compression score has therefore clunked up from B to A.
I’m usually reluctant to hand over a particular element of my workflow to an automated process. I’ve always maintained a hands-on approach when quality control is involved. What I have learned with JPEGmini is that it is consistently capable of reducing image file size without impacting upon the visble quality of the images that it works on. That it can do this in batches with appetite, speed and accuracy is most welcome.
For more information about this product, visit https://www.jpegmini.com/.
Years ago when I was writing software for a research project at the University of Sussex, I worked with a product called ColorBox which was produced by Iterated Systems Inc. It was an SDK for Windows which enabled the fractal compression of jpegs that resulted in FIF image files (Fractal Image Format). It was slow and required a DLL to be used for decoding and displaying the resulting files. File size reduction was dramatic which was important when releasing software on CD-ROM. It was an impressive system in that fractally-encoded images were resolution independent: images were sharpened by adding random detail on higher resolution screens. The down side was in it requiring a sidecar DLL, effectively hobbling images to having a single use. The hoops we jump through! More information on this can be found on Wikipedia’s page on fractal compression.