A website without images would be unthinkable in today’s Internet. Not only are images necessary to create beautifully designed web pages, they have been found to drive conversions, social sharing, and user engagement. But the time and resources required to transfer photos, logos, artwork, and even some text to create the full composition of the web page is so intensive that images may seem less like an asset and more like a liability. That’s why image processing is crucial to the success of any digital business—and can mean the difference between whether your users find themselves looking at a crisp, colorful website versus a fragmented page of placeholders or a blank loading screen. This post will cover the basics of image processing by explaining what it is, which factors affect image quality, and how image processing services such as compression, formatting, resizing can improve both the development process and user experience.
What Is Image Processing?
Image processing (also called image optimization) is the process by which original images are encoded in a special way, resulting in a compressed file size for transfer and storage while maintaining the best possible image quality. In addition to compression, image processing solutions may include other manipulations, such as:
- reformatting;
- resizing;
- filtering; and
- caching.
If you’ve ever found yourself waiting impatiently for images to load, seen an image distorted or cut off, or spotted a broken image link in a website, you know firsthand how important image processing is to the user experience. On the business side of things, image processing not only reduces resource use (and as a result, your operating costs), but can automate many of the time-consuming and tedious tasks needed to set up and maintain image storage and delivery, leaving companies more time to focus on their products and services.
What Factors Affect Image Quality?
Bitmap (also known as raster) images are made up of colored pixels that are organized into grids where each color is stored as a binary number. Prior to optimization, the quality of bitmap images on the web is primarily affected by two factors: the number of pixels (or pixel dimensions) and the image’s color depth (also known as bit depth), which is measured in bits per pixel.
Pixel Dimensions
When you think of the quality of an image, you probably think of its resolution, which is measured in pixels per inch (PPI), or dots per inch (DPI) for printed images. “High resolution” implies a crisper image and larger file, while images with a lower resolution look blocky or blurry. But this isn’t the case for images on the web because device screens have their own resolution, resulting in a fixed pixel count. As a result, images on the web will display the same on the same device regardless of their resolution.
Instead, the factor that determines how sharp a web image will look is its pixel dimensions: the length and width of the image as measured in its number of pixels. The bigger the image’s dimensions, the better the image will look. As explained in a blog post from Shutterstock:
“If the dimensions for a photograph are 2000×1500 pixels, the image will look terrific as a banner or as a small photo on the side of your website. However, if you use an image measuring 200×150 pixels, it’ll only look professional in its native, smaller size. Blowing this image up to use as a hero image will result in a grainy, sloppy look that no one who visits your website will appreciate.”
Color Depth
Another important factor in determining digital image quality is color depth, which indicates how many colors are available for each pixel. In a black-and-white image, only two possibilities—1 or 0—exist, resulting in a color depth of 1 bit. Adding light and dark gray to the mix would result in four possible binary numbers (00, 01, 10, and 11) and a color depth of 2 bits. As color depth increases, the range of color grows exponentially higher, allowing for deeper colors and smoother transitions between different colored pixels, as is found in modern DSLR cameras, which have a 24-bit color depth, enabling over 16 million possible colors per pixel.
Quality vs. File Size: A Tradeoff
Not only are pixel dimensions and color depth key indicators of the quality of web images, they are also two of the biggest factors in determining file size. This means that high quality images come at a cost. The crisper and more colorful an image is, the more information it contains, requiring more memory to store it and more time to render it on a user’s screen—especially with a mobile device or slow Internet connection.
This presents a real dilemma for sites like e-commerce, which rely on high-quality photos to accurately showcase their products to customers but must maintain site speed to avoid user abandonment. To avoid this tradeoff, businesses must ensure images are compressed, formatted, and sized for optimal delivery.
Compression
Arguably the most important task of any image processing solution is compression, the process by which image files are reduced to the smallest possible size by rearranging or deleting information. Techniques that reduce file sizes by deleting information are known as lossy compression; methods that do not alter data, but simply rearrange it to package it more efficiently, are considered lossless.
- Lossy methods achieve compression by eliminating pixel data. When decompressed, the reconstructed image is an approximation of the original.
- Lossless methods achieve compression by rearranging information. When decompressed, the file is restored to its original state.
Because lossy compression fundamentally alters the raw data that makes up an image, it prohibits images from being restored to their original state. This enables a bigger reduction in file size than lossless compression, but the larger the reduction, the lower the image quality will be when decompressed. Distortions in the image are a type of compression artifact that can occur when a file is repeatedly saved and edited. While some loss of quality may be tolerable (or even unnoticeable) in certain circumstances, other graphics such as text, logos, medical imaging, or technical drawings, require lossless compression to preserve their original quality.
Reformatting
Different file formats are compressed differently and support different color palettes, transparency levels, and types of images. As a result, it’s incredibly important to choose the correct file format for your image. For example, JPEG allows for a wide color palette and significant compression gains, making it a good fit for photographs, but its lossy compression format is problematic for animation or graphics that require transparency or re-editing. In contrast, the 256 colors supported by GIF would not provide nearly enough gradience for still photographs, making skin tones and other surfaces with subtle transitions between colors look uneven and pixelated.
Finally, while both GIF and PNG support transparency, GIF only supports 1-bit transparency, meaning that each pixel must either be fully transparent or fully opaque. PNG has 8-bit transparency, also known as alpha channel. This enables pixels to have varying levels of opacity, allowing for partially transparent graphics like watermarks.
Some of the most commonly used bitmap file types today include:
- JPEG: a lossy compression format with over 16 million colors, often used for photographs;
- PNG: a lossless compression format that supports 8-bit alpha channel and over 16 million colors, used for transparent graphics and graphics that require re-editing; and
- GIF: a lossless compression format that supports 1-bit transparency, animation, and 256 colors, used for animated images.
- WebP: a new format developed by Google that provides superior lossy and lossless compression, with support for animation and 8-bit alpha channel.
In terms of both compression and flexibility, WebP provides significant advantages over other common image formats. Not only can it support 8-bit alpha channel and animation, Google Developers states that “WebP lossless images are 26% smaller in size compared to PNGs. WebP lossy images are 25-34% smaller than comparable JPEG images.”
While this is great news for developers, WebP is still a new file format, and is not supported by older versions of many browsers. This means that while WebP may provide beautiful and high-performing graphics for some users, others may end up staring at a broken image.
To guard against this, companies must choose between using older file formats or delivering different formats to different browser types. For sites with a lot of images, manually configuring different delivery options for each image is tedious and time-consuming work.
Resizing
Perfectly sizing an image for a webpage can be a challenging task, one that is even more complicated by the wide range of screen resolutions and sizes available today. Delivering an image with small pixel dimensions may be suitable for a small device, but the same image on a device with a larger or higher resolution screen may appear blurry or blocky. Similarly, a wide image that looks great on a desktop computer may need to be cropped for a mobile device to ensure all the details are visible to the user.
Some of the issues that can arise from a one-size-fits-all approach to image sizing are:
- images that occupy too much screen space;
- details that are lost on small screens;
- pixelated or blurry images on large and high-resolution screens;
- wasted bandwidth from delivering large images to mobile users; and
- slow loading speeds from browsers downloading overly large images.
Responsive image technologies solve this problem by allowing developers to offer the browser several different image files that have different numbers of pixels for different screen resolutions (known as resolution switching) or different versions for various layouts and screen orientations. However, manually configuring multiple resolutions and layouts for each photo—or worse, each format of each photo—adds yet another tedious task to site management.
Conclusion
Ensuring that images display correctly on a wide range of devices, browsers, and screen sizes requires intensive configuration and management that can be time consuming and hard to get right. Making sure that those images are not only attractive to users, but also delivered efficiently regardless of network conditions adds even more complexity to the task. Using an image processing service capable of automating these jobs can significantly reduce the operational cost of image optimization.
Azion’s Image Processor lets you automate many of these tasks by designing workflows that perform image optimization without having to manage infrastructure. With Image Processor, you can:
- automatically crop and resize images without managing multiple files;
- reduce image size by an average of 80%, with no loss of visual quality;
- automatically convert images to WebP when browsers are compatible;
- apply watermarks and other filters; and
- monitor bandwidth savings through Real-Time Metrics.
As a result, major international brands such as Lojas Renner trust Azion to reduce their operational tasks, improve performance, and save on infrastructure costs. Azion’s services enabled Renner to handle traffic that peaked at 13,000 requests per second on Black Friday 2019. Their use of Image Processor enabled them to reach mobile users and those with limited bandwidth, improve their SEO performance, and increase organic traffic and sales conversions. For more information, check out the full Success Story here or take a look at the advantages Image Processor can offer.
