After the hyperlink, the second most common HTML element is probably the image.
We specify an image with the self-closing <img> tag, with the – obligatory – src attribute pointing to the image location, like this:
<img src="https://www.google.com/images/srpr/logo11w.png" />
This will look as follows:
As the number of images for a web site can rapidly increase, it is a good practice to put images in their own folder. So your structure should look something like this (screenshot of Finder for Mac):
And you would then include two image in that index.html file as follows:
<img src="img/restaurant1.jpg" /> <img src="img/restaurant2.jpg" />
Image types to use for the web
Note that web browsers cannot display images of any file type. The file type of an image can be spotted by its extension, like .jpg in the above example. Make sure to always include the extension in the src attribute or the browser will not show it correctly.
The three types of images commonly used for the web are:
- jpg: a ‘compressed’ image format, good for photos
- png: another ‘compressed’ image format, which has a ‘lossless’ option. Good for complex graphics.
- gif: the simplest and smallest format which has only very few different colors. Good for logos
Always be aware of the file size of your images: images that are too large will make your site too slow, especially in these days of mobile and tablet browsing!
Now that you know how to include images in your site, on to some text formatting: HTML typography!