Web Design - Introduction to Graphics

Sections:   Introduction  |  Section 1  |  Section 2  |  Section 3  |  Section 4  |  Section 5

Section Four:  Part A  |  Part B  |  Part C  |  Part D  |  Part E  |  Part F  |  Part G  |  Part H

About Images Before you learn to add images to your web page using HTML, it is important that you have a solid understanding of images so that you may make educated decisions regarding the types of images to include in your web pages. Image Basics and Vocabulary Digital images come in a variety of file formats; to include: JPEG, TIFF, GIF, PNG, BMP, and more; but not all digital image file formats are supported by web browsers. In fact, of the five file formats mentioned, only JPEG, GIF, and PNG are supported across all web browsers. As such, the information presented throughout this course will only address the JPEG, GIF, and PNG file formats. JPEGs, GIFs, and PNGs are all known as raster-based images. A raster-based image uses colored-filled pixels in a rectangular grid to represent the scene of the image. Pixel refers to the small dots that make up a digital image. The term pixel is a smooshing together of the words picture and element, To learn all you need to know about pixels, visit the following web page: Webopedia: What is a Pixel? A digital image's resolution, simply put, is a measure of the image's sharpness or clarity ("Resolution," n.d.) The resolution of a digital image is represented as a ratio of the number of pixels displayed per inch. A digital image with a high resolution will have more pixels per inch than a digital image with a low resolution. Consequently, high resolution digital images have larger files sizes than low resolution images. Typically, high resolutions are used for photographic images that call for intense detail. Whereas, low resolutions are used for images that require less detail, such as text or shape-based images. Image Formats As mentioned, the file formats that are supported by all web browsers are JPEG, GIF, and PNG. It is important to understand the difference between each file type so that you will use the correct file type in your web pages. JPEG/.jpg – JPEGs are typically used for photos and as such JPEGs tend to have higher resolutions (and file sizes) than GIFs or PNGs. JPEGs can be used to display millions of colors in a digital image. GIF/.gif – GIFs are typically used to display text or shape-based images like logos. Areas of a GIF can be made transparent. Transparent images placed in a web page allow the background of the web page (a color or an image) to be visible through the image. In addition, GIFs can be used to create animations. GIFs can only display, at most, 256 colors in an image. PNG/.png – PNGs are similar to GIFS in that they are normally used to display text or shaped-based images. PNGs can be formatted to display anywhere from 256 colors, similar to a GIF, to millions of colors, like a JPEG. PNGs can also be used to create transparent images. PNG transparency differs from GIF transparency in that a PNG can incorporate "alpha transparency" - or a range of transparency from 0% transparent to 100% transparent ("Image Types," n.d. para. 11). GIF transparency is an all-or-nothing affair; either it is 100% transparent or it is not transparent. Currently, PNGs can not be used to create animations. References: Image Types. (n.d.). Retrieved from: http://webdesign.tutsplus.com/articles/image-types-and-usage-in-web-design--webdesign-1298 Resolution. (n.d.). Retrieved from: http://www.webopedia.com/TERM/R/resolution.html Next

© 2008 KCDL. All rights reserved.