JPEG Compression: Let’s look at this in a practical way

Check out these two images below. The one on the left is set to JPG 35% quality. The one on the right is set to 55% quality. The overall quality different between 55 and 35 is minimal for the end user. If you were to ask a web designer or a design professional however they could probably catch the artifacts and shift of color tones.

 

left_35right_55

 

I am neither a designer nor an art professional, so I look at these two images from a practical sense – the end user experience.

A good user experience comes from a responsive UI, organized data, and a professional look. Using a higher levels of image compression can give the user a much faster web UI, since we’re able to squeeze the same visual experience within a smaller file size. In the example above, we are able to get a 30% reduction in file size thanks to the higher JPEG compression . This smaller size means a 30% faster download time for users.

I also think about these two images from a business sense – the cost.

From a business cost perspective it makes sense to compress more. Let’s assume you have a popular website that gets 200,000 hits a month (20,000 users who visit 10 times a month). Each time they are downloading a few new images, totaling about 5MB. Those images alone are going to be equal to 1TB of bandwidth per month, and at cheap amazon S3 rates that would be about $120/month. If we can reduce it by ~30% then we would be saving $430 a year. If your site becomes a hit and you now have 1,000,000 views a month, you’ll be very happy that you’re saving about $2,200 a year – and that’s just on those 5MB of images.

Some people argue that internet speeds are getting faster, so we don’t have to worry about these issues anymore, but I disagree. It is true the average person’s internet connection is getting faster, but the image resolution demands are getting greater. In the past having an image that was 800px x 600px would have been sufficient. Now customers are looking for full HD 1920 x 1080 or higher. New computers are coming with monitors with very sharp resolutions, so we need to be thinking about those changes in demands as well. A 800 x 600 is less than 1/4th the size of a full HD image in pixel count, so the base image size is going to be 4x larger for a full HD image.

Bellow you will find 4 images.
Two images are 1920 x 1080. Two images are 800 x 600.
One image is at 60% JPEG quality, while the other image is at 35%.

taiyaki_1920

60% Quality @ 1920px (250Kb)

taiyaki_1920s

35% Quality @ 1920px (115Kb)

taiyaki_800

60% Quality @ 800px (70Kb)

taiyaki_800s

35% Quality @ 800px (33Kb)

The smallest image is about 13% of the file size of the largest image. In both cases the object’s shape is communicated, but one did it using far less data. Finding a balance between data size and effective communication of ideas, including appealing esthetics, is one of those difficulties that will always be under evaluation and a point of argument between me and graphic designers.

Leave a Reply

Your email address will not be published. Required fields are marked *