A Picture Is Worth A Thousand Words: Image Formats & Compression for Websites
There are many image file formats and file extensions although they all fall in two categories. Images are either Vector Graphics or Raster Graphics. So What is the difference between the two? Well it’s simple really, it all depends on the task you are trying to accomplish and the intended platform you are preparing the image for.
Vector Images
Vector images are created using polygons rather than pixels. Unlike their Raster counterpart, Vector files are able to be resized and even upscaled without any loss in quality. This is great because you can really use this file type to do a lot of different tasks, but the one downsize is that this flexibility can create incredibly large file sizes the larger you make the Vector Graphic.
Raster Images
Raster images are the most common of image types. These files are high quality and are created using pixels rather than polygons. When you upscale a raster image there is quality and pixel loss. It is always better to size down that to size up because raster images can compress pixels and make the existing pixels smaller, but it cannot create pixels out of nothing. Therefore when you upscale a raster image there are pixels missing and it can appear to be of lower quality.
JPG (JPEG)
extensions .jpeg & .jpg
JPG are 24 bit images that are high quality Raster Images. JPEGs use lossy compression, which allows for a reduced file size. However with lossy compression does result in a decrease in quality after image editing.
Pros: Largely popular and compatible with most softwares. Low file size so it saves on space on memory cards.
Cons: Lossy compression so it does suffer for general degradation if the image is repeatedly edited and saved. Layers are rasterized (flattened) so the image does not support transparency.
PNG
extension .png
PNG can be 8, 16, or 48 bit raster images. 24 & 48 bit PNGs are referred to as “true color” meaning they can contain over 16 million colors. They are widely accepted on most softwares and are as popular as jpeg files. The main difference is that they are able to support transparency. PNGs are also lossless meaning these images don’t degrade the same way jpegs do and can be saved and edited over and over again without any loss of quality.
Pros: Largely popular and compatible with most softwares. Lossless compression so it does not suffer from degradation if the image is repeatedly edited and saved. Maintains layers and can support transparency.
Cons: Larger file size than jpgs and has limited RGB color space (not as ideal for the web, but they still work)
GIF
extension .gif
GIF stands for Graphics Interchange Format which settles the long had debate that it is actually pronounced with a “G” sound and not a “J” sound. It’s not a peanut butter folks it’s a popular image file type. These files are 8 bit files and can only contain up to 256 colors. Like PNGs GIFs can support transparency. These files are best for simple images and logos because it isn’t able to support a wide breadth of color. The coolest part about GIFs are that they can be animated as well and are widely popular on the web.
Pros: Quick loading time, can be animated, lossless compression so it does not suffer from quality loss if the file is repeatedly edited and saved. Supports transparency.
Cons: Limited color palette (limit is 256 colors), does not support CMYK.
SVG
extension .svg
SVG files are XML vector graphics files often used in 2d graphics and web publishing. SVGs are very useful for importing 2d graphics from illustration program apps to 3d modeling software applications like Blender.
Pros: This file type allows for vector, raster, and text. It can be interactive or even include animation much like a gif. This file is able to be resized while remaining crisp which can optimize the final file size. This file format is highly compatible and popular among web developers for its ability to be put in HTML without having to be stylized in CSS. search indexed and ability to be compressed.
Cons: This file type is not a good option for print, It does not contain much color depth so continuous images should be avoided.
WEBP
extension .webp
This file format was originally developed by google with the intention to take the best aspects of JPEGS and PNG File types in terms of both quality and compression. They have the ability for both lossy or lossless compression. This allows for users to have the choice between maintaining image quality or optimizing file size for its intended purpose.
Pros: Versatile
Cons: Not as popular
Conclusion
There are a few formats that I’ve left off this list because they are obsolete or irrelevant. Know that they do exist and are floating on the internet occasionally. Know that you know about Image File Types, feel free to view a case study I did on Image Compression.
Sarah Mendez is a student in the Digital Media program at Utah Valley University, Orem Utah, studying Web & App Development. The following article relates to Web Development in the DGM2341 Course and is representative of the skills learned.
