Images
Images can enhance the user experience of a webpage, explain a text or tell a story of it's own. But there are many things you need to think about when choosing an image. For one, it should be fitting to the context, and you need to have the right permissions to use it. There are several free stock photo websites, or you can find images that are royalty free (creative commons license). Below is an introduction to the <img> element, and some important image formats.
The image element
In order to display an image on the web, you need to use the <img> element (this element should not be closed). Inside the element, you need at least the src and alt attributes. The src attribute tells the browser where to find the image file, which usually is a relative URL. The alt attribute provides a text description of the image. This text will be displayed when you can't see it, or read by screen readers and search engines. If the image is purely decorative, the alt attribute should still be present, but the quotes should be be left empty.
Images should be stored in a images subfolder, helping you organise your site structure. When your site grows, it might be necessary to add subfolders inside the images folder, e.g. products and icons.
There are three other attributes you should know about, these are the title, height and width attributes. title provides additional information about the image. Most browsers will display the content of this attribute in a tooltip when the user hovers over the image.
height and width specify the size of the image. They can be pixels or percentage (or other units of measurement). Images often take longer than HTML code to load, it would hence be a good idea to specify the size of the image so that the browser can render the rest of the content and leave space for the image. Doing this will ensure that the text doesn't "jump" when the image is finally loaded.
<img> is a inline element, thus it will not be placed on a new line. Where you locate the <img> element will affect how the image is displayed. If the element is followed by a block element, e.g. <p> or <h1>, then the block element will be placed on a new line after the image. If the <img> element sits inside a block element, text and other inline elements will flow around the image.
To control the alignment of an image, you should CSS, and not the old align attribute, which is not a part of the HTML5 specification.
Image file formats
When you are using images on the web, you should save the image in the right format and the right size. Not all image formats are relevant for the web. In the follow section, you will be presented with those that are relevant.
JPEG
If you have images with many different colors, e.g. photographs, you should JPEG. It is a lossy file format, meaning that you will have a loss in quality when compressing it. This is often not a problem with photographs, are there are many details. It is, however, a problem with stylized images, e.g. graphs, illustrations and logos, who have few colors. Saving such images in JPEG often leads to artifacts, which doesn't look good.
It should also be noted that when opening a JPEG and saving it, e.g. in Adobe Photoshop, the image will loose quality each time it is saved. JPEG does not support transparency.
PNG
PNG is a lossless format, meaning that the quality of the isn't reduced even though the file is compressed (saved) again. This works well for images with few colors, e.g. illustrations, graphs and logos, but not photographs. Using PNG on photographs will result in a large file size.
PNGs can have a transparency between 100% and 0%, making it a good choice for displaying logos.
GIF
You may know GIF from sites like imgur.com and reddit.com. It is also a lossless format, but mostly it can only use a maximum of 256 different colors. This makes GIF also a format for displaying logos. GIFs can also have animations.
SVG
SVG is, unlike the other formats, a vector format. That means that the images are not stored as pixels, so they can be resized indefinitely without quality loss. This is ideal for logos, illustrations and diagrams. You can't store a photograph in a SVG as there are too many details in a photograph.
Figure and figure caption
In HTML5, the <figure> element was introduced. This contains an image element and the associated caption. You can have more than one image inside the <figure> element, as long as they share the same caption. The caption is enclosed with the <figcaption> element. E.g.:
If you want to read more about image file types, I recommend reading the answer on this Stack Overflow question.
Last updated