Workshop: Advanced work with images

Create an HTML page and linked CSS stylesheet and try out the following tasks.

Image formats and the picture element

1. Have a look at different image formats online (WebP and AVIF as compared to older image formats).

2. Create a <picture> element with WebP or AVIF as first source, and other fallback sources and <img> as needed.

OR

Start work on planning your website for the module assessment.

SVG icons and responsive images

1. On the same page create some icons using one of the methods shown in class.

2. Try creating some responsive images.

OR

Continue working on your website for the module assessment.