![]() One of the biggest advantages to the GIF format is that it allows for animated images, something neither of the other formats mentioned here allow. It supports up to 8 bits per pixel, meaning that an image can have up to 256 distinct RGB colors. GIF stands for Graphics Interchange Format, and is a bitmap image format introduced in 1987 by CompuServe. While there are other image formats out there that take advantage of compression (TIFF, PCX, TGA, etc.), you’re unlikely to run across them in any kind of digital design work. Different File Typesįor the purposes of this article, we’re only going to focus on three file types, those most commonly found in web design: PNG, JPEG, and GIF. It’s commonly used in video encoding schemes and in JPEG images. In images, transform coding averages out the color in small blocks of the image using a discrete cosine transform (DCT) to create an image that has far fewer colors than the original.Ĭhroma subsampling is another type of lossy compression that takes into account that the human eye perceives changes in brightness more sharply than changes of color, and takes advantage of it by dropping or averaging some chroma (color) information while maintaining luma (brightness) information. Transform encoding is the type of encoding used for JPEG images. When used on the right types of images and combined with dithering, it can result in images nearly identical to the originals. This is often used in GIF and sometimes in PNG images to result in smaller file sizes. One method is reducing the image’s color space to the most common colors within the image. There are a number of lossy compression methods, some of which can be combined with lossless methods to create even smaller file sizes. It’s used in GIF and some TIFF file formats. Lempel-Ziv-Welch (LZW) compression is a lossless compression algorithm that performs a limited analysis of data. In addition to being used for PNG images, it’s also used in ZIP and gzip compression. It uses a combination of the LZ77 algorithm and Huffman coding. It’s best suited for simple graphics files, where there are long runs of identical data elements.ĭEFLATE is another lossless data compression method used for PNG images. There’s run-length encoding (used for BMP files), which takes runs of data (consecutive data elements with identical values) and stores them in a single data value and count. There are a few different methods for lossless compression. It’s up to you, as the designer, to tell it how much data to disregard by setting the image compression rate. ![]() Lossy compression, on the other hand, removes some data from the original file and saves the image with a reduced file size. ![]() Basically, lossless image compression means all the data from the original file is preserved. While lossless compression is superior for many kinds of images, it’s not necessary for many others. Many people feel that they should only use image formats that use lossless compression. We’ve covered the differences between lossless and “lossy” compression, the different file types and the compression techniques they use, and guidelines for which file formats work best for different kinds of images. ![]() If you don’t understand which type of compression to use for different types of images, you’ll likely end up with one of two results: either images that don’t look as good as they could, or image file sizes that are way larger than they need to be.īelow is everything you need to know about image compression in relation to web design. But compression is an often-misunderstood topic, partly because there’s a real lack of understanding on what the different types of compression are good for. Proper use of image compression can make a huge difference in the appearance and size of your website image files. ![]()
0 Comments
Leave a Reply. |