When you’re working on a new web design, all the information you’re required to collect can be super confusing. A while back, Peter put out a great post (Help me Help You: 5 Tips for Working with a Web Designer) covering the basics of how to streamline your workflow with a web designer. Whether you’re working on a new web design or are in charge of updating your own, you’re probably going to be required at some point to know which image formats work best on your website.
Not to worry – I’ve put together a quick (and painless) guide for what each of these file formats mean and which would work best in your web-related project. Let’s get started!
.JPEG or .JPG
pronounced “jay-peg”
Characteristics:
You’ve probably heard of .JPEG before. It’s the most commonly used image format for digital photography and it’s also commonly used on the web. JPEGs are lossy which essentially means they are compressed when you save them. One of the reasons .JPEGs are used in most photographs is that they use 24-bit color and can make up to 16 million colors.
.JPEGs save all color information but selectively discard other data. This is why, if you have a small version and try to make it larger it will look fuzzy and extremely pixelated:
What are they good for?
JPEGS are ideal for large colorful photographs if you have a large enough image (72dpi) you’d like to put on your site. Ideally, you shouldn’t be able to see the compression until you zoom way in.
.PNG
pronounced “ping” or “p-n-g”
Characteristics:
.PNGs, unlike .JPEGs use lossless data compression. For that reason, they’re the most used static lossless images used on the internet. PNGs are used more for images with text that might be put on a website. PNGs come in two different formats: PNG-8 and PNG-24. PNG-8 is more similar to a GIF (see below) with 256 colors and the capability to preserve transparency. PNG-24 are much larger files and allow you preserve transparent areas of the file.
What’s it good for?
PNGs are great when you need a transparent background behind your image. For example, usually when we add a logo onto the header of a website we use a PNG-24 for it’s transparent backgrounds and crisp lines.
.GIF
pronunciation is a little controversial. It is technically “jif” like the peanut butter brand but many people pronounce it “gif” with a hard g.
Characteristics:
You may have heard of GIFs from the fun, animated ones you see on the internet. GIFs are really small files and can look fuzzier than a higher resolution PNG. For static images, use a GIF if you have a small file that doesn’t have use any gradients. GIFS can only display 256 colors (compared to the millions of colors a JPEG can display).
What’s it good for?
GIFs are great for any kind of animation (see cute animated GIF below), text related images and small file sizes.
The Short Version
JPEGs, PNGs, and GIFs all have their ideal usage in web design. JPEGs are fantastic for a large colorful hero image, PNGs work great for your logo in the top left corner of your site and an animated GIF may be just what you need to share a small moving image in a blog post. If you’re ever in doubt, feel free to ask the person designing your site what their preferred file format is for each situation.
