Advanced work with images: Prep

This session takes a focused look at the technical methods for using images in websites. You will learn about the pros and cons of formats like PNG, JPEG, AVIF, WEBP, and SVG, as well as some HTML and CSS patterns commonly used.

Learning outcomes

• Choose the most appropriate image format, AVIF and WebP
• Raster vs vector images
• Icon CDNs, picture element
• CSS for image dimensions, responsiveness, and colour
• SVG and CSS graphics

Pre-sessional activities

Priority

Robbins, Jennifer; "Web Image Basics"; Learning Web Design : A Beginner's Guide to HTML, CSS, JavaScript, and Web Graphics

Thomas D., "Inside Web Image Formats", 8 mins 29 seconds, 13 September 2023

Buddy Media, "Vector vs Raster Graphics", 2 mins 36 seconds, 2 July 2017

Before Semicolon, "When to use img, figure and picture tag", 2 mins 20 seconds, 2 June 2020

Also recommended

Robbins, Jennifer; "SVG"; Learning Web Design : A Beginner's Guide to HTML, CSS, JavaScript, and Web Graphics

A shot of code, "How to use AVIF today", 5 mins 6 seconds, 17 September 2020

Michael Brig, "HTML Tags - Picture", 3 mins 23 seconds, 21 July 2023

LinkedIn Learning, "HTML Tutorial - Responsive image markup", 6 mins 4 seconds, 4 April 2022

Coding Artist, "How to Draw CSS Shapes" playlist, approx 2 mins per video (occasionally 3 or 4 mins), 15 videos, 5 February 2019