Automating Image Compression And Optimization

Reduce Image File Sizes Without Any Additional Steps

Often, there’s large focus on compressing JavaScript and CSS files in order to reduce file size. While this will continue to be important, these text-based files only make up a small percentage of the average website traffic. Amazingly, we often ignore the largest payload in our web pages: images!

Images are over 60% of an average webpage, and on top of that, the average webpage is more than 1 megabyte and continues to grow. According to GigaOM, the average web page grew by 50% between November 2010 and May 2012. GigaOM also reports that the average page will hit 2MB by 2015. This is all bad news for site owners and mobile users. With new devices and high-resolution displays, such as retina displays, images are only going to increase in file size, causing even more issues for you to manage. But when it comes down to it, speed is essential for a great web experience.

The trouble is that we tend to look at this stuff from our own privileged contexts: tons of bandwidth and ultra-high-resolution screens hot off the assembly lines.

Mat Marquis (@wilto), Responsive Inverview with Tim Kadlec & Mat Marquis

Techniques To Reduce Image File Sizes

Like CSS and JavaScript files, there is often extra data taking space within the file that doesn’t actually need to be there. Images usually contain a good chunk of data we can also safely remove, while maintaining quality images. The two types of image optimization approaches include "Lossless" and "Lossy" compression, each of which perform a handful of techniques to reduce file sizes.

Lossless Optimization

Commonly, image files contain bloat that web browsers don’t need in order to show the exact same image of the same quality--things like embedded thumbnails, comments within the data, meta data about the photo, etc. Each of these can be stripped out without any loss of quality, which is termed "Lossless Optimization."

Lossless optimization can cut out the fat and can save you between 5% to 20% in file size (this is entirely dependant on each individual image, and in some cases can save you more like 70% to 90%). In our opinion, lossless optimization is a must. Just like removing comments and whitespace in your CSS files saves on file size, lossless optimization saves on image file size.

Compare the two files below; then look at their file sizes. They each have the exact same quality, however the optimized image is 17% smaller. Do note however, file size savings will differ for each image, below is only one example.

  • Original Image
  • Original Size: 20,086 bytes
  • Contains EXIF Data
  • Graphic by Everaldo Coelho
  • After Lossless Compression
  • Optimized Size: 16,635 bytes
  • 3,451 bytes removed
  • 17% Reduction

Lossy Optimization

The actual bytes that make up the image data are usually around 80% to 95% (dependent on each image), which is the largest percentage that can be further optimized. A photo editor or graphic designer may worry that their art will be destroyed, but the fact is that many times the image data we’re saving is of higher quality than most users will even notice. The human eye cannot detect subtle color changes, yet we save images with millions of colors and a quality higher than we can see. All of this can be optimized to find that middle ground between the highest possible quality and smaller file sizes.

Study the two images below side by side. While the sharpest and most trained eyes may recognize a difference, you’ll see that they’re practically the same. However, notice the difference in file sizes and the drastic reduction of the optimized image. All of this ultimately improves webpage loading time. Remember, file size savings and output quality will differ for each image, below is only one example.

  • Original Image
  • Original Size: 37,546 bytes
  • Exported From Pixelmator
  • Photo by Henri Camus
  • After Lossy Compression
  • Optimized Size: 21,741 bytes
  • 15,806 bytes removed
  • 42% Reduction

Automate Your Workflows

Photo editors, graphic designers, and content editors shouldn’t have to worry about image optimization. Automating image optimization doesn’t add any additional steps in your workflow process, but it’s one of the easiest ways you can save your organization’s time. However, web developers shouldn’t have to take on the time-consuming task of manually piecing together tools and processes. The best part about our image optimization is that it happens in the background, meaning there are no extra steps you or any member of your team needs to take. You’re not only providing a large benefit to your visitors and network, but you’re also offloading a large amount of time-consuming and difficult-to-configure work.

Heavy Lifting Done in the Background

In order to deliver images quickly to your visitors, sometimes the very first request for an image is not optimized yet. This is largely because it takes a lot of computing power to optimize files, something our powerful, cloud-based servers are happy to do for you (compared to taking on the large processes yourself). After the image has been processed, subsequent visitors will download an optimized version resulting in faster download speeds, and less bandwidth used.

The image optimization is done on the fly, but its dynamic generation is only required once, unlike other services. Subsequent requests for the same image is now an optimized static file and is already placed inside a fast, worldwide content delivery network, in order to get the files closer to your visitors and help your web pages load faster. While the first request may be dynamic, all the requests afterwards become simple, static files, served up by a fast CDN. Win-win.

And before you ask: We always keep original files and save a copy after an optimization, and we never overwrite original data. Additionally, resized and cropped images are always created from the original file, not a copy. Nobody likes a copy of a copy. We do this to ensure we can keep your images at the highest possible quality.

Conclusion

Images are the largest payload of the average webpage, a fact no developer should ignore. As responsive and high-resolution images are being introduced into the web, and web page sizes are continuing to grow, managing assets is becoming more important than ever. With these new challenges come many more headaches for content management and editorial workflows.

Previously, you only had to worry about one image; now, you could have several variations of the same image. Instead of manually creating each image variation and manually optimizing each image variation, the preferred method would be to automate this process. Instead, upload the high-quality images, and let our powerful, cloud-based servers take care of the work, all while taking the burden off of your production servers. Crop, resize, optimize, and automate.


Resources