Magic of Image Compression

The bigger size of an image is, the better the quality of this image is. That's a well-known fact, that's logical. But still, you might have notice that when you download FullHD picture, it doesn not occupy hundreds of megabytes. In fact, it's barely one or two hundreds of kilobytes. How is that? Well, it is possible thanks to an image compression.

Since we have a FullHD picture as en example, let's go with it. Quick reminder: "FullHD" stands for 1920 pixels for width and 1080 pixels for height of an image. Wikipedia says, that FullHD picture contains more than 2 million pixels! That's insane amount of little coloured squares!

For some strange reason, quantity of pixels does not affect the size of an image. Or to be more specific: quantity of pixels does not affect the size of an image when pixels are compressed. Lowering the pixels number in order to get better image size and quality? Sounds like magic. How does one achieve this kind of power?

Long talk short - you need Compressman.

Many Ways to Compress an Image

In our previous blog post we discovered that internet users share 3.2 billion images every day. With this large amount of shared visual information, it would not be wise to think that all those files are the same. Different formats, sizes, visualization algorithmes - all of this should be taken in account.

Also, there are different purposes for different images. Some have transparent backgrounds, others have more or less visual detail. There are even images that are moving. So they all have their own visualization algorithm. Some examples are JPG, PNG, GIF, just to name a few file formats. Everyone of them allows image compression, but in different ways. Nevertheless, the final goal is to have the least amount of bytes and the best visual quality possible.

Images continue to be the biggest part of internet content. It is very crucially important for bloggers and users alike to take much more control of their image sizes and quality. You want to deliver a fastest loading possible, responsive site for their users, right? Well, achieving this hot-spot was not a simple task last year; you could automate an ‘ok I guess’ quality most of the time, but for the best savings, you need to test quality levels using your human eye. Now you have Compressman. Nevertheless, in this blog post you will learn a bit of reason, history, and methods to understand and correctly address image compression issues for your website or blog.

So let's talk about different methods of image compression and then find out where and how to do it on our own.

You need to Reduce Your Images' Size

The truth is that large, heavy web pages for sure will take much longer to load in browser. Do you need any proods that web page loading time affect user experience and your revenue?

• Amazon gets a 1 percent drop in revenue for every 100 miliseconds of page load time
• AutoAnything managed to reduce their page load time up to 50%. They got a 13 percent revenue growth
• Even USA presidents care about their pages to load in a moment. Just watch this video:
  

The worst part is that its users who have to pay for you bit uncompressed images to download from your website to their devices. Sure, heavy pages hurt performance for desktop users, too, but the real, the biggest victims of unoptimized page size are mobile users. Not only does just a 1 megabyte page take literally forever to load, it can also deliver a really bad news when you get your phone bill.

Sure, there are a lot of kinda unlimited data plans for mobile internet users. Even most ‘unlimited’ data plans for mobile devices, aren’t truly ‘unlimited free.’ Most of them will charge a bit for access up to 2 GB or so, and passing that amount of limit can cost much, much more money. Not to mention that there’s many areas of the world without these types of ‘all you can eat’ billing data plans, where cost-to-download information is a serious concern for users. Really need a Wi-Fi here.

Image Size Costs You Money - Enough of That!

Folks at AT-T said this:

Mobile data traffic cost problems are severely hindering the use of mobile services on handheld devices today

It was interesting that users try to understand the billing rules even when the carrier does not provide this information. Based on connection indicators, information visible on the phone bill, and previous experience on data traffic billing, people create a perceived billing model that affects their mobile browsing usage patterns.

And guys from mobiforge gave us even more context, putting the entire argument in terms of costs. Have a look here:

AT-T charge as much as $19.97/MB for roaming data in certain countries. Taking some of the examples from Guy's spreadsheet, and using the AT-T roaming tariff, is a peak at 1pictureaday.com really worth $178? Do you really need to visit thenextweb.com for $44 or vogue.co.uk for $65? At $17 microsoft.com is a relative bargain.

As we see, the bigger size of an image is, bigger the problem we have.

Image Compression Needs To Be Done Right

Which content type we use while creating a web page? Fonts, scripts, texts, video stylesheets, HTML.... Which one of them is the heaviest? How do you think? According to HTTPArchive, you guess it, it's images. And this is bad news for mobile device users. With their data plans far from perfect and Wi-Fi not the best one in the world, it might be quiet a pain to visit your favourite web page sometimes, if it is image-heavy. In mobile world, a picture costs a thousand words.

Who's to blame for web page's bad performance? Obviously, there are a lot of issues to be addressed here, but for now let's talk about one of the biggest of them all. Image formatting. Iamge may not be saved with right settings. Image may not be compressed well. Image's size might be too big. Image may have a quality setting way too high can all lead to these images being bloated and oversized really too much which has a direct impact on the loading of your web site and web page.

You should to pick the right compression algorithm to get the best results. This is easily achieved by getting to know what’s going on under the roof.

Types of Image Compression Algorithms

Image compression process is not an instant operation. Generally, it consists from two stages. The first one is called a lossy phase. The second one - a lossless phase. Lossy compression method transforms the source stream. You will lose data, and you will not be able to restore it later, even with decompression operations. Almost all lossy algorithms while being in image compression operation take advantage of how the human visual information perception works, often deleting information that we can’t really see, and in this process, saving bytes.

For example, creating a limit for colors used in a picture; the less amount of colors means there is less data to work with. So, when you save a picture in a format which supports Lossy compression, you’re asked which “quality level” you’d like for the picture, effectively, what you’re choosing is a numeric value which trades file-size for image-quality. Clever web developers realize that there is a nice-spot for images, such that the quality level is high enough, and the file size is low as possible.

After a lossy compressor, a lossless alternative is then applied, so is, the data, as soon as uncompressed, is restored in imitation of it’s specific state, earlier than compression. These are typical compression algorithms so much enable the source circulate in imitation of stand peaceful without delay without some breach about candidness then information. In Images, famous Lossless codecs consist of LZ77, RLE, and Arithmetic encoding. Lossless compression algorithms are the foundation of compression. Often getting out the last percentages of data from your content, always in conflict with information theory to reduce your content sizes.

Image Formats and How to Compress Them

Any image format generally unites together different lossy and lossless methods to get best compression savings. There is a lot of formats supported by many web browsers, each with different features and performance issues. To be honest with you, there is not a “one size to rule them all” format for the web (well, at least for now). Woud not that be great? Well, back to our world. So, different types of pictures must be encoded into different formats. How to choose the right format for each image? Glad you asked. It depends on several things. For example, what type of image it is; what is its purpose; what doesn the browser supports and not; and what issues the web page has.

Well, generally there are three steps that will help you to choose a perfect image format for your needs.

1. Is there any transparancy?
2. Does the picture has any animation?
3. Is there any high-quality info need?

Let's take a closer look at each element.

PNG Compression and Optimization

Let's start with the first issue. PNG is a wll-known and simple image format that supports transparency and even lossless compression. PNG allows you to determine an alpha channel area for your picture, to mask out, to hide transparent areas, and also an option to enable a lossless Deflate compressor on the image's content info. (What is a Deflate? Deflate is a combination of two lossless compressors, LZ77 and Huffman). Because image compression operation is lossless, image quality remains absolutely the same to the source image, to the original. So, this causes issues however, in that the file sizes seems to be quite big, and not as small as they could be, unfortunately.

GIF Compression and Optimization

Let's move to the next one. GIF is another format that supports transparency, or an alpha-channel as some call it, but it also supports animation. The GIF format consists of two stages of compression operation, a lossy palletization step (which mean your image will have 256 colours only), the second one being a lossless LZW compressor. The process of reducing the colors of your picture down to only 256 means quite an high quality size reduction. There are still better compression options, which are capable to get better image compression result.

JPG Compression and Optimization

And now third one. If there is no need for transparency or animation in your image, then JPG is the perfect image format for you. Actually, it has the ultimate purpose to operate the compression of very high quality photo data, but still gives us a manageable list of Lossy compression variations, allowing you to get more of compression quality level vs. image size as your blog or web site needs it.

One Image Compression Tool For Everybody

Finally, if you’re searching for more of a ‘one for them all’ for your image format, then you really should check WebP format. This interesting format has not only superior compression quality and size options, but it also has transparency and even animations as well. All in one, really. WebP format uses both a lossy and lossless compressor methods combo, and just like JPG a-a-a-and Compressman, it will allow you to determine your quality level vs. image file size. Yes, sure, this new image format is not yet supported by all browsers, so web developers and bloggers who have supported it are right now in the first stages of working with some usability issues. Still, WebP has a 30% savings over JPG(!), and also has increased server-side adoption. That proves, that WebP is a dominant format for any sites dealing with image size problems.

OR. You can just check out Compressman, our image compression and optimization superhero. Upload an image, set your own quality level and download a perfectly compressed and optimized picture! Can it be easier than that? No matter what image format you have to compess - JPG, PNG, GIF or Webp - Compressman is here for you.

Thank you for reading!