JPG, GIF, or PNG? Which should I use?

So there is something interesting about images that so many don’t realise that only us graphic designers do: not all images are created equal. Size, colour, transparencies, and let’s not forget compression ratios. Some of the most popular formats for images are PNG, JPG, and GIF. But which should you use and for what should you use them?

First, there are a couple terms we need to identify and know:

Lossy compression:
Data compression technique that results in some amount of data being lost from the source file, typically eliminating redundant or unnecessary information in the file to save file size. Also provides greatest compression ratio.

Lossless Compression:
Data compression technique that results in no data being lost, provides less compression than lossy, but maintains greater quality by not limiting information stored in the file.

JPG (also known as JPEG):
Short for Joint Photographic Experts Group, the committee that got together and wrote the the standard for the .jpg file format. JPG is a lossy compression technique made to compress colour and gray scale images that supports 16.7 million colours. JPG is best for complex graphics and photographs; however there is often a loss of sharpness and clarity when used for text or line drawings.

GIF:
Short for Graphic Interchange Format. This is a lossless compression technique that only supports 256 colours. GIF is better than JPG in respects to images that have fewer colours, crisp lines, and black and white images. GIF also supports animation and transparency, but only to a degree of a single shade value (IE: all black can be transparent, or all white, but not both). A major limit to GIF is that the algorithm used for compression is owned by Unisys.

PNG:
Short for Portable Network Graphics. A patent-free alternative to GIF that also has many improvements over GIF compression. Also lossless, it can often gain a 5%-25% more compressed file than GIF, and supports up to 24bit colour. PNGs also allow the use of opacity, which means that there is a varying degree of transparency from one shade to the next rather than GIF’s required sharp edges. PNG does not support animation, and is not supported by all browsers (mainly IE6 and below).


Ok, Now What?
Now that we know the differences, it’s time for the whys. While the GIF is probably one of the more popular formats on the net, it’s quickly being replaced by PNG because of the ability to control opacity. GIF MUST use either 100% opaque or 0% transparent, PNG’s ability to control opacity means that you can hit everything in between, allowing gradients to be used. In January I’m going to be covering some techniques where you will see this used.

So when it comes to our web sites where should we use what? GIF goes well for logos; unless you have a gradient then you use PNG. If we have a lot of small icons, GIF is a great way to go most of the time, if you have thumbnails of images keep them at a JPG though.

So we see the GIF uses being limited, when should we compress with PNG over JPG? A general rule is smaller the image dimensions, the better it will fare as a PNG. PNG works better on vector graphics and anything with a hard line or complex gradient. However, with larger images PNG is horrible on compression. I typically make most all of my repeatable elements PNG as I can make them small, use opacity, and achieve greater compression ratios; while my more detailed, larger images are JPG.

So to give you an idea of the actual compression of each:
GIF(256): 4:1 - 10:1
JPG(high): 10:1 - 20:1
JPG(med): 30:1 - 50:1
JPG(low): 60:1 -100:1
PNG: 5-25% smaller than GIF.

Designers vs Developers: Why Size Matters.

Many designers don’t understand programmers, and most programmers are eternally enraged by designers. This is pretty easy to understand when you consider that a designer is pretty much like that pretty little stuck up hottie in homeroom, while the programmer is kind of like the geek playing Magic the Gathering bragging about how his light-sabre is better than yours (and he literally means a light-sabre).

Now, before you start flaming this with comments like “I’m not a 16 year old socialite” or “stop dissing the Jedi MAN!” let me just tell you that I’m both of these (not a man and a 16 year old girl, grow up people!). However, I am a graphic designer who has a degree in mass media communication, a server administrator and linux developer, a software programmer, and a web developer. This might seem strange to come across someone who excels at using both sides of his brain, but I never said I’m the most popular guy as a result...

But that said, I can tell you that the two sides often go into a battle royal of epic proportions when I do web work. I’m currently working with a graphic designer who outputs some of the most amazing artwork I’ve ever seen. It’s so amazing that I feel bad having to tell him “CSS can’t handle that dude” or “Every element on this site is an individualized size!” You designers out there probably don’t understand what the big deal is, you programmers are probably laughing saying “They just don’t get it.” Well I’m here to offer a truce, and to try to show you why size matters.

UNIFORMITY
When you design a website that uses elements of the same size, you can reuse the code written to house that element. Personally, I’m an object oriented programmer, I write code in such a way to make sure that it can be used as many times without having to write it again. Reusing code and making sites modular is what efficient coding is all about. But when you make all your header images different sizes, we can’t just simply make a header object and reuse it. We have to make a new object for every header, and likely sharpening a knife to throw at you while we are at it. When I design a website I make sure to make my elements as uniform as possible. I try to make buttons the same size, I make headers the same height so I only have to pass the image replacement to my object and never bother touching sizes, I set a size to my header and footer and don’t stray from it page to page. These may seem like little things to you, but when you make dimensions uniform it speeds up the coding process, which means more money and less time.

SPACE
It’s not just the dimensions that matter, it’s also how you save it. Don’t save every single image as a PNG set to the highest possible setting. I once had a designer send me over a spacer pixel (usually a single transparent pixel) that was 500px squared! Not only that but he saved it as a PNG on the max possible quality at 24 bits. The average programmer may not have any sort of image editing software, so he can’t just open Photoshop and optimize this stupid thing to something that can be remotely called logical. So the same goes for you, optimize! if it’s reusable make it small. If you are using a pattern in the background, make it repeatable using the smallest filesize possible. Learn how to optimize, most likely you are using Photoshop so the tools are right there in “save for web”. Also learn when to use PNG vs GIF. PNG is great for gradients and high quality images, but if you don’t have transparency in your image then there is no reason to not save it as a JPG. If all your edges are hard and you have no gradients, check the GIF setting to see if it’s smaller. Pages load quicker this way, and the faster pages load, the more likely you will have someone stick around to view the content.

SANITY
Nothing drives me crazier than when I come across a designer that simply says “Make the code work dude.” Something that seems to escape designers is that it’s easier for them to design around code then it is for a programmer to write around the design. If you are bleeding your elements together making it impossible to position objects or separate them, we have to write some elaborate code to make it work. It is very easy to design your sites in a block format while making it look like they are free-form. This very blog is a great example. You may not have realized this, but the blog is on blogger while the site is hosted on my domain. Why do they look exactly the same? It’s because my slightly “open” header and free-form content is actually in a block layout that’s easy to adapt to the horrible template structure blogger uses. (I love blogger by the way). Make the designs look cool, but make them work for your coders too. This might mean you need to learn a thing or two about what CSS can do and at least have a very basic understanding of HTML.


So while the two of you line up outside the monkey bars ready to slug it out with a light-sabre and Hello Kittie Brush, take a moment to look at each other and realize we are on the same team! Programmers could always use a crash course on basic design and how colours work with each other, and designers should have a basic understanding on what CSS can do and how HTML works. You don’t have to be an expert, but you it’s a must if you plan on getting any better at what you do. Mastering your craft means you should have a basic knowledge of how the related crafts work as well. Besides, when you poke that designer’s eye out with that light-sabre he might not be able to get designs out nearly as quickly!

So to recap, size does matter. We want something small and optimized so the browser loads it quicker. A JupiterResearch survey found that 33% of broadband users will not wait any longer than 4 seconds for a page to load before they hit backspace and click on the next search result. When it comes to narrowband users, 43% of them will wait less than 6 seconds. This means your pages need to load quick, and we all know that it’s the images that usually stick us in that department. Actual dimensions also matter. When we make things the same height, width, or even both; it allows us to set up objects to be reused with greater ease, or even assign global properties so we don’t have to use bloated code to assign styles to our HTML. This helps to streamline code and make using it more modular. While it’s just a baby step, your programmer will be grateful. And designers, watch out for those light-sabres, you will be surprised what a self proclaimed Jedi can do out of sheer will.

On my way back!

I actually just finished up a big move to Nashville. Now that I have everything done, I'm looking to start posting again within the next month. I have a couple emails asking me to go over skinning blogger, two asking about custom brushes, and and another asking about php libraries. Fell free to email me and post what you would like to see, I'm looking to start posting again around the beginning of October once I'm settled into my new home. I'll be finishing my move at the end of September. So be looking for my next tutorial to be posted by the end of October!

-Josh

Creating effective organization in Photoshop

Create your own Photoshop Brushes (tutorial)