The Different Types of Images Used in Web Graphics
Only a few types of web graphics are used in emails. Not every type of web graphic file can be used when building web pages and doing web design. There are three types of graphics that are used the majority of the time. The proper use of web graphics makes the difference between a web page that has a professional appearance and a web page that doesn’t. We take great pains to make sure the websites we build don’t just look great, but follow technical best practices. This means making images small in file size for faster page loading times.
Here at Massive Impressions, our clients and partners ask all the time what type of graphics should be used in specific cases. We’ve created this guide for you that describes the different types of files usable in web graphics.
The images below show that PNG preserves the original image the best, but it has a larger file size. The JPEG file size is much smaller than the file size for PNG or for GIF. If you are looking for a small picture size, JPEG is the best option here.
GIF 12 KB
JPEG 4 KB
PNG 59 KB
The images below show that PNG preserves the original image and opacity the best, but it has a larger file size. JPEGS with high compression should not be use. A PNG would work best here.
| GIF 1 KB | JPEG 1 KB | PNG 2 KB |
The images below show that PNG preserves the original image the best, but it has a larger file size. JPEGS with high compression should not be use for crisp photos with sharp lines. Here, a GIF would probably be best.
| GIF 34 KB | JPEG 6 KB | PNG 52 KB |
| Pros | Cons | When to Use | When to Not Use | Examples | |
| GIFs | GIFs load quickly and there is no compression of the photo. | GIFS aren’t good for a range of colors above 256 colors, and if you want the image to be transparent. | Use for small graphics with a small range of colors(256) and blocks of color | Don’t use for high quality photos. | Banners, charts, buttons, line drawings, black and white images and small text, animations, and transparent images |
| JPEGS | JPEGs support a full spectrum of colors, and can keep the file size down if you lower the quality. Jpegs can be compressed. | JPEGS are not transparent. Editing JPEGS drops the quality if you change the quality setting because of the lossy compression algorithm. | Use for web photos that do not need to be edited often. | Don’t use if you want transparency or if you want to make the file size a lot smaller without lowering the quality. Don’t use for line drawings, lettering, or simple graphics. | Web Photos or complex graphics |
| PNGs | PNGs maintain their quality and support lots of colors. Editing PNGs does not degrade their quality even though they are can be compressed more than a GIF. | PNGS don’t work on all software or applications. They can bemore compressed than a GIF file. | Use PNGS when you want transparency & lots of colors. | Don’t use PNGs for wide, tall files. Don’t use PNGs when the file size needs to be small. | Crisp, transparent enabled elements Hompage Logo Floating Text |
Leave a Reply
Want to join the discussion?Feel free to contribute!