Bummer! This is just a preview. You need to be signed in with an account to view the entire instruction.
- Using the \<img\> Element with srcset and sizes Attributes
- Using the \<picture\> Element to Display Different Images for Different Viewport Sizes
- Displaying Images in Alternative Formats with the \<picture\> Element
- Optimizing Images for Responsive Web Design: Techniques for Different Viewport Sizes Quiz 5 questions
Well done!
You have completed (UPI) Chapter 5: Image Manipulation in HTML!
Instruction
Displaying Images in Alternative Formats with the \<picture\> Element
Besides viewport-specific images, the <picture> element allows you to offer alternative image formats. Some formats, like AVIF and WebP, offer smaller file sizes and faster load times while maintaining image quality. Using <picture>, you can specify an image in an alternative format, with the browser falling back to a standard format if the alternative isn’t supported.
Example Code: ...