Common Image Formats
JPEG is a compressed bitmap format (meaning is has a defined size and grid of pixels). It is best for photos and images with a lot of detail. JPEG does not support transparency.
SVG is a vector format that provides smooth graphics at any size. It supports transparency. In addition to its use in the img tag, it can also be directly pasted as code into HTML. This is especially useful because individual parts of an SVG can then be targeted by CSS for styling or animation.
Vectors are the only type of images that can be scaled up to any size without loss of quality.
PNG is a bitmap format that supports transparency. It is best for simple images and images that require transparency where SVG is not an option. SVG is often a better alternative these days.
GIF is a bitmap format with index color (meaning each GIF only carries a limited number of colors). It supports transparency, but results are not smooth. However, it does support frame animations. While it is an inferior format compared to other modern options, it hangs around because it is convenient for sharing simple animations.
The Image Element
img is a self-closing element that pulls in an image file. It is an inline element by default (which is counterintuitive). Also important is that it is a self-closing tag and requires no separate closing tag.
Image files should always be downloaded and added to your file structure, rather than being linked from another location on the internet.
src attribute's value refers to the image file to be displayed. Like the
href attribute for links, this can be a relative or an absolute URL.
alt attribute contains descriptive text about the image. It is used by screen-readers and is also shown if the link to the image fails.
height attributes contain the image's dimensions in pixels. Though they use pixels, the units should not be written. (e.g. width="200" should be used instead of width="200px"). These attributes are used less these days because CSS is usually used to size images.
title attribute contains text that displays in a tooltip popup when a mouse hovers over the image. It is NOT read by screen-readers. It is most often used to provide additional context or non-essential information about an image.
In the above example, hover your mouse over the image to see how the
title attribute shows up. Try changing the text of the
title attribute and hover over the image again to see your change applied to the pop-up text.
"Inline SVG" refers to the practice of directly pasting
svg code into an HTML document. There are many advantages to doing so, chiefly the possibility of styling individual parts of the
svg with CSS. Classes and IDs can be applied to sub-elements of an
svg for additional control.
In the above example, see if you can figure out how to change the color of the bird. What about the oval that forms its shadow?
The following video demo is fully interactive. You can pause it at any time to directly edit the code, and resume playback to pickup where you left off.