• How to add images to pages
  • Choosing the right format
  • Optimizing images for the web

There are many reasons why you might want to add an image to a web page: you might want to include a logo, photograph, illustration, diagram, or chart.

There are several things to consider when selecting and preparing images for your site, but taking time to get them right will make it look more attractive and professional. In this chapter you will learn how to:

  • Include an image in your web pages using HTML
  • Pick which image format to use
  • Show an image at the right size
  • Optimize an image for use on the web to make pages load faster

You can also use CSS to include images in your pages using the background-image property, which you will meet on pages 413-420.



A picture can say a thousand words, and great images help make the difference between an average-looking site and a really engaging one.

Images can be used to set the tone for a site in less time than it takes to read a description. If you do not have photographs to use on your website, there are companies who sell stock images; these are images you pay to use (there is a list of stock photography websites below). Remember that all images are subject to copyright, and you can get in trouble for simply taking photographs from another website.

If you have a page that shows several images (such as product ...

Get HTML & CSS: Design and Build Websites now with O’Reilly online learning.

O’Reilly members experience live online training, plus books, videos, and digital content from 200+ publishers.