The web is full of digital images. It’s difficult to create content without them. A simple still image can be a great way to add context to your writing.
Discover how Kinsta customers are seeing up to a 200% increase in performance.
Learn more>
However, an image can be enormous in file size without optimization. Lossy vs lossless compression is a common consideration because each can reduce the size of an image, although there are quality trade-offs to consider too.
You will almost always need to apply some compression to an image. This keeps the quality at a level you specify as acceptable while keeping file sizes down. Choosing the right compression level will depend on your end goals and requirements.
For this post, we will look at lossy vs lossless compression. Throughout, we’ll talk about the process an image takes to get “into shape,” what compression is, and many other aspects of optimizing your images.
Differences Between Lossy vs Lossless
When it comes to any digital image compressions, there are several different formats to choose from. Sometimes these will have other names depending on many factors. However, at a core level, you’ll find two types:
Lossy compression: The aim here is to provide the smallest file size possible for an image. As such, image quality is often low down the list of priorities.Lossless compression: You’ll still find a substantial reduction in file size with this compression format, but the image won’t suffer from artifacts and other issues.
In most cases, your decision about which format to use will come down to your end goal: Do you want tiny files, or is your focus on preserving quality?
Lossy compression will remove data it deems unnecessary from the image permanently. It uses many different techniques to achieve this, resulting in much tinier file sizes.
Lossless compression also removes data, but it can restore the original if needed. The goal is to keep quality high, yet reduce the file size.
There are a few ways to achieve this, but the result is often the same. To find out the right option for your needs, let’s first take a step back and review the basics of images and compression in general.
Lossy vs lossless compression- which one is right for your images? 
Click to Tweet
Elements of a Digitized Image
Software and web development are similar in that there is often a “stack”, which allows you to transfer an image from your camera to the internet.
A photo starts as “raw data” (hence, the name RAW). This is similar to an app’s source code: The lines, snippets and values are translated into backgrounds with color, image placeholders and dynamic elements.
The RAW file is a slightly different representation of an image depending on the manufacturer, editing software and color space algorithm. You can edit the image from there and export it in one of many file formats (more details later).
loading=”lazy” class=”size-full wp-image-109473″ src=”https://kinsta.com/wp-content/uploads/2021/11/editing-software.png” alt=”An example of editing a RAW file in Capture One, open to an image of two standing blocks of driftwood on a beach at sunset.” width=”1000″ height=”619″ srcset=”https://kinsta.com/wp-content/uploads/2021/11/editing-software.png 1000w, https://kinsta.com/wp-content/uploads/2021/11/editing-software-300×186.png 300w, https://kinsta.com/wp-content/uploads/2021/11/editing-software-768×475.png 768w” sizes=”(max-width: 1000px) 100vw, 1000px”>
Capture One shows you how to edit a RAW file.
A standard digital image can be made up of a few elements:
Type of file: Different types can give you different qualities which may or not be suitable for your final image. The key is to choose the most suitable file type for the application.Resolution: You’ll often see this expressed as megapixels (MP), but you’ll also use pixels per inch (PPI) or dots per inch (DPI). Higher resolutions are better quality but also have a larger file size. Bit depth: This determines the information about the colors in an image. A low bit depth can only render a few colors while a high depth can render millions of colors simultaneously. Higher is generally better. Dimensions: This refers to the amount of physical space that an image occupies. An example of this is 1,000 pixels x 500 pixels. This determines the display of colors. Each color space is different and often it comes down to the preference of the photographer.
All of these elements create a final image with varying quality. A large, high resolution, high-bit depth JPEG image will provide exceptional quality and sharpness.
loading=”lazy” class=”size-full wp-image-109474″ src=”https://kinsta.com/wp-content/uploads/2021/11/high-quality-image.jpg” alt=”An image with high quality, showing the final product of the image shown in the previous screenshot of two standing blocks of driftwood on a beach at sunset, with high color contrast and object definition.” width=”1000″ height=”710″ srcset=”https://kinsta.com/wp-content/uploads/2021/11/high-quality-image.jpg 1000w, https://kinsta.com/wp-content/uploads/2021/11/high-quality-image-300×213.jpg 300w, https://kinsta.com/wp-content/uploads/2021/11/high-quality-image-768×545.jpg 768w” sizes=”(max-width: 1000px) 100vw, 1000px”>
High quality images.
A low resolution image can make even large images look small and difficult to see.
loading=”lazy” class=”size-full wp-image-109480″ src=”https://kinsta.com/wp-content/uploads/2021/11/low-quality-image.jpg” alt=”An image with low quality, showing the same image of driftwood on a beach, but with lower color intensity and object definition.” width=”1000″ height=”710″ srcset=”https://kinsta.com/wp-content/uploads/2021/11/low-quality-image.jpg 1000w, https://kinsta.com/wp-content/uploads/2021/11/low-quality-image-300×213.jpg 300w, https://kinsta.com/wp-content/uploads/2021/11/low-quality-image-768×545.jpg 768w” sizes=”(max-width: 1000px) 100vw, 1000px”>
A low-quality image.
This is how you create the core image before compressing it. The final quality of the image depends on the format used.
How Web Image Optimization Works
Image compression is the same as image optimization in general. You can use standard rules to optimize images for the internet.
These concepts are covered elsewhere on the Kinsta Blog, but we thought it was worth a quick overview for your reference:
72 PPI resolution is recommended as it is the industry standard. For archival purposes, you can use a higher resolution PPI/DPI, but this assumes you are publishing to the internet.
This simple format can provide consistent results. However, compression and optimization are something we will expand on in the remainder of this article.
Let’s now examine the advantages and disadvantages of lossy compression vs. lossless compression.
How Image Compression can help your web images
Compression, in general, is the process of bringing the maximum and minimum values closer together. Compression, for example, increases the volume of music while decreasing the highest. This causes the average volume to be louder for the ear.
Compression is more of an a reduction process for images. This means that compression places more emphasis on removing data from images to reduce file size and maintain high quality.
There are many proprietary algorithms that can be used to reduce the size of image files. These algorithms are often proprietary to a company. There are many compression standards that can be used to compress “lossy” or “lossless”, each with its own descriptors.
loading=”lazy” class=”size-full wp-image-109471″ src=”https://kinsta.com/wp-content/uploads/2021/11/compression-formats.png” alt=’The compressions options within ShortPixel, showing the options to choose a compression level of “Lossy,” “Glossy,” or “Lossless.”‘ width=”1000″ height=”477″ srcset=”https://kinsta.com/wp-content/uploads/2021/11/compression-formats.png 1000w, https://kinsta.com/wp-content/uploads/2021/11/compression-formats-300×143.png 300w, https://kinsta.com/wp-content/uploads/2021/11/compression-formats-768×366.png 768w” sizes=”(max-width: 1000px) 100vw, 1000px”>
ShortPixel offers many compression options.
There are many benefits to image compression, and they aren’t limited to one format.
File sizes can be kept low to improve site performance. You can display quality that is comparable to or near perfect depending on which algorithm you use and what compression quality you select.
Similar to creating a shareable picture, you need to play with different compression values and use a specific company. Also, choosing the right algorithm is crucial in getting results that work.
The pros and cons of lossy compression
Lossy compression reduces an image’s file size almost to the exclusion all other aspects. This algorithm removes data permanently. This can be just as destructive as it sounds.
We won’t go into too many details, but we will mention that some data lossy compression is visible in the image. This is so that the image can be presented as accurately as possible, with a lower weight and better quality. Some data may not make it to the final cut.
There are several benefits to lossy compression in general.
How did we increase our traffic by more than 1000%?
Join over 20,000 others who receive our weekly newsletter, which includes insider WordPress tips.
Subscribe Now
We now come to the negatives of lossy compression. The image quality will decrease with every amount of compression.
loading=”lazy” class=”size-full wp-image-109472″ src=”https://kinsta.com/wp-content/uploads/2021/11/compression-slider.png” alt=’A compression slider for a JPEG image, showing an “Export” dialog with the “Format” set to “JPEG” and the “Quality” bar set to approximately 70%, along with the reduced file size (716 KB).’ width=”1000″ height=”615″ srcset=”https://kinsta.com/wp-content/uploads/2021/11/compression-slider.png 1000w, https://kinsta.com/wp-content/uploads/2021/11/compression-slider-300×185.png 300w, https://kinsta.com/wp-content/uploads/2021/11/compression-slider-768×472.png 768w” sizes=”(max-width: 1000px) 100vw, 1000px”>
A slider to compress a JPEG image.
In some cases, you will see color banding (where color shades don’t render correctly) and loss of edge clarity. This effect will be less evident in images with fewer colors, but it will still occur.
Image degradation is also a permanent result of compression. There is no way to reverse these effects later.
Lossy compression can be a great option for your website and site performance, despite its drawbacks. Although the files are small, grainy images don’t always result.
loading=”lazy” class=”wp-image-109641 size-full” src=”https://kinsta.com/wp-content/uploads/2021/11/over-compressed-cat-min.jpg” alt=”A portrait of a stuffed cat toy, with obvious artifacts of over-compressing, such as banding, un-sharp elements, and degradation.” width=”1000″ height=”950″ srcset=”https://kinsta.com/wp-content/uploads/2021/11/over-compressed-cat-min.jpg 1000w, https://kinsta.com/wp-content/uploads/2021/11/over-compressed-cat-min-300×285.jpg 300w, https://kinsta.com/wp-content/uploads/2021/11/over-compressed-cat-min-768×730.jpg 768w” sizes=”(max-width: 1000px) 100vw, 1000px”>
Here’s an example of a compressed image.
But lossy compression is not the only option. For site owners who are concerned about quality, lossless compression may be an option.
The pros and cons of lossless compression
Lossless compression does exactly what it says: It reduces the file size of an image as little as possible, without affecting its visual quality. It removes image metadata that can occupy too much space.
loading=”lazy” class=”size-full wp-image-109475″ src=”https://kinsta.com/wp-content/uploads/2021/11/image-metadata.png” alt=”A metadata panel with photo details, overlaying an image of a brown squirrel sitting on grass at the base of a tree.” width=”1000″ height=”574″ srcset=”https://kinsta.com/wp-content/uploads/2021/11/image-metadata.png 1000w, https://kinsta.com/wp-content/uploads/2021/11/image-metadata-300×172.png 300w, https://kinsta.com/wp-content/uploads/2021/11/image-metadata-768×441.png 768w” sizes=”(max-width: 1000px) 100vw, 1000px”>
The metadata of an image.
The lossless compression algorithm looks for repeated pixel sequences and then encodes a shortcut that displays them. Take, for example, “Command Line Interface”. You’ll often first define the acronym, then use “CLI”, or your chosen acronym, to refer to it at lightning speed.
In the same way that lossless compression works, it is less destructive. Although the metadata can’t be reversed, some compression can be. This makes it an adaptable algorithm that can be used for many purposes.
Lossless compression has the advantage of retaining quality.
Lossless compression preserves more quality than any other algorithm. This is great for archival purposes. A photographer might want to balance storage with an image that retains the most data. Lossless compression is the best choice for visual arts such as photography, graphic design and digital art. A lossless algorithm combined with the right depth and resolution can produce almost a “one copy”.
It is important to remember that lossless compression only serves a limited number of niches. This decreases its overall availability.
All Kinsta hosting plans come with 24/7 support from our WordPress engineers and developers. Chat with the same team who supports Fortune 500 clients. Take a look at our plans!
These are just a few of the cons to lossless compression that you should consider.
Lossless compression may not be the best way to display images on a website that uses many images. Because you want to display images with smaller file sizes, lossless compression is not the best option. This means that you might only notice a slight reduction in file size, rather than drastic slimming.
Next, we will look at the fastest and most efficient way to do this.
How to choose between Lossy and Lossless
Now you know the difference between lossy compression and lossless compression. You may still not be able to determine which algorithm is best for your site.
Two situations are worth considering:
Lossy compression is fine for most web use cases. However, if you are looking to display photographs or other art, lossless compression is better.
These considerations are based on the use of one of the most common web image formats such as JPEG or PNG. Your compression requirements may be different with modern formats such as HEIC or WebP.
Lossy compression should be your default choice unless you have photography on your website. WordPress automatically compresses images, which shows that lossy compression can be used for almost any application.
Online Compression Service for Optimizing Your Images
There are many options for compressing images before they appear on your website. You might decide to compress images during editing. This could be an after-effect of converting from RAW files.
One of the many online services is a popular option. Each will have a variety of algorithms and a great user interface (UI). Most offer a free trial, so you can try the app before you buy.
Although we cover some options in our article about image optimization, these plugins are WordPress-specific and connect to an API. Many of these plugins also offer an online interface. Take ShortPixel, for example.
loading=”lazy” class=”size-full wp-image-109481″ src=”https://kinsta.com/wp-content/uploads/2021/11/shortpixel-interface.png” alt=’The ShortPixel interface, showing the ShortPixel logo at the top, above the words “Online image compression & optimization: Compress JPG, PNG, and GIF online”.’ width=”1000″ height=”404″ srcset=”https://kinsta.com/wp-content/uploads/2021/11/shortpixel-interface.png 1000w, https://kinsta.com/wp-content/uploads/2021/11/shortpixel-interface-300×121.png 300w, https://kinsta.com/wp-content/uploads/2021/11/shortpixel-interface-768×310.png 768w” sizes=”(max-width: 1000px) 100vw, 1000px”>
The interface to ShortPixel.
Drag images to the uploader and then wait for the app compress them. You’ll need to select the algorithm first as the process will start immediately.
There are two types of lossy compression (Lossy and Glossy) and one lossless option. ShortPixel’s interface is easy to use and explains the differences between each algorithm. You can also download the images in a matter of seconds.
Both can handle your requests, but the Imagify interface is more professional and sleeker than ShortPixel. You can also choose from three compression levels: Normal, Aggressive and Ultra.
loading=”lazy” class=”size-full wp-image-109476″ src=”https://kinsta.com/wp-content/uploads/2021/11/imagify-interface.png” alt=’The Imagify interface, showing a large “Upload” box to the right and options to the left, including selections for “Compression Level” and other “Output Options” like resizing.’ width=”1000″ height=”307″ srcset=”https://kinsta.com/wp-content/uploads/2021/11/imagify-interface.png 1000w, https://kinsta.com/wp-content/uploads/2021/11/imagify-interface-300×92.png 300w, https://kinsta.com/wp-content/uploads/2021/11/imagify-interface-768×236.png 768w” sizes=”(max-width: 1000px) 100vw, 1000px”>
The Imagify interface
Imagify uses lossless compression to start and then moves up to lossy algorithms with heavy artifacts. There are some other options that you won’t find with other solutions.
You can retain the EXIF information for your image and resize it after conversion. This can be very useful, especially when you need to compress images that might remove EXIF data.
Kraken, like its mythical nameake can manipulate your images and apply different types of compression. The Lossy and Lossless options will be preferred by most users.
loading=”lazy” class=”size-full wp-image-109478″ src=”https://kinsta.com/wp-content/uploads/2021/11/kraken-interface.png” alt=’The Kraken interface, showing an ordered list of steps to upload an image, the second of which includes “Lossy” and “Lossless” options.’ width=”1000″ height=”537″ srcset=”https://kinsta.com/wp-content/uploads/2021/11/kraken-interface.png 1000w, https://kinsta.com/wp-content/uploads/2021/11/kraken-interface-300×161.png 300w, https://kinsta.com/wp-content/uploads/2021/11/kraken-interface-768×412.png 768w” sizes=”(max-width: 1000px) 100vw, 1000px”>
The Kraken interface.
There is an Expert mode, however.
loading=”lazy” class=”size-full wp-image-109477″ src=”https://kinsta.com/wp-content/uploads/2021/11/kraken-expert-mode.png” alt=’The Kraken Expert mode options under the “Expert” tab, showing options to resize the image, preserve its metadata, and alter its orientation.’ width=”1000″ height=”327″ srcset=”https://kinsta.com/wp-content/uploads/2021/11/kraken-expert-mode.png 1000w, https://kinsta.com/wp-content/uploads/2021/11/kraken-expert-mode-300×98.png 300w, https://kinsta.com/wp-content/uploads/2021/11/kraken-expert-mode-768×251.png 768w” sizes=”(max-width: 1000px) 100vw, 1000px”>
You have several options for the Kraken Expert mode.
You can adjust the compression level to suit your needs. You can adjust the compression levels of both JPEG or PNG, preserve metadata, and even use chroma subsampling in order to further change the colors.
Summary
Images can appear to be a straightforward aspect of your website: First, you upload a file to WordPress and then add an Image Block.
There are many factors that go into preparing images for the internet. You can affect file size and image quality by choosing the right compression format.
This article has compared lossy and lossless compression, and summarized which one to choose. Lossy compression works well for most web use cases, despite the fact that it is a delicate balance between quality and file size. Lossless compression is recommended for photographers and those who are concerned about the quality of images. However, there are less benefits in terms of file size.
Which side are you on in the fight between lossy compression and lossless compression? We’d love to hear your opinions in the comments below!
Lossy Compression vs Lossless Compression: An Introduction to Both Formats
