Images and the web

1. Images and the web

2. Image Types • 3 main types of images used on the web: • GIF • JPEG or JPG • PNG (*not supported by all browsers) • Many, many more types of images exist but the ones listed above are universally recognized by most major browsers

3. JPEGs or JPGs • Joint Photographic Experts Group • optimized for photographs and similar continuous tone images that contain many, many colors. • works by analyzing images and discarding kinds of info that the eye is least likely to notice • For example: • when a camera creates a JPEG image, it is trying to most accurately represent what it has taken a photo of in the smallest amount of space. • JPEG or JPG images saves as .jpg

4. GIFs • Graphical Interchange Format • GIFs can display up to 256 colors • If the image has fewer than 256 colors, GIF can render the image exactly • Good for illustrations and line art • When the image contains more than 256 colors, software that creates the GIF approximates the colors in the image with the limited palette of 256 colors available • Supports animation. Most animated banner ads are GIFs.

5. GIFs cont. • Interlaced: a way of saving a graphic so that it loads progressively — first a blurry, low-detail version is loaded, and then successive layers of detail are added. Gives the impression of a quicker load time. • GIFs allow transparency meaning when you are creating your image, you can specify one color to be transparent. This allows the background colors of the webpage to show through the image. • GIF images saves as .gif

6. PNGs • Portable Network Graphics • It looks for patterns in the image that it can use to compress file size. The compression is exactly reversible, so the image is recovered exactly. • PNG was not particularly developed for the web but it has grown in web use. • Compression, when properly done, is significantly better than GIF's compression • Does not support animation • An alternative to GIFs • PNG images saves as .png

7. How browsers load images • When a web page is loaded, the browser gets the image from a web server and inserts it into the page. Bigger the image ( as in kilobytes or megabytes), the longer it takes the browser to load the image. • Make sure that images stay in the same spot in relation to the web page, otherwise your visitors will get a broken link icon.

8. Image Compression • Compression is a technique for reducing the amount of digitized info needed to store a visual image electronically • 2 types of compression • Lossy • Lossless

9. Image Compression cont. • Lossy • Method which loses some of the data that is indiscernible to the eye • Saves as a smaller size which equals shorter download time • Repeatedly compressing and decompressing a lossy file will cause it to progressively lose quality • JPGs and GIFS (with over 256 colors) are lossy

10. Image Compression cont. • Lossless • allows the exact original data (picture) to be reconstructed from the compressed data • Lossless compression is used in cases where it is important that the original and the decompressed data be identical, or where deviations from the original data could be damaging. • PNGs and GIFs (only for images with less than 256 colors) are lossless

11. Images and the web REVIEW • JPG • optimized for photographs and similar continuous tone images that contain many, many colors. • Lossy: Method which loses some of the data that is indiscernible to the eye • GIF • can display up to 256 colors : approximates the colors beyond the 256 • Lossless when image does not have over the 256 colors • Lossy when image has over 256 colors • PNG • Looks for patterns in the image to compress file size. • Lossless: allows the original picture to be reconstructed exactly