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
Using the \<picture\> Element to Display Different Images for Different Viewport Sizes
The <picture> element offers more control by allowing you to specify entirely different images for various viewport sizes. This method is beneficial if you want to serve different images (with unique details or styles) to match specific screen sizes or orientations.
Example Code:
<picture>
<source media="(min-width: 968px)" srcset="images/mountains_large.png">
<so...