The JPEG Optimization Guide Web Designers

Image compression can be found in any native media format. However, the difference between GIF, PNG and JPEG lies in the way the information is compressed and displayed on the screen. There are so many tips for composing great image supports published on the web, and yet many designers still do not understand some of the basics.

In this guide, I would like to introduce you to some ideas for the correct JPEG compression. You want to optimize your images in order to reduce site loading times while achieving an adequate level of quality. It’s about finding a balance between the size of the files and the display on the screen. There is no perfect solution for designers.

Don’t skimp on 100%

You should almost never save your JPEG images in 100% quality. This will not produce the best possible “optimized” image. It actually calculates using an optimization limit formula that exorbitantly increases the size of your files. Even compared to 90% or 95% quality, you will see a significant decrease in the file size. In most matters, it is recommended to save images with a quality of less than 90%. When you open the Save for Web dialog box in Photoshop, you will notice that it offers predefined values to choose from.

Compression options

First we should clarify the two terms “compression” and “quality” which are reversed. That is, if you save a JPEG with a compression of 40%, you get a quality of 60% (compared to a maximum quality of 100% without compression). These are the most basic options that you can use – and they should be enough when registering for the web. General users do not come in much deeper adjustments. The subsampling becomes more complicated when you convert RGB images to YCbCr (luminance, chrome blue, chrome red).

The luminance or brightness setting is always kept at the highest possible value during JPEG compression. With this brightness value on a separate channel, it is easier to optimize the individual color values of red and blue.
This is also called chromatic subsampling. Designers interested in getting their hands dirty will be happy to read a little more about this compression algorithm.

As an interesting side note, Adobe Photoshop does not always use subsampling for compression. All images saved in the Save for Web dialog box use only the color subsampling less than 50%.

Different Web Media

The web is also full of different types of image media. You can have photos, icons, buttons, badges and tons of other graphics. But it should be noted that comparing the quality between a button and a photo simply does not make sense. If you are using photos or detailed images, consider linking them to a separate, less compressed JPEG file. Then you can set up thumbnails on your website with a higher compression ratio and much smaller file sizes. The only drawback is that you have to provide two sets of images for a media gallery. Write down the many different graphics that you have created on a website and consider optimization techniques for each of them.

Using the compression tool

You may want to organize the image files that are easy to browse on your site. You can also host your photos on a cloud service such as Amazon S3, Google Cloud Storage or via a CDN that allows a faster deployment of the image. Nevertheless, you should use a compression tool to reduce the size of the image. All the extra bytes that you can remove from the size of each file are crucial. And here are some of the tools that you want to try:

TinyJPG

TinyJPG is a browser-based web application that allows you to upload an image and all unnecessary extra bytes to optimize the file size. It is 100% lossless, which means that the image quality is not affected at all. You can upload up to 20 images of 5 MB at a time. If you are using WordPress for your website. You can use the official Plugin to compress JPEG and PNG images. This plugin also connects to its sister site TinyPNG, which allows you to optimize images in PNG format.

IrfanView

This free software for Windows allows you to display and optimize any set of large images. I especially like this software because it supports batch conversion of images in multiple directories. You can automatically apply the same functions to hundreds of JPEG images. What is even better is the support of the Plugin by third-party developers. One such example is RIOT (Radical Image Optimization Tool). This plugin works for other similar open source graphic editors such as GIMP.

The software support is wonderful and the RIOT features are very easy to use. In addition to image compression, you also have access to the removal of additional metadata such as EXIF and Adobe XMP. These extra bits of data can only contribute to the total size of your file and are rarely needed.

ImageOptim for Mac

If you are running OS X and need a powerful compression application, look no further. ImageOptim is a powerful image compression tool for the web – sometimes even better than Photoshop. The entire application supports drag-and-drop functionality, which makes it easy to optimize large amounts of images. Likewise, you can execute commands directly from the Terminal and configure Shell scripts.