IMAGES - HTML5 - page 176

You can change a graphic's dimensions all you want with a graphics application like Adobe
Photoshop or Microsot Paint. But when you change the size of a bitmapped graphic using
HTML5 attributes like width and height, your results, especially when you attempt to enlarge
an object, tend to either pixilate or crush the object. Figure 9-3 shows three GIF images, and
you can see that the enlarged graphic has jaggy edges and the pixels are beginning to appear
as little boxes.

Figure 9-3: An enlarged GIF using HTML5 attributes.

h e middle i gure is the original one with original dimensions. Had a graphic tool been used
to enlarge the image, it would appear un-aliased (without jagged edges). You can see the same
thing happen with digital photographs, as shown in Figure 9-4.

180

h e original image is on the far let . h e enlarged image shows jagged edges and the image is
beginning to blur. h e image on the far right is so small, it's dii cult to see much detail and
determine the extent to which it appears crushed (pixels pushed together to distort). Use the
following program ( ImageDistortion.html in this chapter's folder at www.wiley.
com/go/smashinghtml5 ) to test some of your own graphics.

<! DOCTYPE HTML >
< html >
< head >
< meta http - equiv = ”Content-Type” content = ”text/html; charset=UTF-8” >
< title > Web graphic distortion </ title >
</ head >
< body >
<!-- Original -->
< img src = ”photo.jpg” width = ”100” height = ”127” >
<!-- Enlarged 400 % -->
< img src = ”photo.jpg” width = ”400” height = ”508” >
<!-- Reduced 50 % -->
< img src = ”photo.jpg” width = ”50” height = ”63.5” >
</ body >
</ html >