<h2class="lecturer">LinkedIn Learning : Jen Simmons</h2>
<h2class="episodetitle">Images and Graphics</h2>
</div>
<article>
<h2class="sectiontitle">Images</h2>
<p>We use the image element, <img>. Like any elements, there are a number of attributes that can be applied to an image, but there are four that every image should have. These are</p>
<preclass="inset">
• The location of the image file (src)
• The alt attribute which provides a brief description to be displayed if the image can't be loaded and can be read by a screenreader
• Height
• Width</pre>
<p>The alt attribute can be helpful for people using a screenreader, but it is important to consider what there experience will be like. As an example, let's say that you have a lot of similar images on your site. One might be a logo, others might be images showing something related to the website and so on. If the alt text attached to the logo is, let's say, "happy dog" an image has alt text, "happy dog playing", another image has alt text "happy dog eating" and so on, this is fine as alternative text when an image can't be displayed, but it is going to be quite repetitive for a screen reader.</p>
<p>In theory, the height and width attributes of an image are optional because the webpage will actually download them and then figure out what size they should be. There are a couple of drawbacks here. The most obvious is that the browser decides what the image dimensions should be and it generally bases that decision on the image itself rather than how it will look in the page.</p>
<p>A less obvious drawback is that the browser has to download the image before deciding what size it should be and that can lead to some weird effects such as an image being downloaded and then resized. Providing this information in the form of image attributes gives the browser this information in advance so this means that the loading process is smoother.</p>
<p>Another thing to note about the width and height attributes is that the values tend to be numeric. We don't need to add a unit such as px for pixels. The values are assumed to be in pixels.</p>
<h2class="sectiontitle">Responsive Images</h2>
<p>I probably won't go into too much detail here because Responsive Design is a subject for study on its own. I would say, for clarity if nothing else, that Responsive Design relates to how a website responds to changing environments. For example, this page looks okay (I hope!!) on a large screen, but how will it look on my Sony Android phone or my iPad. When I first tried viewing my website on a smaller device, particularly a phone, the first thing I noticed is that the images were just too large and, in fact, were sometimes too large for a large PC monitor. Now, there are two approaches to fixing a problem like this. The best approach is probably to use Media Queries (which I probably won't cover in this course) to select an image to load depending on the device (or more accurately, the size of the screen). This may mean that you have the same image in different sizes so you are selecting the most appropriate size for the screen or it may be different images.</p>
<p>The main advantage here is that you not only display the images correctly, but you also avoid downloading large images when this is not necessary.</p>
<p>To explain what I mean, I will describe the second approach. The second approach is to download the same image on all devices and then resize it appropriately. This will mean that the image is being displayed correctly but on a device such as a phone, it probably means that you are downloading a huge image, but displaying it like a small image. The downside is that you may be using a lot of unnecessary data to do that and, depending on your phone plan, it could mean that you are paying to download a huge image without getting the benefit of a larger image.</p>
<p>This second approach is the 'quick and easy' approach and it is the one I will take for now. For reference, I picked up this trick from a recently purchased book by Ben Frain called "Responsive Web Design with HTML5 and CSS: Develop future-proof responsive websites using the latest HTML5 and CSS techniques, 3rd Edition". At time of writing, I have only read the first few pages but this one piece of information is probably worth the price of the book, to me at least, so I would definitely recommend it. It is available on Amazon.</p>
<p>For info, I am not an Amazon affiliate so I won't earn any commission if you purchase the book with this link. I just like it!</p>
<p>What we need to do is open up the stylesheet associated with our page (or any stylesheet attached to it but you should be careful about adding CSS rules where it makes most sense for them to be). For my site, I do have a stylesheet for each of the main pages, Linux, Web Development, Programming and so on and a file called styles.css so that I can style each group differently and I will add the rule in there. The rule is going to be associate with the img element so it should work with any image on any page using that CSS file. The rule is</p>
<preclass="inset">
img {
display: block;
margin-left: auto;
margin-right: auto;
max-width: 100%;
}</pre>
<p>Essentially, this prevents the image from being displayed at a size that is too large for the screen width. It also has the advantage that despite being a blanket rule, it won't adversely affect smaller images. For example, if you have an image for a logo in the top left corner, this rule won't increase it's size so that it fills the screen width which could spoil the look of your page.</p>
<p>I will just briefly mention another CSS trick and this one is useful when you have a number of images and you want the browser to select the most appropriate version for the device you on which the site is being viewed. I mentioned previously that there are four attributes usually associate with an image element. That is, the four most common attributes, not by any means the only attributes you can attach to an image. You can also add an attribute called srcset (source set). This has a string value and the string is a comma-separated list. The individual items in list are the url to the image followed by a space and the screen resolution for that image (1x, 2x and so on). An example of this might be</p>
<preclass="inset">
<img src=images/image1.jpg"
alt="cat relaxing in the sun"
width=480 height=350
srcset="images/image1-960.jpg 2x
images/image1-1440.jpg 3x
images/image1-1920.jpg 4x"
>
"</pre>
<p>Bear in mind that in this example, the browser will select an appropriate image for the resolution of the screen on which it is being displayed. Next, we will take a look at selecting an image based on the width of the screen.</p>
<h2class="sectiontitle">Responsive Width </h2>
<p>In the previous section, we looked at having the browser select an image from the source set (srcset) based on the screen density. Another approach is to choose an appropriately sized image based on the width of the viewport.</p>
<p>The <img> element shown below has a srcset attribute similar to the examples we saw earlier.</p>
<p>So, instead of specifying the pixel density (1x, 2x etc) we have specified the image width.</p>
<p>This assumes that the image will be the same width as the viewport. The advantage of this approach is that it is fast and the browser can make a decision about which image to download as early as possible in the page loading process. This happens before the CSS has been parsed or any decisions have been made on the layout</p>
<p>We can provide more information to the HTML to allow it to make better decisions on which image to load. For example, we could add a sizes attribute to the image as follows.</p>
<preclass="inset">
sizes="(max-width: 480px) 240px,
(max-width: 960px) 480px,
(max-width: 1440px) 960px,
1920px"</pre>
<p>This is selecting an image size based on the viewport width but the sizes are set based on likely viewport widths. If we take the first one, for example, for a screen width of up to 480px, we will get an image width of 240px. That is, we will download the image with a pixel width of 480 pixels, but we will; display it with a width of 240px.</p>
<h2class="sectiontitle">Responsive Pictures</h2>
<p>In the examples we have seen earlier, we have assumed that the same image is being displayed every time, but with different properties (density or width) to suit the platform. However, we may want to use an image that is displayed differently or is even a different image. On a large screen, for example, we might show an image of a dog with some of its surroundings displayed. On a smaller screen like a phone, perhaps we want to display an image that zooms in on the dog's face. We can't do that with an <img> element using the srcset or sizes attributes. To do this, we need a <picture> element.</p>
<p>We do still need an <img> element, but we can put this inside a <picture> element. We can then include our <img> element and this acts as a default so if the browser doesn't work with the newer features of JavaScript we are using here, it will still be able to load an image.</p>
<p>A <picture> element will look like this.</p>
<p>In addition to the <img> element, we have a couple of <source> elements. The first also includes a media query and this selects the larger image if the screen width is at least 600 pixels. If not, the second image is selected. Note that each of the <source> elements also has a <srcset> attribute so we could be even more flexible with the image selection.</p>
<p>It may be worth noting that while it seems like there would be a lot of work involved in creating different sized images from a single image, this process can be automated although how that is done is not covered in this course. I assume that it is covered in either the course on <ahref="https://www.linkedin.com/learning/responsive-images">Responsive Images</a> or <ahref="https://www.linkedin.com/learning/developing-for-web-performance">Developing for Web Performance</a>.</p>
<h2class="sectiontitle">Figure and Figacption</h2>
<p>Where you have a figure or an image that has a caption associated with it, you can put that caption inside a <figcaption> element. This tells the browser that a piece of text is a caption and we can take that further. Let's assume that the caption goes along with an image. We can put both the image and the <figcaption> element inside a <figure> element. For a search engine or AI, this means that the two things, the image and the caption, have a relationship with each other. In this website, I do tend to use captions with images and other figures quite a lot. Typically, this would look like</p>
<preclass="inset">
<p class="caption">Figure 1 - the "I love ducks!" alert</p>
<p>We can use variables in the console. Let's say that we want to create an alert box that displays the date. We can create a variable and initialise it with the Date() function like this.</p></pre>
