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.

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.

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.

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).

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.)