JWS Docs / Build Steps / Image Panel

Changing the Image panel

We are now going to add some images you may have your own sized and optimised photographs already. That might also be converted into the modern Webp and/or Avif format too.

If not feel free to use our provided placeholder svg's.

If you need help with how to size and optimise images? You can check out our explanation at ImgFunction.

As you can see we already have the <div class="img_panel_full"> with its CSS flex properties defined so the images inside the <div> are evenly spaced and wrap down the page as the browser window gets smaller.

It also contains three self closing <img> tags each with the same placeholder image.

Image Source Links

Inside the <img src="img/darkforest.svg"> we first need to call the image from its source with src=""

Then inside this we add the path to where the image is being stored. In this case a folder named src="img"

Next add the image name src="img/darkforest.svg"

Image Height & Width

After the source we need to define the actual size of the image like this width="333" height="240"

We than have a couple of CSS classes img_responsive_size which controls the image size and img_spacing that adds spacing so images don't touch when wrapping.

Lastly the alt="image of a dark forest" this is alternative descriptive text which will show if the browser cannot find your image for some reason.

Optimised Images

Making your images into Webp and Avif files greatly reduces the file size while producing great quality responsive images, and unfortunately even though web browser support for these formats is improving as yet they are not quite fully supported by all.

So we still need to offer fallback support to your sized & optimised jpg's.

Picture Element

To do this we need to use the <picture> </picture> element we start by wrapping it around our original <img> tag

<picture>
    <img src="img/stephensonrocket.jpg" width="300" height="225" class="img_responsive_size img_spacing" alt="photo of stephenson rocket">
</picture>

Additional Image Source

We then need to include the new e.g Webp image by using a <source> tag this we place inside the <picture> element above the <img> tag.

Like the <img> we add a source path though here we use the srcset="" the browser will now know to show priority to this image.

We also tell the browser what type of image file it is type="image/webp" if you miss out this or it is not supported then the browser goes to the next <source> if more than one or the original <img>

<picture>
    <source srcset="img/stephensonrocket.webp" type="image/webp">
    <img src="img/stephensonrocket.jpg" width="300" height="225" class="img_responsive_size img_spacing" alt="photo of stephenson rocket">
</picture>

You can now do these steps for each of the images then after the last closing </picture> element we need to close the img_panel_full with a closing tag</div>

We have now come to the end of the <main> element section so need to make sure it is also closed </main>