We build websites that are easy to manage and update. Those updates almost always include adding, editing and moving around images. We have nifty ways of creating websites where it doesnt matter what size image you upload, it will always be right. However, we know that working with images can be a pain in the you-know-what, especially with all the different file types and resolutions, and even more difficult when you dont have fancy photo editing software. Well, fear not, were here to help!
In this two-part article, well cover image file types for both web and print in Part 1, and Ill also talk a little bit about image resolution and what you should use for different types of media. In Part 2 Ill talk about some photo editing softwares that youve probably had under your nose for a long time, and hopefully help you become a little bit more familiar with them.
Image types JPEGs and GIFs and PNGs? Oh my!
Ok everyone always wonders what type of image should they use on their website? What type do I need for printing? Whats the difference?! OMG HOW DO I CHOOSE?!!
Take a deep breath. I understand. Lets take it slowly.
Image types for the web
When were using images on the web, we want them to be as optimized as possible. This means we need to balance between the best possible quality, and the lowest possible file size. If we use great big super high quality print images, your users will be done reading your page before the images finish loading, and if we use super low quality, or the wrong file type, your images may look dull or blurry (or both), and we dont want either of those things.
Lets get to it.
Why would I choose JPEG?
JPEG this is one of the most popular image types. JPEGs are a compressed image type, and they are lossy. This means that the image is being shrunk for file size and losing quality every single time you save over it. That said, this is not the greatest file type for use in print, unless its a very large, very high quality JPEG (which is possible, but its not as common).
JPEGs are ideal for images on the web that have LOTS of colors. If you want to put a photograph (the kind taken with a camera) on a website, you almost certainly want a jpeg. The reason is that jpegs were created to handle lots of colors while maintaining a small file size. For colorful images, this will give you the best quality with a reasonable file size.
Why would I choose GIF?
GIF is another popular image type for the web. They are also compressed and lossy, but they have an added feature of allowing transparency. GIFs are ideal for use on websites for images that have very few (ideally 256 or fewer) colors. GIFs are commonly used for website logos and icons because they are usually only 1 or 2 colors, and they may need to appear with a see-through background so that you can see the color of the website behind the image. GIFs should never ever ever be used for print. Ever. They only allow a maximum of 256 colors, which is also why theyre also not good to use for photographs with lots of colors. They will come out looking bland and splotchy.
You might be wondering why you wouldnt just use a jpeg instead of even worrying about GIFs at all. Get this: A JPEG could actually save a low color image at a larger file size than a GIF of the same image. Similarly, a GIF of a very colorful image could save at a larger file size than a JPEG of the same image, but the quality will be much worse.
Why would I choose PNG?
This one is a little bit more advanced. There are actually two types of png. PNG-8 and PNG-24. The 8 and the 24 are referring to the Bit colors. To put this into context, computer monitors from over a decade ago had 8-bit color, meaning 256 colors (think GIF!). Most computer monitors today have 24-bit color or more, this means millions of colors (think JPEG!). So if youre following along, PNG-8 is very very similar to GIF, and PNG-24 is very very similar to JPEG.
A brief history: PNG is newer than GIF and JPEG, and occasionally suffers some incompatibility problems with certain undying web browsers *cough* Internet Explorer *cough*
So, er, whats the difference? Well with PNG-8 vs GIF, nothing really, take your pick. Usually GIFs are more common and may be easier to create in your image software (well get to that), so thats fine. PNG-24 vs JPEG though is a little trickier. This comes down to your need for a transparent background.
Transparent backgrounds on images
Not all transparent backgrounds are created equally. For GIF and PNG-8 images with transparency you have to choose a matte color. These images arent TRULY transparent, they have a good chunk of them that can be transparent, but they have this sort of halo effect that you might have seen on some websites??before.
The halo isnt ALWAYS a bad thing. In the image Ive created here, youll see that the top logo has a white halo around it. If this was being displayed on a white background you wouldnt notice it at all. The second logo also has a halo, but Ive chosen a blue color pretty close to the background color so you cant see the halo even though its really there.
The last logo Ive shown as a PNG-24 with transparency. PNG-24 has what I call True Transparency. There are no halos at all, and if you have features like drop shadows or gradients, this is the ideal file type since you will be able to see your background through the drop shadow. This type of transparency includes opacity that just means the ability to see through something thats partially see-through. If youve been wondering why youd use PNGs at all, its for their True Transparency, thats the best reason I know.
To sum up GIF vs. JPEG vs. PNG
GIF or PNG-8: Use for low color images, can have transparent background with matte color halo.
JPEG: Use for high color images, no transparency.
PNG-24: Use for high color images or images with unusual transparency like drop shadows or partial transparency.
Image types for print, and what the heck is resolution?
There are a number of file types that can be used for print. TIFFs and high quality JPEGs are probably the most popular for photography. Some graphics are sent to printers in other formats using design software, but were talking about photographs. More important than the type of file you use for print is the resolution of your images. You want your resolution to be much higher for print than they need be for the web.
If you are printing something that someone would hold in their hand to look at, youll likely want to have a resolution of 300 dots per inch (dpi). Images for the web usually have a resolution of about 72 pixels per inch (ppi we say ppi because they are going to be viewed on a screen which is made up of pixels, whereas printer ink is put down as dots).
For larger print outs, like posters, you might only need a resolution of 150-200 dpi since it will be viewed from a distance. For very very large print outs like billboards or graphics on the side of a truck you can probably get away with as little as 50-100 dpi.
When you lower the resolution, the image generally prints more pixelated or blurry, but on a billboard it doesnt much matter because no one can possibly look that close, they just get the overall effect of the image whereas a small pamphlet or a document you would hold in your hands will be viewed at a much closer distance.
So now that you know a whole bunch about file types and image resolution, stay tuned for Part 2: Easy image editing for PCs and Macs.
