GIFs, JPGs and PNGs, Oh My!

featured Design & Development

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

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.

100% Quality

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.

Artifacts

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

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.

Use PNG for Web Graphics

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!

Use JPG for Photographic Images

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!

tags : image designjpglossless compressionpng

8 Comments

  1. Todd

    Yah man… thanks for the clarifications. I have entered a new dimension as I am now creating graphics every day. I have been converting my psd and svg files to .png… and did not know some of the aspects you mentioned above.

    Now I have more confidence and knowledge about why I should continue to use the file types I do.

    Thanks a bunch.

  2. I used png files the other day in an enewsletter. On certain email software (mostly IE / Outlook older versions as far as I could tell) the users were experiencing black backgrounds on whatever area the images were placed. I wasn’t just the image that had blacked out, it was entire areas of text. I switched the images to gif to get thru the problem, was there anything else I should have tried?

    • Older versions of IE and email clients are where PNGs get a little tricky. It sounds like the problem you’re running into is due to PNG transparency, which isn’t supported in some older browsers.

      Switching to GIF was a good solution in this case. If you want to stick with PNG when you run into this in the future, you could also just replace any transparent sections of your image with a solid background. Just make sure to test everywhere to make sure it looks good; email clients (like browsers) could potentially have different default background colors.

  3. JeffyPooh

    Being 2012 and all, it’s amazing that this optimization process isn’t fully automated, perfectly invisible, largely forgotten about, and ‘standard operating procedure’ everywhere. Like duh (not aimed at you, aimed at humans in general). :-)

  4. RICK!

    Did you know that JPG images lose quality every time you re-save them?

    While that’s technically true, at any given compression setting, the JPEG algorithm has already thrown out what its going to throw out. The difference between an image saved once and then saved again at the same compression setting is minimal. Only by increasing the compression will anyone be able to distinguish continued image degradation.

    You can see this by placing the secondary save, in PS as a top layer, above the initial save and using the Difference on layer blending.

    • Thanks for the additional info, Rick. Good call on the difference layer, too. Great way to check exactly how much quality you’re losing from a re-save.

  5. Good run through of the basics – I’m surprised by how many web designers are oblivious to the basics of file format and optimization.

    I recently wrote a script for losslessly compressing PNG & JPG using JPEGTRAN and PNGOUT – easier and quicker to use on a bunch of files than smush.it. Right now it’s Windows-only, but I’ll port it over to Mac soon.

    http://blog.stationfour.com/automating-png-jpg-image-optimization-in-windows

    • Wow, I just booted into my Windows partition and gave your script a try. Well done!

      Looking forward to that Mac port; I would definitely incorporate this into my workflow.

      Thanks for the comment!

Comments are closed.