Create web graphics with Photoshop – The Fundamentals
Part 1 – GIF, JPG, or PNG
Photoshop is a very deep software, you can play and learn with it for hours, days or even years and probably still discover something new and interesting about it. This post or series of posts aims to provide you with fundamental but easy skills to understand as well as to create better imagery for the web in a matter of minutes.
Part 1 is about image types supported by web browsers: GIF, JPG, or PNG. If you know about this already, then check out Part 2 Photoshop – Save image for the web or Part 3 Photoshop – Essential tools.
GIF, JPG, or PNG?
Whatever type you choose to save your graphics for the web GIF, JPG, or PNG, the graphics will display fine because those are the three image types supported by the latest versions of popular web browsers [PNG was not widely supported in the past]. That said, what are the basic differences between the three and what you should use in order to create a smaller file size but better looking image? Below are the rules of thumb without much detailed technical explanation.
- JPG images support 16 million colors and are intended and best suited for photographs and complex graphics. That’s why photos from your digital camera are all JPG. JPG, however, does not work well on line drawings, or simple graphics.
- GIF supports only 256 colors and is a good choice for almost all graphics except for photographs. GIF works best for images with only a few distinct colors, such as line drawings, black and white images, and drawn images with small text and small details like icons and logos. GIF is the only image format [a Flash file is not considered an image] that you can use to create animation for your website. GIF also supports transparency, where the background color can be set to transparent.
- PNG, especially PNG-8 is like GIF. PNG supports 256 colors and transparency and suitable for simple images, drawing with lines and small details but doesn’t support animation. PNG-24 is like the combination of JPG and GIF in that it supports 16 million colors and supports transparent background at the same time.
To make your job easier you can just temporarily forget about PNG and remember only JPG and GIF in which JPG is for photographs, and GIF is for drawings. GIF and JPG will be sufficient to meet most if not all of your image requirements for the web. The reason we can temporarily forget about PNG is first for your convenience, and second JPG and GIF are more common, not because PNG is worse than GIF. On the contrary, in many cases, PNG compression is better than GIF.
Example 1 – JPG is better than GIF
To illustrate, below is the same image that was saved in both JPG [65% quality] and GIF [256 colors]. As it turns out, JPG is much smaller in size [JPG 2.7KB vs. GIF 7.2KB], but it looks much better than the GIF. For only one image 2.7KB or 7.2KB perhaps doesn’t count a lot; however, it’s 2.66 times or 266% smaller! In addition, we can even lower the JPG file size more by reducing the quality percentage to 60% or 55%.
JPG works better in this example because the image/ the web graphics is a gradient, which is as complex as a photograph; thus GIF with 256 colors can’t compress and output the graphics as well compared to JPG, which supports 16 million colors.
Example 2 – GIF is better than JPG
Another image was saved in both JPG [65% quality] and GIF [256 colors] again. However, this time GIF is much smaller [JPG 6.5KB vs. GIF 1.8KB]. For this example, we can even lower the GIF file size more by applying less colors; instead of 256, we can apply 4 colors because the original image has only 1 color — yellow orange.
GIF works better in this example because the image / the web grpahics is a simple one color drawing.
Notes: For both examples, you can right click on the images to see their Properties, or more specifically the file types and the file sizes.
When transparency is needed, GIF should be used
Look at the two images below and you’ll understand what I meant by transparency. JPG doesn’t support transparency, so if you need transparency, you should use GIF [or PNG].
If you want the web page background color [green in this case] to show through the background of your graphic, you can set your image background to transparent with GIF. In this example, the GIF image [the second image] has a transparent background and because of that you can see the green background through the GIF image compared to the solid white background of the JPG image.
Not the best, but really fundamental info about web graphics from the marketing point of view.
Good info. I like the side by side comparison of JPG and GIF.
How about PNG and GIF? Waiting for the next parts.