Certified HTML5 Developer Learning Resources Images

Learning Resources


An image is an artifact that depicts or records visual perception. Images includes a photograph, screen display, and captured by cameras. It also includes a map, a graph, and a pie chart.

Various image formats for web are JPG, TIF, PNG, and GIF.

Digital cameras and web pages normally use JPG files - because JPG heroically compresses the data to be very much smaller in the file. However JPG uses lossy compression to accomplish this feat, which is a strong downside. A smaller file, yes, there is nothing like JPG for small, but this is at the cost of image quality. This degree is selectable (with an option setting named JPG Quality), to be lower quality smaller files, or to be higher quality larger files. In general today, JPG is rather unique in this regard, using lossy compression allowing very small files of lower quality, whereas almost any other file type is lossless (and larger).

JPG is used when small file size is more important than maximum image quality (web pages, email, memory cards, etc). But JPG is good enough in many cases, if we don't overdo the compression. Perhaps good enough for some uses even if we do overdo it (web pages, etc). But if you are concerned with maximum quality for archiving your important images, then you do need to know two things: 1) JPG should always choose higher Quality and a larger file, and 2) do NOT keep editing and saving your JPG images repeatedly, because more quality is lost every time you save it as JPG (in the form of added JPG artifacts... pixels become colors they ought not to be - lossy).

GIF was designed by CompuServe in the early days of computer 8-bit video, before JPG, for video display at dial up modem speeds. GIF always uses lossless LZW compression, but it is always an indexed color file (8-bits, 256 colors maximum), which is poor for 24-bit color photos. Don't use indexed color for color photos today, the color is too limited. PNG and TIF files can also optionally handle the same indexed color mode that GIF uses, but they are more versatile with other choices too. But GIF is still very good for web graphics (i.e., with a limited number of colors). For graphics of only a few colors, GIF can be much smaller than JPG, with more clear pure colors than JPG). Indexed Color is described at Color Palettes.

PNG can replace GIF today (web browsers show both), and PNG also offers many options of TIF too (indexed or RGB, 1 to 48-bits, etc). PNG was invented more recently than the others, designed to bypass possible LZW compression patent issues with GIF, and since it was more modern, it offers other options too (RGB color modes, 16 bits, etc). One additional feature of PNG is transparency for 24 bit RGB images. Normally PNG files are a little smaller than LZW compression in TIF or GIF (all of these use lossless compression, of different types), but PNG is perhaps slightly slower to read or write. That patent situation has gone away now, but PNG remains excellent. Less used than TIF or JPG, but PNG is another good choice for lossless quality work.


Best file types for these general purposes:

  Photographic Images Graphics, including
Logos or Line art 
Properties Photos are continuous tones, 24-bit color or 8-bit Gray, no text, few lines and edges Graphics are often solid colors, with few colors, up to 256 colors, with text or lines and sharp edges
For Unquestionable Best Quality TIF or PNG (lossless compression
and no JPG artifacts)
PNG or TIF (lossless compression,
and no JPG artifacts)
Smallest File Size JPG with a higher Quality factor can be decent. TIF LZW or GIF or PNG   (graphics/logos without gradients normally permit indexed color of 2 to 16 colors for smallest file size)
Maximum Compatibility
(PC, Mac, Unix)
Worst Choice 256 color GIF is very limited color, and is a larger file than 24 -bit JPG JPG compression adds artifacts, smears text and lines and edges


 For Support