What's New Tutorial Index References RSS Feed Contact

Images

Part of the immediate appeal the web had over protocols like FTP and Gopher is in its ability to display images alongside text. Images and graphics help to reinforce your point, make your site easier to navigate and more accessible, and add visual interest to an otherwise stale reading experience. Learning how to properly use them in web pages will make all the difference for your site.

(It might go without saying, but be sure you have permission to use whatever images you'd like to use on your site. Ripping things off the internet and using them on a live website, especially without permission, is generally frowned upon. You might be better off just creating your own assets, be they drawings, photos, icons, or whatever else.)

Image formats

You've probably already had experience with an image format or two if you've used the internet. Each format is built to store and compress (make smaller for faster downloads) a different kind of image; some are better for simpler, sharper ones, while others are better for photos and paintings. Some will visually alter the image to save space, while others are bigger but keep things sharp and identical to the original. Some even support advanced features like transparency and animation.

It's important that you pick the right format for your use in order to keep your images small and your pages loading fast. (Converting between image formats is beyond the scope of this guide, but if you need software that can do it, you can try paint.net, IrfanView, or Preview, which is built into Macs.).

PNG

PNG (or Portable Network Graphics) is what's known as a lossless image format. Pixel-for-pixel, it'll be identical to the original image. PNG also supports transparency, where parts of the image will be invisible and your page's background will show through instead. For things such as UI elements, pixel art, screenshots, and graphics with solid blocks of color, PNGs are the ideal choice.

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.

PNGs use a method of predicting pixels to save on space. The differences between the prediction and the actual pixels are what gets stored. This is why large blocks of color compress so well with PNG.

JPEG

On the other hand, JPEG (Joint Photographic Experts Group) is what's called a lossy image format. JPEG splits images up into tiny blocks and stores a less-accurate value for each block rather than the original pixels. This means you'll lose some detail, but the file sizes will be much smaller for a picture that usually looks close to the original, depending on the quality level you set 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 suited for detailed, smooth-toned images, like photos and paintings. It'll damage anything you need to be pixel accurate, but for softer images, you won't notice much of a difference, especially at a high (>=85) quality value.

GIF

A slightly less common image format is the GIF (Graphics Interchange Format). GIFs are especially useful for being able to store and play back frames of animation. It's also incredibly well-supported, being that it's been around since the 80s.

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.

As a general image format, GIF is lossless like PNG and even supports transparency, but it's prone to banding and dithering artifacts thanks to its limited palette of 256 colors per image. Still, if you need animation, it's essentially peerless; while APNG, an offshoot of PNG supporting animation, is gaining support, it still lags GIF in adoption.

WebP

Finally, a new format by Google called WebP is designed to replace both PNG and JPEG in operation. It features both a lossy and lossless mode, transparency support, and animation support, 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.

The issue with WebP is support. No version of Safari supports WebP to date, and Firefox has only recently begun to support it. These browsers will require a bit of JavaScript called a polyfill to display WebP. Image editors have only recently begun to widely support WebP, and Photoshop still requires a plugin for support. Whether the reduction in file size is worth the drop in support is up to you.

Embedding images

To add an image to your site, use the img element.

<img src="png_demo.png" alt="A PNG-compressed screenshot versus a JPG-compressed screenshot">

Like links, the path to your image can either be relative, pointing somewhere on your site, or absolute, using a full URL and potentially pointing offsite. You should make sure the images on your page have an alt attribute; alt text, as it's known, is what will display while the image is loading or if it's missing, and screen readers will read out the alt text in place of the image. Generally, alt text describes what's in the image, or the point of the image.

(Be courteous about other people's bandwidth if you're linking to their images. Direct traffic to them instead if necessary. Again, the warning about having permission to use images applies even if you're not hosting them directly.)

Summary:

  1. Images can be added to a page using the img element.
    • img requires two attributes: src, which points to the image using either a relative path or an absolute path, and alt, which provides text to display if the image can't be.
  2. Keep your images in the right format to keep the sizes down and keep your site fast:
    • If it's a screenshot, pixel art, has transparency, or features huge blocks of one single color, use PNG.
    • If it's smooth-toned, like a photo, use JPEG.
    • If you need animation support, use GIF, but be wary of its limited color palette.
    • WebP is very new and support is growing, but still not ubiquitous. It's slightly more efficient than PNG, but not JPEG. Consider thoroughly before use.
  3. Be sure you have permission to use the images you're trying to use. Photos you take and drawings you create are an excellent addition and can provide a unique touch to your site.

Further reading