Images

Part of the appeal of web pages are their visuals. Multimedia is where the web shines, and it all starts with images.

Image formats

Before you go about embedding images into your pages, it's important that you're choosing the right format for your use. Each of the major formats do better at encoding certain types of images, and you'll get smaller files and quicker load times if you use the right one.

This isn't an exhaustive list of formats, but these are the basic ones you'll find on any given web page.

(Converting image formats is out of the scope of this guide, but any image app can convert between the major ones. Try paint.net, IrfanView, or Preview, which is built into Macs.)

PNG

PNG is a lossless image format—it'll be pixel-by-pixel identical to the original image. PNG also supports transparency, where parts of the image will be invisible and the background will see through. These make it especially appealing for screenshots, digital art, logos, and UI elements. On the other hand, anything with a lot of detail won't compress well with PNG.

A PNG-compressed screenshot versus a JPG-compressed screenshot
On the left is a screenshot encoded with PNG, and on the right is a screenshot encoded with JPEG. Note the glitchiness around the text on the JPEG screenshot, which the PNG screenshot doesn't exhibit.

JPEG

JPEG, on the other hand, is lossy. It shrinks down images by splitting images into tiny blocks and simplifying the black-and-white and color parts of each block separately. This means you'll lose detail when you use it, but it'll potentially shave off much of the file size for a picture that looks close to it, depending on what you set the quality level to when you encode it.

Parts of the same image encoded at three different JPEG quality levels
The quality and file size of a JPEG are controlled by the quality value you can set when you encode it. From left to right, each guinea pig is encoded at a progressively lower quality value, showing the increase in blocking and distortion. At high qualities, it's barely noticeable, but requires a bigger file.

JPEG is best used for detailed, smooth-toned images, like photos and paintings. It'll damage screenshots or anything where you need pixel accuracy, but for softer images, you likely won't notice the difference, especially at a high (>=85) quality value.

GIF

GIF is an older, also lossless format. It's good for the same things as PNG (and also supports transparency), but it's not as efficient as it. To compound matters, especially older GIF encoders are notorious for introducing dithering artifacts—stray pixels where the format can't cope with a color, thanks to its limited palette.

An animated GIF with dithering artifacts present
A GIF of the 2002 Nintendo game Animal Crossing, demonstrating both animation and dithering artifacts. Note the stray pixels on the villager's hat horns and the bands of colors on the snowman's head. These are both because of GIF's limited palette.

So why use it? GIF is very commonly used for animations and video clips, thanks to its built-in support for motion. (An offshoot of PNG called APNG also supports motion, but support is limited.) Plus, you might want artifacting on occasion, depending on the look you want.

WebP

Finally, WebP is a very new format designed by Google to replace both PNG and JPEG. It's both lossy and lossless, depending on the mode, and tests show it's about 30% more efficient than PNG (though the jury's still out on if it's more efficient than JPEG).

An example of a WebP image
If you can see the above image, your device supports WebP. (As an aside, WebP did seem to shrink this image by about 40kb at the same quality level, 95. If that's worth the loss of support is up to you.)

The issue with WebP is support. Many image editors either don't support it or require plug-ins to support it, and especially older browsers need a special bit of JavaScript called a polyfill to display them.

Embedding images

To embed an image in a web page, use the <img> element.

<img src="[url to image]" alt="[alternative text]">

The <img> element is known as a void element, as it has no end tag. Some elements don't have end tags, mostly because their content is specified in the tag itself. Thus, they don't need an end tag.

Like links, image URLs can either be relative (like ../../images/images/jpeg_demo.jpg, which points to the guinea pigs up above) or absolute (http://archives.somnolescent.net/web/tesserae_v1/images/images/jpeg_demo.jpg). Absolute URLs are longer, but can point off-site, while relative URLs stay local to your site only.

Every image you add to your page should have an alt attribute, and it should describe what the image displays. This alternative text will display on text-mode clients, will be read aloud by screen readers, or displayed if the image is broken or not yet loaded. You need this for valid HTML5 markup.

There's a long list of other attributes you can have on an image, including scaling with the width and height attributes, which both take pixel values.

<figure> and <figcaption>

A semantic addition to HTML5 are the <figure> and <figcaption> elements. These define a part of the page as being related to the text, but separate enough to be moved around without much issue. You can have any type of multimedia inside a <figure>, including audio and video, but it's used mostly for images and diagrams.

<figure>
	<img src="../../images/images/jpeg_demo.jpg" alt="Parts of the same image encoded at three different JPEG quality levels">
	<figcaption>The quality and file size of a JPEG are controlled by the quality value you can set when you encode it. From left to right, each guinea pig is encoded at a progressively lower quality value, showing the increase in blocking and distortion. At high qualities, it's barely noticeable, but requires a bigger file.</figcaption>
</figure>

The <figcaption> element is an especially appealing feature of <figure>, as you can caption images with it, while images on their own display only the image, plus some hover text if you set the title attribute.

Summary:

  1. HTML allows images to be added to a page with the <img> tag.
  2. Keep your images in the right format!
    • If it's simple and has large blocks of color, use PNG.
    • If it's a photo or smooth-toned (like a painting), use JPEG.
    • GIF is also good for simple images or animations, but be wary of its limited color palette.
    • WebP is a newer format. It combines both the lossy and lossless compression seen in PNG and JPEG, and is more efficient than PNG. Support is limited, unfortunately. Keep an eye out for it.
  3. Every image you put onto a page should have the alt attribute, for text to be displayed when the image can't be. This is necessary to have valid HTML5 markup.
  4. For semantics, consider wrapping images and captions in the <figure> element if the image is relevant to the text, but separate enough to where you can move it around and it won't matter.
  5. The <figcaption> element allows you to caption a <figure>, and more generally, any images inside it.

Further reading