Bummer! This is just a preview. You need to be signed in with an account to view the entire instruction.

(UPI) Chapter 5: Image Manipulation in HTML

Well done!

You have completed (UPI) Chapter 5: Image Manipulation in HTML!

Sign up for Treehouse Back to Library
Instruction

Using the \<picture\> Element to Display Different Images for Different Viewport Sizes

The &lt;picture&gt; 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:

&lt;picture&gt;
    &lt;source media=&quot;(min-width: 968px)&quot; srcset=&quot;images/mountains_large.png&quot;&gt;
    &lt;so...