# 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 `` element, and some important image formats. ## The image element In order to display an image on the web, you need to use the `` 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*. ``` A cup of coffee resides on a coffee table ``` 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. `` is a inline element, thus it will not be placed on a new line. Where you locate the `` element will affect how the image is displayed. If the element is followed by a block element, e.g. `

` or `

`, then the block element will be placed on a new line after the image. If the `` 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 `
` element was introduced. This contains an image element and the associated caption. You can have more than one image inside the `
` element, as long as they share the same caption. The caption is enclosed with the `
` element. E.g.: ```
The IT2805 logo
This is the IT2805 logo
``` If you want to read more about image file types, I recommend reading the answer on [this](http://stackoverflow.com/questions/2336522/png-vs-gif-vs-jpeg-vs-svg-when-best-to-use) Stack Overflow question. --- # Agent Instructions: Querying This Documentation If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question. Perform an HTTP GET request on the current page URL with the `ask` query parameter: ``` GET https://it2805.gitbook.io/curriculum/web-and-multimedia/images.md?ask= ``` The question should be specific, self-contained, and written in natural language. The response will contain a direct answer to the question and relevant excerpts and sources from the documentation. Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.