Image Compressors and Image Compression

I am a web designer and a web developer. That’s why I’d love to make sure websites load fast. One way to do this is through compression of images using tools like an image compressor. What exactly is image compression and what is a great tool for doing it?

~Web Developer/ Web Designer

Part I: IntroductionPart II: Lossy V.S. Lossless CompressionPart III: Various Type Of FilesPart IV: Selecting The Right File FormatPart V: Print Design And Image CompressionPart VI: Advantages And Disadvantages Of Image CompressionPart VII: Image Compressor ToolPart VIII: Conclusion

Part I: Introduction

When you properly implement image compression it can lead to great results in the size and appearance of different image files. Image compression is usually misunderstood. Sometimes, this is because people don’t know what different compression types are actually better used for.

If you are not wary of which compression type to utilize for a variety of image types, you will end up with these two: First, images will look less good as they used to be. Second, the size of the image file will be larger after compression has taken place.

Everything you want to know about compression of images especially when it comes to web design is included below. We will cover a variety of topics including the difference between lossy and lossless compression. We will also cover various types of files and the techniques of compression used for them. We will also give you guidelines on which formats of files are best used for different types of images. Plus, we will give you the advantages and disadvantages of image compression. Finally, we will give you a tip as to which tool to used to compress images. Let’s get started.

Part II: Lossy V.S. Lossless Compression

A lot of people think that it is a must for them to utilize image formats that is of lossless compression. This type of compression is usually great for a lot of image types. However, lossless compression is not the best type out there for some formats too.

With lossless compression of images, preservation of data from the actual original file is done. On the other hand, lossy compression removes part of the data from the actual original file. It saves the image in a format that is of reduced size compared to the original. You, the designer, can actually set up the compression rate of the image allowing you to make a decision with regards to the amount of data you want to disregard.

Lossless Compression

In order to do lossless compression, a few methods can be utilized. Run-length encoding is best for BMP files. With this type of lossless compression, runs of data (referring to data elements that are consecutive and have identical values) are taken and are put into storage within a single value of data and count. This type of lossless compression is best for image files that are very simple and has a lot of data elements that are identical.

Another method of lossless compression is DEFLATE. This is best utilized for images of the PNG format. It utilizes Huffman coding and LZ77 algorithm together. DEFLATE is also utilized for gzip compression and ZIP compression as well.

LZW Compression, an abbreviation of Lempel-Ziv-Welch, is another algorithm for lossless compression. It is mostly utilized for TIFF and GIF file formats. This type of lossless compression executes data analysis in a limited way.

Lossy Compression

Multiple methods for lossy compression are available. Some are even put into combination with lossless techniques in order to reduce a file’s size significantly. One method of lossy compression involves the reduction of the color space of the image towards the colors that are most common within the said image. Most often, this method is utilized in GIF file formats.

However, they are sometimes utilized within PNG formats as well in order to lead to a significantly reduce file size. When this method of lossy compression is utilized in the right image types in combination with dithering, it leads to images that are almost identical with that of the original file.

Transform encoding is one encoding type utilized for JPEG file formats. This type of compression makes an average out of the different colors within tiny blocks of the said image being compressed. It does this by utilizing a DCT (discrete cosine transform) which results to images that has relatively fewer colors compared to that of the original.

Another kind of lossy compression is chroma subsampling. This is usually utilized for JPEG file formats and for video encoding schemes. It takes the fact that the human eye’s perception of modifications in brightness are sharper compared to that of its perception of color changes into account. It utilizes this scientific fact by averaging or dropping part of the color (chroma) information while simultaneously maintaining brightness (luma) information.

Part III: Various Type Of Files

In this article, we will focus on three types of files which are the mostly used file types within the area of web design. These file types are JPEG, PNG, and GIF. There are also other formats of images that uses compression such as TIFF, TGA, and PCX, among others. However, the three file types we will be focusing on are widely used in web design.

GIF (Graphics Interchange Format)

This image format is a bitmap one and was first introduced by CompuServe in 1987. Supporting a maximum of 8 bits by pixel, this means, a specific image in this format can accommodate about distinct 256 RGB colors. The best thing a GIF format can do for you is that it gives you the ability to animate images. This ability is not present in JPEG and PNG formats.

JPEG (Joint Photographic Experts Group)

It utilizes lossy compression in order to lead to a image file size that is significantly smaller. The greatest advantage of JPEG formats is it gives you the ability to decide the extent of image compression utilized. The result of this is a better quality of the image especially if properly used. It also results to the tiniest size that is reasonable enough to accommodate the quality of the image.

However, because JPEG utilizes lossy compression, the images you have saved in the said format are apt to experience artifacting. This is an event wherein strange halos can be seen within specific image sections. Plus, artifacting also results to pixelation being seen in the image. Usually, if the image has more contrast in it, it is necessary for the image to be actually saved at a higher quality. This is to led to a final image that is still decent to look at.

PNG (Portable Network Graphics)

This is another image format in bitmap. However, instead of utilizing lossy compression, it uses lossless compression. PNG was formulated as a replacement to that of the GIF format. Internet Explorer, do not support the PNG format for a long period of time. That’s why it is less common to be utilized compared to JPEG and GIF formats. However, now, it is currently supported by the most popular web browser out there.

The PNG format supports colors that are palette-based. These can be either 32-bit RGBAor 24-bit RGB. These can also be greyscale, RGB and RGBA color spaces. One of the biggest features of PNG format is its ability to support a variety of transparency options. One of these transparency options is alpha channel transparency.

Part IV: Selecting The Right File Format

The file format stated above (e.g. PNG, JPEG, and GIF) can be used for a variety of image types. If you select the right file format, it can lead to images with better quality and sizes that are significantly smaller. When you choose the wrong format, the image can be of relatively lower quality and it can even be bigger in size as well.

GIF formats are best for simple images like that of line drawings or logos. This is because GIF has a color palette that are limited. And because of this images with subtle shifts in color and with gradients often result to being posterized. To some array, this can be avoided using dithering. But, the best solution is to utilize a different format of image files.

For images or photos which have gradients which makes GIF not suited to it, the best file format that you can probably use is the JPEG file format. JPEG is best suited for images who has subtle color shifts and contains few sharp contrasts.

If your image has sections containing sharp contrast, it is highly likely that artifacts will appear. Artifacts refers to halos that are multi-colored located around a specific section of the image. The best thing to do is to adjust the level of compression of the JPEG files before you actually save them. This will lead to an image with a higher quality and has a smaller size.

If the images contains contrast that is high (especially with regards to illustrations or photos with contrast and multiple gradients), the best format to use is the PNG. Usually, PNG files are of a larger size compared to that of the JPEG. However, it still depends on the image. PNG files utilizes lossless compression as well. This means, the quality of the original image is kept intact.

Below is an overview allowing you to see what actual file types are best for different image types:

GIF

* Animation is necessary in the file.

* Simple graphics and line drawings.

* AVOID - Images that contains gradients; Photos.

JPEG

* Photos that does not contains a high amount of contrast.

* Screenshots of games, movies, and other content that are similar.

* AVOID - Images that contain a high amount of contrast; Detailed images (e.g. diagrams); Simple graphics (this will result to larger file sizes).

PNG

* Illustrations, line art.

* Photos that contain a high amount of contrast.

* Images which require transparency (e.g. alpha channel transparency).

* Application screenshots and detailed diagrams.

* AVOID - Photos that has a low amount of contrast. This will result in file sizes that are larger.

Part V: Print Design And Image Compression

Most of this guide told you about image compression when it comes to web design. However, we will be telling you the effect of image compression with regards to print design. Mostly, you have to avoid lossy compression and should not be used when it comes to print design.

Print design is prone to artifacts and image quality that is lower compared to that of graphics on screen. For example, when you save a JPEG file using medium quality, it might look okay on your screen. However, when it is printed out, quality loss is very noticeable so is artifacting. This is true even if you used a premium inkjet printer.

For print design, it is best to use file types that take advantage of lossless compression. If you need to compress the image, it is best to use the TIFF file format. This is because the said file format provides you with a variety of options for various lossless methods of compression. And these options include the LZW method as stated before.

However, if you are printing an image, it still depends on the specific image itself and where will it actually be printed. It’s better, usually, to utilize file types that contain no compression at all. That’s why you might use the original file of the application itself.

Part VI: Advantages And Disadvantages Of Image Compression

There are a variety of advantages and disadvantages of image compression. These can actually be seen below:

Advantages:

Reduction In File Size

The most important benefit that image compression gives is the reduction of file size. Depending on the type of file you want to compress, you can continuously do image compression until you reach the size you like.

When file size is reduced, the image file takes up relatively lesser space within your hard disk drive. But, it still has the same size as that of the original image. That is, unless, you manually edit the size of the image using an image editor such as Photoshop.

Reduction in file size has a lot of benefits especially for the World Wide Web. It gives webmasters the ability to create sites that are rich in images without taking up much hosting space or bandwidth allocation.

Faster Loading Speeds

There are electronic devices (e.g. cameras, phones, computers) that is slow when it comes to loading uncompressed images that are large in size. For example, CD drives has a specific limited rate of reading data. These CD drives aren’t able to show large images properly.

Some web hosting services that are slow in transferring data also needs compressed images in order to have a functional website that loads faster than competing websites. Hard drives also try harder in order to load uncompressed files. Image compression results in the faster loading of data on devices that are slow.

Disadvantages:

Lower Quality

Usually, when images are compressed, it results to the decline of the image quality (a.k.a. degradation). If it is necessary for you to show images that have a high resolution, then you might not want to use image compression as it will result in an image that is of lower quality.

Data Loss

Some types of files (e.g. JPEG) results in loss of data of the image permanently when they undergo through image compression and reduces in size. When you are compressing these images, you have to make sure that the original uncompressed file is kept intact. In this way, you have a backup. Otherwise, loss of the quality of the uncompressed file will happen.

Part VII: Image Compressor Tool

The image compressor tool that we recommend for you to compress images is FoneDog’s Free Online Photo Compressor. The said tool has the following advantages:

* It allows you to compress image files (e.g. JPEG or PNG) which will result to a reduction in size without losing much of the image’s quality.

* It allows you to save more space on your device. Thus, you can use this space for other photos, videos, and important documents.

* It results in the image using less bandwidth especially if you want to use it inside a website. Thus, you can save a lot of bandwidth and accommodate more users especially if the web hosting package you availed has a limited amount of data transfer available.

* It results in faster loading times within devices and for web hosting service providers. Users of your website won’t be bored by slow loading times. Because your images take up less space, it will load faster and provide a better user experience.

Here’s how to use FoneDog’s Free Online Photo Compressor step-by-step:

Step 01 - Go to the Photo Compressor page in FoneDog’s website here.

Step 02 - Upload your image or images. You can upload a maximum of 20 images with about 5MB per image in maximum size.

Step 03 - After the photos are compressed, download the compressed image file within the said platform.

Part VIII: Conclusion

Image compression is a great way to reduce the size of the images without losing much of its quality. That’s why it’s used by a lot of people for faster loading times within devices and within websites. To compress your images, you can use FoneDog’s Photo Compressor Tool. It is a great tool to compress images and reduce its size without compromising much of its quality.