HTML and CSS Reference
THE BASICS OF HTML5 IMAGE FILES
A fundamental truth about graphic i les on the Web is that they have weight. Weight, in the
context of an HTML5 page, refers to i le size measured in terms of the number of pixels stored
in an image. Generally speaking, larger and higher-quality images have more pixels. h e
consequence of size for the Web is that heavier graphics take longer to move over the Internet
and load into an HTML page. If you've ever stared at a Web page waiting for a big graphic to
load, you know that it can be frustrating and cause your mouse button i nger to start twitch-
ing, wanting to hit the Back button on the browser.
By understanding something about the dif erent i le types and how to optimize their size, you
can better adjust the i les and get the most out of images on your page — both in terms of how
they look and how long they take to load.
FORMATS AND PIXELS MATTER
What matters most on a screen is how an image looks. h e appearance of an image depends
to a great extent on the monitor's resolution. h e higher the resolution of a monitor or mobile
device's display, the better the image is going to look. At the same time, a graphic with more
information is going to look better than a graphic with less information. h at also means that
a graphic that takes up more screen space is going to require more information than a smaller
image and take longer to load.
To better see what needs to be understood to create good-looking graphics that don't take up
much bandwidth and load quickly requires a closer look at the dif erent types of Web graphic
formats. h e next four subsections provide a brief overview of each format.
Scalable Vector Graphics (SVG)
Vector graphics are drawings created using mathematical formulas that specify points and
then draw lines between the points. Bitmapped graphics place color “bits” at dif erent points.
For example, if you draw a straight line in vector graphics, the computer takes Point A and
Point B and draws a line between them. h e same line drawn with bitmapped graphics
specii es all the points to place bits to make up the line. (h at explanation oversimplii es the
process but provides a rough idea of the dif erence between vector and bitmapped graphics.)
Because vector graphics use formulas, when a graphic is changed, it doesn't become pixilated
as bitmapped graphics do. Imagine a line 100 pixels long that you want to change to 400 pixels
long. With vector graphics, all that has to be changed is the distance between two points. With
bitmapped graphics, you have to add an additional 300 pixels. If you try to change a bit-
mapped graphic line in a Web page by changing its width from 100 pixels long to 400 pixels
long, it stretches out the original 100 pixels to cover a width of 400 pixels, and that's why it
Another important new feature of SVG graphics is the ability to change dif erent aspects of
and dynamically change it — not by switching i gures but by actually changing a parameter.