Exercise
Now that we have learned our way around a hyperlink, let’s create our first journey to send our users on. Understanding links can help to transform your website from a single webpage into a multi-page experience where the user is able to control their own journey. Adding this level of control improves the user experience as it helps your user to feel in control, which is fundamental to a good website.
Let’s put what you have learned into practice. Open up your index.html file created in the previous sections. We’re going to be creating an encyclopedia of your favourite images. First, save some online images you like and put them into the same folder as your index.html file. Now add some links that point to these images’ locations. Now add some external links to images you have found online but haven’t saved to your local disk, and be sure to open the link in a new tab so that users don’t have to leave your website when they view the image. This is best practice when dealing with external links. Congratulations – you have now mastered a fundamental element of HTML. May you go forth and guide your users on many a meaningful journey.
Images are the cornerstone of modern web development: they help to provide context and meaning, they aid user engagement and they help to make web browsing a truly visual and interactive experience. We all know how valuable images are to the overall browsing experience and, as such, it is fundamentally important to get your image selection right. In short, your image should always reflect the style and direction of your website, and most importantly, you must always ensure that you choose the correct file format for your image. Images help a website to feel alive and engaging, so let’s take a look at how you can brighten up your website with some images.
There are three main image types used across the web: JPEG, PNG and GIF images. Each image type has its own benefits and uses and the image type used should be defined by the demands of the webpage.
Table 2.3 Image glossary
Lossy compression |
A compression technique that improves the size of the file, but at a detriment to the image quality. Saving the same JPEG image over and over will result in lower quality each time it is saved, but also a smaller file size each time |
Alpha channel |
An alpha channel allows an image to utilize transparency at various points in the image |
Lossless compression |
A compression technique that improves the size of the file, without detriment to the image quality |
Vector file format |
A vector file is a graphical file that uses shapes to represent images; they are represented using points, which are numerical values, and as such they can be scaled to an infinitely large size, without any loss in quality |
Raster file format |
An image file format that uses a collection of pixels to represent images; their quality degrades upon an increase in file size |
Screen reader |
Software that allows visually impaired users to read the text that is displayed on screen, through use of a speech synthesizer or braille text |
JPEG files are mainly used for photographs as they can be highly compressed and produce very small file sizes. It is worth noting that JPEG files are a lossy file format, and as such JPEGs are not very good for logos as they can look fuzzy and they also lack an alpha channel, which restricts the ability to use transparency in the image.
GIF files are mainly used for logos and animations. GIFs offer small file sizes, and animation functionality. They are a lossless format and also allow transparency; however, GIFs are limited to just 256 colours, so are unable to produce the full spectrum of colours often required for a photograph, therefore they are typically used for simple line drawings with few colours, such as logos.
PNG files are the newest file type of the bunch, and offer similar functionality to GIFs, but improve on them in almost every way. PNGs are lossless, offer better transparency support and contain a wider range of colours; however, they don’t support animations and the file size is larger than JPEG and GIF. PNGs can be very useful for icons and photographs that use transparency, but the large file size means that they should be highly considered before use.
SVG files are growing in popularity due to their small file size and infinite scalability. SVG files are a vector file format, compared to the above three, which are all raster file formats. This comes with many benefits, the main ones being the infinite scalability and tiny file size. These benefits make SVG perfect for icons, logos and simple graphics. Because SVGs are written using code, we can actually alter the image directly on our website, without needing to even open a photo editor.
When working with images on your website, it’s important to actively monitor the impact each image you add has on your page load speed. If the page is taking too long to load, consider either removing the image, or making it smaller. You could also make use of an online image compressor to get the file size down as much as possible. The art of balancing page load times with media-rich websites is a constant challenge for a web developer, but one that a lot of developers thrive off and find that it makes the job that bit more rewarding when you hit that sweet spot.
To use an image on a website, we make use of the <img> tag. The syntax is as follows: