Understanding Image Quality
While compression remains one of the best ways to optimize your images for speed, it’s essential to understand how optimizing your images will affect image quality.
In this article, we will explore how different image formats handle colors and the effects of image processing on image quality.
We’ll discuss file formats such as PNGs, WebP, JPEG, and more. For an in-depth explanation of each format, read our Guide for Understanding Image Types.
Color Banding
The first type of image degradation we will discuss is Color Banding.
Color banding is the visible result of an image that lacks the tonal range to smoothly represent all the different colors between the darkest and the lightest points of a gradient. This can be observed as a layered difference of colors when a smooth transition is expected.
We’ve designed a demo to showcase color banding across different file types to examine how colors are handled in various image formats. Each of the example images are generated via ImageMagick, an open-source tool imaging tool that’s popular for doing small image tests.
Each image shown below is an original, unprocessed image. You can click the buttons to switch between image types and compare the quality differences between each type.
Loading images...
Experimenting with the demo above, each image format expresses color banding in varying degrees. However, when you click the PNG to view it, it’s clear that the PNG format most accurately displays the transition between dark and light colors.
This is because the PNG file uses a 32-bit color depth, whereas the other files are limited to 24-bit or below. “Bits” refer to the depth of colors stored in an image. The top most common bits are 8-bit (256 colors), 16-bit (65,536 colors) and 32-bit (4,294,967,296 colors) images. The higher the bits, the smoother colors will appear in an image, and the larger an image will be.
We’ll talk about the best approaches to accurately portraying image colors later. The next topic we’ll touch on is image artifacts.
Image Artifacts
We’ll next look at Image Artifacts, a byproduct of image post-processing. We’ve created several derivatives from a single image using our Rendering API to showcase this. We’ve deliberately upsized the picture in this example to make image artifacts easier to see.
Loading images...
This time, you can see a visible difference in sharpness or noise from the original to the image derivative. What you see are image artifacts, the inevitable side-effect of lossy image processing. Artifacts represent changes to an image that do not exist in the original file and commonly appear as blocky or blurred details.
Minimizing Image Artifacts and Color Banding in Image Processing with Imgix
Quality degradation in post-processing is generally unavoidable, especially when compressing and optimizing images for the web. This is because data is always lost or changed when compressing or transforming data (especially lossy images). That considered, it’s possible to minimalize the effects to a degree using several methods.
Use srcsets
An srcset won’t necessarily remove or minimize the number of artifacts in an image or remove color banding. Instead, when implemented correctly, it will reduce the noticeable appearance of artifacts when viewed by a user.
Even if quality is not your primary concern, we always recommend using an srcset for serving images, as this method ensures that the perfectly sized image is displayed at the perfect pixel density per device.
See our Responsive Images with srcsets tutorial for more information.
Use lossless formats
We recommended using PNG files as the original file format when digesting images through any image processor, such as the Rendering API, as there is more general support for the lossless rendering of PNG files.
The term “lossless” means attempts will be made to retain all data during any image processing step. Because of this, even if your output file is not lossless, there is a greater chance of rendering your output file with fewer artifacts.
If you’re using imgix, you can also force the Rendering API to return a lossless format with the parameter lossless=1. This will output a lossless file for supported file types.
Use the quality (q) parameter
When using imgix, you can adjust the output quality of an image by using the q parameter.
Balancing quality with speed
Tuning for image quality will always adversely affect the loading speed of your site. This is especially true when using the lossless or q parameter. When tuning an image for quality, consider the purpose images serve on your website.
If images are the primary content of your website, it may be better to adjust your image quality upwards or to use lossless file types. This is especially important for customers with stock photo or ecommerce sites where photo quality directly impacts user engagement.
Conversely, if images are not the primary content of your website, it may be better to sacrifice quality for better loading speed.
There is no one-size-fits-all solution for all websites, apps, or businesses, so it’s key to experiment with the various combinations of image quality presets to understand what will work best for your use case and your users.
Use 32-bit mode when photo editing
We don’t usually recommend using 32-bit mode when photo editing because of how it will increase the output file size. However, if you save images with mixed transparency, using that image with our Rendering API can create unexpected results compared to what you see in your photo editor. This is because we use 32-bit in our Rendering API, which renders a higher gradient of colors. So, if you experience an issue with color accuracy in transparent images, change your photo editing mode to 32-bit to improve color accuracy.