up

Zoompf's Web Performance Blog

Note: Archived Content

This is the archived version of the Zoompf blog. Since our acquisition by Rigor, all our new research and posts on web performance are being published on The Rigor Blog

Improve Performance with the 2 types of Image Optimization

 Zoompf Performance on April 27, 2015. Category: Mobile, Optimization

There are many ways and means to improve performance of your web site. We highly recommend that you build every appropriate method into your web site application building process, rather than checking performance just prior to deployment and then making tweaks. One of the simplest methods of improving performance is optimizing the images that appear on your web properties.

There are two main ways of optimizing web images: lossless and lossy. The visual differences are negligible and very few humans can tell the difference with the naked eye. However, the size differences are big, significant, and important to the performance of each page of your web site. When you are optimizing images for web performance, remember that the goal is to make images smaller so they download to the user’s device faster.

Let’s have a quick look at the basics of each type of image optimization.

Lossless Optimizations

As its name should reflect, lossless image optimizations are optimizations that make an image smaller in size while preserving the fidelity of the content. In other words, the original and losslessly optimized images are pixel-perfect copies of each other, the file is just smaller. This happens because lossless optimizations remove the cruft inside the image file that has nothing to do with rendering the image. Things like timestamps, GPS coordinates, shutter and aperture settings, unused color palette entries, embedded thumbnails, or other meta data. his data is not needed to present a beautiful image to your web or mobile user, so the data is stripped off of the image and can be removed, giving you a 15 – 20% reduction in the size of each image, on average. If your website is image heavy, that 15% on each image can add up quickly.

Lossy Optimizations

Lossy optimizations, by contrast, do actually modify or discard some of the non-critical pixel data contained in an image file to reduce it size. This can lead to significant reductions in side, usually in the range of 70-80% reduction. But how can we discard or cahnge the graphics data in the image and still have an image that looks good? After all, your designer worked hard to create those images!

Because of the way the human eye works, especially when viewing millions of pixels on a backlit screen, there are tricks we can do to create smaller images without anyone noticing. Another optimization is to make sure you are using the correct file format for the image (for example, using JPEG for photographic data instead of PNG). By doing this your web site or web app will load faster, and the difference in the quality of the images will rarely be noticeable. Let’s see an example:

rose-301406_640  rose-25

Can you tell the difference between these two images above? The image on the left is 984k. The image on the right is 48k, a 95% difference in size on the server. Obviously, the image on the right will load much faster on your web or mobile app. Lossy image optimization has a lot of nuance, so see our presentation with tips and guidelines for optimizing images intelligently.

Why Optimize?

Loading faster, especially on mobile devices in a mobile friendly manner is becoming increasingly important. Google has announced a mobile-friendly algorithm for their search engine ranking will be released this month, making your web app’s performance even more important as the world moves further towards mobile only devices and development.

Optimizing images for a better user experience on both desktop and mobile platforms should be part of your development process as you design for performance. Whether you use lossless or lossy optimization as an engineering and a design decision, these optimizations should be done early in the process and with the end user’s experience in mind.

Interested in web performance topics like image optimization? Than you will love Zoompf. Our free performance report will examine your site for over 400 performance issues. You can also stay on top of your website performance by joining the free Zoompf Alerts beta to automatically scan your website every day and get alerted when we detect one of the common causes of slow website performance.

Comments

Have some thoughts, a comment, or some feedback? Talk to us on Twitter @zoompf or use our contact us form.