Images and Links

Image File Formats

There are five main types of image formats commonly used on websites today:

GIF (Graphics Interchange Format): A legacy image format limited to 256 colours, making it best suited for images with few colours or large areas of flat colours, such as company logos, maps, or charts. GIF files support transparency, but only one colour can be transparent. They can also be animated, which remains popular for memes and short animations, particularly on social media. However, GIFs are becoming less popular overall with the rise of more advanced formats like PNG and WebP.

JPEG (Joint Photographic Experts Group): Widely known due to its use in digital photography, JPEG files support millions of colours, making them ideal for photographs. However, JPEG does not support transparency and relies on lossy compression, which can lead to reduced quality if the image is compressed too much.

PNG (Portable Network Graphic): A format that emerged as a more versatile successor to GIF. PNG files support millions of colours and multi-colour transparency (with alpha channels), making them excellent for graphics requiring high-quality transparency, such as app icons, logos, or images with complex edges. Unlike JPEG, PNG uses lossless compression, preserving image quality at the cost of larger file sizes.

WebP: A modern image format developed by Google that supports both lossy and lossless compression, as well as transparency and animation. WebP files are generally much smaller than JPEG and PNG files for comparable quality, leading to faster page load times. This format is increasingly used in web development due to its balance of quality and file size.

AVIF (AV1 Image File Format): The latest image format, offering even better compression efficiency than WebP while retaining high quality. AVIF supports HDR, transparency, and various colour depths, making it a powerful choice for both photography and web graphics. Despite being newer, AVIF is quickly gaining support across major browsers and platforms due to its superior compression and image quality.

Attributes

Adding images and hyperlinks require us to add attributes to HTML elements. Attributes are additional properties that can be associated with a particular HTML element. With images and links we need to use attributes to indicate which image we want to use or where it is that we would like to link too.

Each HTML element has a list of prescribed attributes that can be set. These are placed inside the opening angle brackets. The vast majority of attributes consists of a property and value. The value should be placed in quotes i.e.

Relative and Absolute Paths

An important concept to understand in web design is the difference between relative and absolute paths.

Absolute Paths – An absolute path is one that contains the full URL of the page to be linked to or the image to be included in the file. An absolute path leaves no room for dispute as to its location on the internet. An example of an absolute path is:

http://www.mywebsite/section2/introduction.html

Absolute paths are most commonly used when you link to a page external to your own web site.

Relative Paths – A relative path finds its way to a particular file based on its starting point. Relative paths can therefore be shorter than absolute paths but care needs to be taken to ensure the route taken is correct.

Images

Images are added with the <img> tag. The src attribute is used to indicate which particular image we want to use. The src is short for source and is the path to the image we wish to use. The path to the image can be absolute or relative.

Other attributes that you are likely to use with an image include width, height, and alt. The width and height indicate the dimensions of the image to be referenced and help speed up page loading. The alt attribute is used to provide alternate text for users who cannot see the image. It is also useful for improving your page's search engine ranking. This is a common SEO (Search Engine Optimisation) technique.

Attributes can be placed in any order but must be separated from each other by a single space. Therefore a fuller example of the HTML required to insert an image would be:

The values for width and height are in pixels. You do not need to explicitly declare them as being in pixels. As stated above, the actual order of attributes does not matter but generally web designers will place src first as this is the most important attribute to use with the <img> tag.

Adding Hyperlinks

The <a> anchor tag is responsible for adding hyperlinks. The <a> tag can be placed around both text and images to make them hyperlinks. Like the <img> tag, the <a> tag needs attributes to make it do anything interesting. The main attribute associated with the <a> tag is href which stands for hypertext reference. This is the location of the file you wish to link to, entered either as an absolute or relative path.

An absolute path example would be:

Assume we have a file called index.html and we want to link to a page called about.html that is in the same folder then the relative path would be:

If the about.html file was in a folder called facts that was below the current location of the file containing the link the path would be as follows:

If the about.html file in the facts folder linked back to the index.html page in the folder above it then the path would be as follows:

The double dots take the browser back up a directory to find the index.html page.

Another trick with a relative path is to add a backslash at the beginning. The backslash has the effect of making the path relative to the root of the web site. That is you are basically navigating to the top of the tree structure and then winding your way down from that point.

In the above example the link will look for a subfolder at the top of the file structure called facts. The benefit of relative paths like this is that you do not need to worry about the domain name on which the files are held.

The above example could be the same as the following.

Or it might be equal to:

It just depends on which server the file is placed on.

Another attribute of the <a> tag is title. This adds a screen tip when the user places their cursor over a link in the browser. An example of a hyperlink with the title attribute would be:

When you make text a hyperlink it will appear blue and underlined. If you have visited that page already it will appear pink. The underline effect and colours are default styling, that as we will see later, can be changed by the addition of some CSS.