When you click a link and your web browser navigates to a new page, a lot of things happen behind the scenes. In order to understand how graphics work online, you should have an understanding of these processes.
In its most basic form, when a web browser opens a page, it is sending a request to a web server to send the content of the requested page. If the request is valid, the web server will respond by sending the content of the page to the browser, after which the browser can display it.
Source: Maarten Lambrechts, CC BY SA 4.0
HTML (HyperText Markup Language) is the language for describing the structure of a web page. The building blocks of HTML are called elements, and each element consists of an opening and closing tag, with the content of the element in between.
<!DOCTYPE html>
<html>
<head>
<title>Webdev 101</title>
</head>
<body>
<h1>Learning about HTML</h1>
<p>HTML is fun: set the src attribute of an img tag to an image hosted somewhere, and your page will display it.</p>
<img src="<https://upload.wikimedia.org/wikipedia/commons/8/81/Playfair_TimeSeries-1.png>" />
</body>
</html>
The HTML above displayed in a browser. Source: Maarten Lambrechts, CC BY SA 4.0
When the browser is loading this very basic web page, it is actually making a second request: it requests the image file from the server at upload.wikimedia.org. That server will respond by sending the image to the browser, so the browser can display it.
Source: Maarten Lambrechts, CC BY SA 4.0
<aside> 🔎 If you want to see where an image on a webpage is hosted, you can click right on it and click “Open Image in New Tab”, and then inspect the url in the address bar. If you try this with the images in Notion, you have to select “View original” instead of “Open image in New Tab”.
</aside>
The <img> tag supports 4 file formats: JPG, PNG, GIF and SVG (see the Graphic file formats module for more explanation of these). Many data visualisations published online will use JPG or PNG as the file format: the data visualisations are created in a data visualisation tool, then exported to JPG or PNG and finally published by uploading the files to a CMS (Content Management System).
Publishing data visualisations as JPG or PNG is convenient: most people are familiar with these file formats, and CMS’s know how to deal with these files. But there are some drawbacks when it comes to accessibility.
Visually impaired people make use of screenreader software to access the content of web pages. These screen readers use the structure and the content of the HTML page to read its content out loud. But text elements on a visualisation (its title, axis titles, data labels, annotations, ...) are baked into the pixels of the JPG and PNG images, and are therefore inaccessible to screen readers. This means that visually impaired people have no access to the content of bitmap images.
This is why good CMS’s give you the possibility to provide an alt attribute to <img> tags. “alt” stands for “Alternative text”, and this attribute serves multiple purposes:
In fact, the alt attribute is compulsory in HTML (but it can be left blank). So, for accessibility reasons, the HTML used above should be edited to: