Images in HTML with the img tag

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="" />

This will look as follows:

Similar to hyperlinks, the location of the image can be either an absolute URL that starts with http://&#8230; or a relative location that points to ‘internal’ files of the web site.

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

Screen Shot 2014-01-21 at 19.16.50

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!


One comment

Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s