48 CHAPTER 2 Getting started with HTML5
src attribute to provide an absolute or relative URL reference to the image that is to be dis-
played. Use the alt attribute to provide alternate text to be displayed when the image is not
available due to slow connection or other mishap. The following is an example of the <img>
element.
<img src="/images/logo.png" alt="logo" />
<img src="http://search.microsoft.com/global/search/en-
us/PublishingImages/bing_logo.png" alt="Bing Logo" />It’s important to understand that the image is not embedded in the HTML document.
Instead, you provide a reference to the image file. When the browser reads your HTML
document, the browser will reach your <img> element and retrieve the image based on the
src attribute. When the image is retrieved, the browser will merge the image into the final
rendering that is displayed into the browser window. If the browser cannot display the image,
it will display the alternate text.Image file types
When using the <img> element, you can supply JPEG (.jpg or .jpeg), GIF (.gif), PNG (.png),
or SVG (.svg) files. The following is a brief description of each file type that should help you
decide which file type to use for your application.
■■JPG Also known as JPEG, this is best for photographs because it offers high compres-
sion and up to 16.8 million color combinations, but the compression algorithm is lossy,
meaning that you lose detail every time you save the file.
■■GIF IF is great to use on small images that have a fixed number of colors. GIF also G
supports transparent color. GIF uses lossless compression and is best for logos and
worst for photos. GIF also supports the ability to encapsulate multiple images in one
file, which is commonly used to provide animated GIFs.
■■PNG NG is a great all-around file type due to its lossless high compression. PNG P
files can be 48-bit true color or 16-bit grayscale. PNG not only supports transparent
color but also offers variable transparency. Photos aren’t compressed to be as small
as JPG photos, but being lossless makes it worth the extra size in many scenarios. You
might use PNG as your storage type for photos that you want to edit, but when dis-
playing them on the web, you might want to save the PNG as JPG to achieve the best
compression.
■■SVG SVG is Scalable Vector Graphics and is great for drawings but not for photos.
SVG images can be scaled up or down without losing detail because the file contains
the instructions to draw the image, as opposed to the other file types that contain a
raster-based image. Raster-based images are composed of color dots that make up the
image. If you need to scale a raster-based image up or down, you will see that in color,
dots are re-sampled, and the image typically ends up looking blocky.