Compressing an image reduces its file size. Image compression can be either lossy or lossless.
After reading this article you will be able to:
Copy article link
Image compression is a process that makes image files smaller. Image compression most often works either by removing bytes of information from the image, or by using an image compression algorithm to rewrite the image file in a way that takes up less storage space. Compressing an image is an effective way to ensure that the image loads quickly when a user interacts with a website or application. It is an important part of image optimization.
Compressed images load faster than uncompressed images. This matters because the speed at which webpages and applications load has a huge impact on SEO, conversion rates, the user's digital experience, and other crucial metrics. Improving web performance is one of the major ways that developers optimize websites.
Image compression is typically used alongside other methods for improving web performance as well. For instance, a CDN caches content to deliver it more quickly to end users. Load balancing helps prevent web servers from becoming overloaded. The use of lazy loading can allow the most important content of a webpage to load even faster. Overall, however, image compression is often one of the quickest ways of fixing slow page performance.
Consider a traveler packing clothes for a trip. It is possible for the traveler to pack everything in their closet, from shoes to hats to formalwear. But such an approach results in a large amount of luggage that the traveler needs to carry around, slowing them down and perhaps costing more money to transport. Instead, the traveler selects the most important clothing items and packs them into a single suitcase.
Just as our traveler did not need to pack their entire wardrobe, people rarely need to view an entire image in its maximum resolution and largest dimensions. (The most-used desktop screen size is 1680x1050 pixels, and the most-used mobile screen size is even smaller, at 360x800 pixels. Even at those dimensions, it is rare that an image takes up the entire screen.) Usually, an image can be reduced in quality and size in a way that is not noticeable to the typical viewer — an approach that is called "lossy" image compression.
Lossy image compression retains the most significant information for the image without keeping every single pixel. There are several types of lossy compression algorithms, described in more detail below. But all work by removing information from the image file so that the file is comprised of fewer bytes.
Many images hosted on the web are in a file format that uses lossy compression. This ensures the images load quickly and do not use too much bandwidth. Common examples of lossy compression methods include:
If our traveler's desired clothes do not fit in the suitcase, they may try re-folding and rearranging the clothes to make them fit better. Similarly, "lossless" image compression uses mathematical algorithms to rewrite an image file without removing any information. An image treated with lossless compression should appear basically identical to the original, but should have a much smaller file size.
While lossless compression can reduce image file sizes by as much as 40%, it is still less effective than lossy compression for reducing file size and optimizing images for the web. Website builders should carefully consider the needs of their end users and test the speed of their websites when deciding between lossy and lossless image compression.
Widely used lossless compression methods include:
Both lossy and lossless compression methods use various image compression algorithms (an algorithm is a set of rules for a computer to follow) to achieve smaller file sizes. Transform coding, run-length encoding, arithmetic coding, LZW, flate/deflate, and Huffman coding are all examples of image compression algorithms.
Transform coding is a lossy image compression algorithm that often uses a technique called discrete cosine transform (DCT), which is a way to mathematically represent a file using less information. JPEG relies on transform coding.
Run-length encoding (RLE) is a lossless compression algorithm that encodes repeated pixels. For instance, if there are eight white pixels in a row, instead of writing out all eight pixels (like WWWWWWWW), it records the number of pixels (like 8W).
Arithmetic coding is another kind of lossless compression algorithm. Like any digital file, digital images are represented on lower computational levels with a string of characters. Arithmetic coding encodes frequently used characters in an image file with fewer bits and less-used characters with more bits. The result is fewer bits overall compared to the original string of characters.
Huffman coding is somewhat similar to arithmetic encoding, but usually does not reduce file size by quite as much.
LZW — the Lempel–Ziv–Welch algorithm is a lossless compression method based on LZ77 and LZ78, two older compression algorithms.
Flate/deflate is a lossless compression algorithm based on Huffman coding and LZ77 compression.
Cloudflare offers three products for storing, caching, optimizing, and resizing images to ensure they load as quickly as possible:
With these services, website owners can optimize images with a click, convert images to compressed file formats like WebP, and customize which image sizes load for which devices. Learn more about these services in the links above, or get started with a Cloudflare plan here.