Snap! And half of poorly optimized images are gone.... That would be like a grand finale of image compression life-long mission - to help the Universe with balance of visual quality and file size. Ah, fine let's go to our topic.

So, the world of images is full of formats, terms, fundamental concepts and ideas. Sometimes it looks like it is hard to sort out everything and not get lost in the endless amount of information. So, here are our two words (more like 2k words) about all the basics you need to know in order to make you happy.

If you are a designer, you probably are using image compression tools everyday (we hope that one of those is Compressman - maybe even the only one....). It is essential for printing, very important for web and is larger than life for Tv and film. If there would be no image compression at all, we would be waiting for hours to get website download complete or simply to watch video on YouTube. Amazing outcome, is not it? Definitely not the preferable one.

Almost all design programs nowdats have large and complicated built-in image compression algorithms that separets the decision-making process from designers. Evenso one still would like to have a more clear understanding of how things work and why image compression is so important. It will help ensure the result is precise and recreated according to your desires. Now we will show you all the basic terms, ides and concepts of image compression. Everything that any designer needs to know.

Bitmaps

There are two core types of image: bitmap and vector. Well, there are also fractal images, but this is a topic for whole another conversation. Let's not go there just yet.

So, after working a single day with images, you will learn a simple truth. There is not just image, there is a whole bunch of components that create image working together. So, as we said, there two core types of image: bitmap and vector.

Speaking really shortly and very simply, bitmap images are like a collection of coloured pixels, which when viewed at a great distance appear to be a single smooth image. This is a really good solution. The only "meh" aspect it has is that you won't be able to enlarge your typical bitmap picture still get the same visual quality, smoothness. Your individual pixels will become visible.

Vectors

Now let speak about pixel-problem-vree solution. Vector, or vector-based image, is a mathematical set of coordinates that describs a number of lines, shapes and fills. You can create a vector image of any size, change it without any loss in a visual quality at all. All it does is just applying the co-ordinates at a different scale.

The final result is wonderful - vector images alreadt tool very little amount of storage if you compare them to a bitmap image. Although, vector images are not really the best option for photo-realistic images. That is because a typical photograph has really large, even huge variation in texture and colour tone over a small area. Image compression is vital for bitmap images, vector images do not really need it (although they have their own compression algorithms).

Lossy image compression

Lossy image compression works by discarding information from the original file. What does that mean? There are two basic all-encompassing methods of compressing files: lossy and lossless. We have talked about them before.

Lossy works by throwing away information from the original file. The best result is when you do not even notice that it is gone. This way it saves space as a consequence.

Lossless image compression

So now we do know what lossy image compression is. Let's dive into lossless method. Actually, the name says it all really.

Lossless image compression, in contrast to lossy image compression, keeps all the original data. But there is a cost to pay: the file size is getting much, much bigger. Some examples of lossy file formats (where information is gone and lost) includes JPG, GIF and MP3. And lossless formats include EPS, TIF, PNG and PSD (keep in mind that both PNG and TIF can also be lossy).

Basics of Image Compression

There are a lot of image compression algorithms and every single on of them creates its magic in its own way. All for reducing image size for a bit (or for two or even for more!)

So, we have many image compression methods. How not to get lost in it? They all have their different approach to reducing file size. Let's start with the simplest one. It is called run-length encoding and works by analysing the file bit by bit looking for patterns (we mean literally, examining each and every single and  individual bit of the file - 8 bits in a byte, 1024 bytes in a kilobyte etc in order to find similiar pixels). Here, watch this video for even better understanding of a topic:

So, let's say the analysis has found a pattern - let's say, ten zeros in a row. That means that we can save plenty of storage space. Ot just should be written as 10:0 instead of recording all ten zeros. This kind of type of image compression is lossless, but unfortunately is not very effective in reducing file size. C'est la vie, guys. But worry not - there other, more efficient methods.

JPEG Image Compression

JPEG image compression working methid is really simple - it creates a patchwork of blocks from an image.

This fundamental idea is the same no matter which format you are using. Still, different formats use different systems to process and analyze the file and mark or generate patterns.

Let's look at JPEG image compression for example. It splits the image into a set of blocks. After that it applies compression to each individual block using a discrete cosine transform operation.

This is a pretty sophisticated, complex mathematical process. To say it in a nutshell: all the colour information is removed, along with small changes in brightness. It is also centered on tose areas where the changes will be least visible to the our, human eye. What do we get as a result? Information is pretty much lost, Yup, it is indeed. Although keep in mind that it may not be immediately obvious and noticable at the first sight. You better compare the original to the new, compressed version. If you over-compress using JPEG, the effect is a blocky, all-squary image.

MP3 compression

MP3 compression works pretty much like JPEG image compression does. It deletes information from frequencies that the human ear is more likely not to see or notice in any way. What is the point of keeping that data if we are not able to perceive it?

Audiophiles do not really like MP3 because they do feel that some of the details of an original music piece are lost. That happens because of the process of cutting out these frequencies to keep the better filesize for your storage. And just like them digital artists and designers do not like what that bad boy JPEG does to their images when an algorithm uses high compression settings.

True, both are necessary to make the amount of data while its transfer across the web much, much lesser. It does not matter whether it is assets for a webpage or mobile app, or data for printers.

The GIF format

Way back in the past, in 90s, GIF (Graphic Interchange Format) was a very popular format for web image compression. It still remains just like that today. It is very important to decide upon the type and level of image compression to apply in a correct way. So, sometimes you just need some animation in yor content. That is the right time for GIF format to shine.

The GIF format originates from the late 80s. It has it own limit of a single 8 bits per pixel. This way it restricts the output file to a maximum of no less than 256 colours (let's compare that to JPEG - it nicely supports 8 bits per channel per pixel, by that allowing for complete colour recreation). GIF also does indeed supports binary transparency (a pixel is either transparent or not, ther eis no other way around it; it adds fourth channel to RGB system - alpha channel) as well as several frames of image info. This allows us to create a so called flip-book animation.

GIF Format's Problem

There was a problem with GIF format. It was about a specific compression algorithm you would choose to work with for your image compression processes. Fore example, LZW is a lossless image compression process. The oficial patent belongs to Unisys. That was a company that tried to to exercise their ownership - and do you know how? You will not believe it. They did it by requiring all users of the GIF format to pay for a license. This legal action was a reason for some software vendors to drop support for GIF at all, and kick-started the development of the now popular PNG (Portable Network Graphics) format.

What PNG had to offer was a pretty much better level of image compression than GIF. It also had some additional features such as support for 24bits per pixel (3 channels of 8bit colour for each of Red, Green and Blue, plus a whole 8 bit channel for alpha - allowing all 256 variations of transparency).

PNG does not support several frames in a single file. No animation, sorry y'all. Also we have to mention that there is a whole separate development and its name is APNG. What id does? Nice question - it does support multiple frames, or animation! But, unfortunately, this was rejected as an official licensed extension of the PNG format in 2007. Currently it only has native support of Opera and Gecko-based browsers such as Firefox.

How to choose the right format

step #1
You should make your mind where you will use your. If you are sending an image to print, you will need some high quality format. If you  display to the web, you can pretty much use a lower quality image (which actually means a smaller file size).

step #2

You should make your mind what size your image will be displayed at. Oh, is it for print? Typically images are reproduced at 300 DPI (dots per inch). which means that for every inch of recreation size, you will need at least 300 pixels of information. Let's look at example, a 10" x 8" print will need to be an image at 3000 pixels (10 x 300) by 2400 pixels (8 x 300).

On screen, most images are displayed at 72 DPI. although this is changing with the advance of Retina high pixel density displays. Also, images on screen are shown 1:1 with display pixels, so if you want to show an image at 600 pixels wide, you typically only need to recreate your image with 600 horizontal pixels (not withstanding the retina display complication!)

step #3

Finally, You should make your mind on the most appropriate format for your case and image size requirements:

• Keep in mind that GIF is not the best option for print or photo-quality images. That is because of its pretty limited colour palette. Anyway, it is ideal for line art or animated web images.
• Our ol' friend JPEG is a great fits-all solution in both print and web mediums. But do not forget its a lossy format. What does that mean? It means you should not use JPEG as an archive format. You better save your original image in a lossless format.
• If you need transparency on the web, you have only got two options: GIF or PNG. If you need several levels of transparency, look no further than PNG. But if you just need some pixels to be entirely transparent, GIF may be good option as well.
• For print, TIFF and EPS are both universal formats that can have lossless (and lossy) image compression applied. Which means that if you are in doubt (and if filesize is not too important), choosing one of these two formats will be a reasonably safe play.

Source: Creative Bloq