Merge pull request #116 from Birkbeck2/css24

added workshop for advanced images

outline.js

@@ -141,12 +141,12 @@ export const outline = [
         {
           text: 'Prep',
           link: '/lectures/advanced-images.html',
+        },
+        {
+          text: 'Workshop: Advanced work with images',
+          link: '/workshops/advanced-images/index.html',
+
         }
-    //    {
-    //      text: 'Workshop: Grids and other CSS concepts',
-    //      link: '/workshops/grid/index.html',
-    //      
-    //    }
       ]
     },
   // {

workshops/advanced-images/index.md

@@ -0,0 +1,23 @@
+# 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.