GIFs, JPGs and PNGs, Oh My!
R.J. LaCount Apr 11 2012
Every time I receive a logo in JPG format, a little part of me dies inside. Actually, it’s a big part of me, because choosing the right file type for images is an essential part of good web design.
Did you know that JPG images lose quality every time you re-save them? PNG and GIF images use “lossless compression,” retaining perfect image quality, but can actually be smaller in file size than JPG if used appropriately. If this is all news to you, please read on before your designer grabs his Wacom tablet and runs for the hills.
JPG is the most common image format around these days, as it generally boasts the smallest file size with no noticeable quality loss. As with most good things, you need to be careful before you go using it everywhere.
All image formats use some form of compression. JPG compression, referred to as “lossy,” is the only type of compression that will always result in data loss, even at “100% quality” settings.
The loss of quality in JPG images manifests itself in the form of “artifacts,” or small blocky elements you’ll mostly recognize in large areas of similar color or high-contrast edges. Look closely around the edges of the pink flower pedal sticking out above the bee’s head in this image to see what I’m talking about.
Don’t lose all hope, though! JPG compression is optimized for photographic images. If you don’t compress too much, artifacts will be invisible to the naked eye. You do, however, increase the amount of artifacts every time a JPG is re-saved, so you should keep an original copy of your photo in a lossless format like TIF or a Photoshop PSD.
PNG is the other big daddy in web right now, and it uses lossless compression. While you could save a photo as PNG and not lose any quality, you’ll end up with a very large file size. It’s better to reserve PNG for what it is optimized for: graphical images – drawings with few colors (less than 16) and maybe a few gradients. PNG is usually the best choice for screenshots.
GIF & TIF
GIF is a dated format that is, under most circumstances, being replaced with PNG. It also offers lossless compression, but is limited to 8-bit indexed color. It is still a decent choice for web graphics in some situations (try PNG as well and see which gives you a smaller file size).
TIF is considered the high quality format for commercial print work. It offers lossless compression and massive file size. Use this format to save original photographs, but always export to a JPG for web use.
Cool story bro. How about you just tell me which format to use?
I understand that’s a lot to remember if you’re not a designer. Fortunately, there are a few basic guidelines to ensure you’re looking good in most situations.
For web graphics with many solid colors and sharp edges, go with PNG or GIF over JPG. You may get a smaller file size with JPG but image quality will suffer greatly as artifacts will be noticeable.
For photographic images, go with JPG over PNG or GIF. As long as you’re careful with the amount, the lossy compression won’t be noticeable for a single export from your original photo and you’ll get a huge reduction in file size!
If you are unsure which format to use or have an image containing both photographic and graphical elements, hold on to a backup copy and try different formats with these general rules in mind. You might want to try using an online tool like smush.it to get the lowest file size without losing quality.
Most importantly, use common sense. The fewer times you re-save an image the better. If you’re sending an image over to a designer to work with, always send the highest quality format (TIF or PNG) regardless of file size – once you’ve lost quality, it’s gone; you can’t magically increase quality by re-saving a poor-quality JPG under a different format.
Need some clarification or notice something I left out? Let us know in the comments!
R.J. brings several years of web design and front-end development experience to Portent. His attention to detail borders on neurosis and he always takes care to create pixel-perfect websites for clients. Read More
- How to use Intention.js for Responsive Design
- What Does a Degree in Architecture Have to Do with Web Design & Development?
- A Front-End Workflow For The Evolving Web
- Stop Writing Blog Posts: Ideas for Interactive Content
- Parallax Scrolling? HTML5 Animations? Why We’re Falling for New Design Techniques
- Portent.com: They’ve gone to plaid