If this article feels a little familiar, we published the first edition of it way back in 2009. While SVG has added a whole new dimension to web design, questions such as “What is the difference between JPEG and PNG?” are still as relevant as ever. We thought it was time to take a fresh look at the state of play in web-image formats.
Today’s short guide will give you the quick rundown of the various file types and where they work best. Enjoy.
GIF: The Graphic Interchange Format
Unless you just stepped out of a faintly smoking DeLorean straight from 1985, you’re very likely already familiar with the web’s goofiest image format – the GIF (Graphics Interchange Format).
The GIF format is a type of bitmap, but unlike JPEG or PNG, GIF files are limited to a maximum palette of 256 colors. Essentially each GIF image contains a preset вЂbox of crayons’ and there is no way to truly mix those colors to make new colors.
While 256 might sound like a lot of crayons to work with, complex photographs typically have many thousands of tones. This color range is lost during the GIF conversion process and this is the key reason not to use GIF for color photos.
While GIF is generally a poor choice for images with wide color variation, that 256 color limit can help keep file sizes small which is ideal for even the slowest of internet speeds. For many years, GIF provided the web’s only transparency option – though PNG and SVG now offer this too.
Choose GIF for:
- Simple animations
- Small icons
- Graphics with low pixel-to-pixel variation (i.e. lots of flat color like logos and flags)
Depending on your preference, you may refer to this format as either вЂJPEG’ or вЂJPG’ – both are accepted variations of the same acronym – Joint Photographic Experts Group.
Unlike GIF, JPEG is a 16-bit format, which means that it https://besthookupwebsites.org/transgenderdate-review/ can blend red, blue and green light to display millions of color. This makes JPG very вЂphoto-friendly’. This is partly why it is a standard format when it comes to most digital cameras on the market.
The JPEG format also allows you the flexibility to choose the how much you compress your image – from 0% (heavy compression) to 100% (no compression). Generally, a 60%-75% compression setting will shrink your file considerably while keeping your image looking decent on most screens.
While JPEG is well suited to compressing and rendering photography, it is a lossy compression type which means it’s less useful for ongoing editing of an image. Exporting a JPEG results in a loss of quality, and these losses get worse with each successive export – like a photocopy of a photocopy. This is why professional photographers generally shoot in lossless RAW format.
Use JPEG for:
- Still Images
- Photography
- Images with complex colors and dynamic
A newer file format than GIF and JPEG, the PNG (Portable Network Graphics) is like a marriage between both the GIF and JPEG format thanks to its two variants.
PNG-8 is similar to GIF in many ways and uses the same 256 color palette (maximum). It has better transparency options and usually exports slightly smaller file sizes. However, PNG-8 has no animation function.
PNG-24
PNG-24 allows you to render images with millions of colors – much like JPEG – but also offers the ability to preserve transparency. Because PNG-24 is a lossless format file type, you are likely to get larger files, but if image quality is more important than file size, PNG-24 is your best option. Even so, services like TinyPNG can often make a big difference to your file sizepared to their cousin JPEG, PNG-24 files are not as universally compatible with every app and platform which makes the format marginally less ideal for web sharing. However, it is capable of being edited without diminished qualities.
