A rose by any other name can smell just as good, as Shakespeare says in Romeo and Juliet, but if you take a photo of that rose and save it as a jpeg with high compression, you might see a drop in quality of the image. That's no problem, as you also have the option of using PNG, TIFF, GIF, SVG, or even a newer format like HEIC or WebP. Some of these formats would look great on the Capulet Family newsletter, while others would fit better on Romeo's blog, so decoding these file types can be very helpful.
ContentsLossless or LossyRaster vs VectorJoint Photography Experts Group (JPEG) – Lossy RasterPortable Network Graphics (PNG) – Lossy RasterGraphics Interchange Format (GIF) – Lossless RasterTagged Image File Format (TIFF) – Lossless RasterScalable Vector Graphics (SVG) – VectorNew formatsHigh efficiency image formatWebPWhy so many formats?
When you think "image format", you probably think of a raster. He. has nothing to do with Bob Marley - it just means the file is basically a grid of colored pixels that make up an image. JPG, PNG, GIF, TIFF and most other photo files are rasters. The only information they have is the color of the pixels, so enlarging or stretching them will usually result in a more pixelated image.
Vectors, however, are designed to scale forever. SWF, EPS, and PDF files store images not as pixels, but as mathematical equations that can be rendered as points and lines. The image can get as big or as small as needed without compromising quality, but these extensions aren't as common on the web because vectors aren't as easily compatible as raster images.
The JPEG file is named after the group that created it and dominates the world of web images due to its near-universal compatibility and small size. Your eye probably couldn't tell a slightly compressed JPEG from a higher quality image without a few seconds of careful examination, and it loads quickly, so it's good enough for most of the web.
JPEG-2000 is the updated version that has some improvements over the original, but it never really took off, so you're unlikely to see this format in many places.
Ideal for: uploading photos to the web, saving and sending small images, general use, printing images.
This format has become the go-to for high-quality web graphics, especially if you need a transparent background. PNG was originally designed as a GIF alternative, but it supports many more colors and is more flexible when it comes to transparency settings. File size is usually larger than GIF or JPEG, but PNG preserves quality better and is more flexible,
You may also encounter PNG-8 and PNG-24 in some programs. These will still be exported as normal PNGs, but PNG-8 only supports 256 colors and does not allow partial transparency, allowing you to have a smaller file size than PNG-24 more complete.
Ideal for: web graphics, high quality photos where size is not an issue, transparency.
The predecessor to PNG, the GIF format is now most famous for enabling short video loops that you can't stop watching on social media. The debate over whether to pronounce it as "g if" or "j if" is pretty hot, but if you want to anger both parties, try pronouncing it like "jeff".
GIFs only support 256 colors, making them a poor choice for high-quality photos, but their compression is excellent, allowing simple images to be reduced in size without a huge quality hit. Pixels can also be made transparent, but must be on or off, not in between.
Ideal for: simple graphics, animations, icons.
You may not have come across TIFFs personally, but if you like photography or work a lot with print media, you might recognize them as the large, yet high-quality format often favored by publishers. Moreover, no one disputes the pronunciation.
Ideal for: high quality photo printing, high quality image scanning, anything size is not an issue.
If you've ever tried to save an image from the internet and got the "save as web page" option instead, you might have seen an SVG. These are probably the most widely supported vector graphics, and their ability to maintain good quality and scalability at low file sizes makes them popular for logos, site graphics, and anywhere else a vector would be useful. .
Ideal for: business graphics, scalable graphics, logos.
You may not have seen these formats in the wild yet, but they do offer some advantages over today's standards.
HEIF is basically JPEG but with higher quality and smaller file sizes. This is now the default image format on iOS 11 and later.
WebP is Google's format, and it does just about everything:better compression than JPEG, better animations than GIF, and transparency comparable to PNG. It is supported by multiple browsers and is currently used by YouTube, Facebook, and a few other sites if you visit them using a supported browser.
It is unlikely that there will ever be one format to rule them all, as different fields have different image needs. General Internet browsers don't really need to think beyond JPEG and PNG (and perhaps WebP and HEIC in the future), but for commercial and publishing applications, options like TIFF and SVG make it easier life.
And, if you haven't already, you should think about choosing a side in the GIF debate before the format goes extinct. Be part of the story.
Image credits:Comparison between JPEG, JPEG 2000, JPEG XR and HEIF, Google Developers, W3C.org, Animated Gif It's Neon Easy, JPEG JFIF and 2000 Comparison, JPEG Compression Example
