5.4 Adding Images in HTML

After listening to the tutorial, I might as well have been listening to Mandurian because I didn’t really understand anything he was saying because he talked a lot about CSS and I’m still unsteady with my HTML skills. Because of this I set out to find a primer on how to insert images using HTML. I found that here at Tutorial Republic in their images section.

Here they explain that to enter an image, you must enter the following:

<img src=”url” alt=”some_text“>

This begins with the url for the actual image and ends with alternate text that describes the image. This site even has an option to try the code in another screen using Code Lab that shows you exactly how it would look if you were working on it. I found this extremely helpful as I am learning. You are even able to alter the code and see what effect your changes will have.

The next thing the website shows you how to do is how to format the height and width of an image. They explain that you need to use both measurements so the website knows how much space to allocate so there is no flicker when downloading the image.

They also explain how to use the style attribute to specify height and width. They explain that this keeps style sheets from overwriting the numbers that you entered since inline style has the highest priority. This is done as follows:

<img src=”kites.jpg” alt=”Flying Kites” style=”width: 300px; height: 300px;”>

Using the Code Lab feature to play with this helped me to understand better what was going on with the style attribute.

Next, they showed how to use the HTML5 picture tag. They explained that sometimes, scaling an image up or down to fit different devices doesn’t work as expected. Additionally, changing the image dimensions in HTML doesn’t reduce the original file size. To fix this issue, HTML5 has introduced the <picture> tag that allows you to define multiple versions of an image for different types of devices.

The picture element works like this:

<picture>
    <source media="(min-width: 1000px)" srcset="logo-large.png">
    <source media="(max-width: 500px)" srcset="logo-small.png">
    <img src="logo-default.png" alt="My logo">
</picture>

Basically, you set a minimum and a maximum size for the image and the browser will evaluate each element and choose the best match. Trying this in Code Lab really showed me how it works.

This chapter is a revised version of a blog post titled “Adding Images in HTML” on Lianne Learns Publishing