Technology
Welcome to the no script show about modern web design where we look at what we can build today with minimal software and skills.
Today we are talking about web images. We’ll cover technological changes such as new optimised formats and CSS properties.
And talk about the challenges of creating a fast and eco-friendly experience whilst also trying to make visually attractive designs for devices that range from wrist watches to 4k TV screens.
In this episode of No Script Show, hosts David Waumsley and Nathan Wrigley dive into the latest advancements in web images and their impact on design, performance, and the environment. Discover the essential tools and techniques for optimising your web visuals in today’s digital landscape.
- Explore new CSS properties like object fit, aspect ratio, and filters to enhance responsive web design.
- Understand the importance of image optimisation with WordPress features for alt tags and the use of "loading=lazy" for improved loading times.
- Learn about the "picture" tag and "source set" for effective art direction and device-specific imagery.
- Discussion on the pros and cons of using HTML tags vs. CSS for background images, especially in responsive design contexts.
- Delve into the latest image formats such as WebP and AVIF, and their role in modern web development.
Timestamps:
00:00 Struggling with web image complexity and lag.
06:17 Some generator colours work best with black.
07:09 CSS features for clipping, masking, and filtering.
12:02 Debating image use in HTML and CSS.
14:50 WordPress CMS made adding alt tags effortless.
19:32 Picture tag allows for adaptable image selection.
21:48 Struggle with image cropping and coding dilemmas.
24:56 Exciting technology, but hindered by third-party solution.
28:12 Google promoting WebP, SVG v2 from 2018.
32:45 Images can drive powerful messages if relevant.
36:31 Questioning use of stock images in medicine.
37:33 Web development trends and tools discussed, worthwhile.