Picture

Art direction

Using different images or the same image that have been cropped to fit a particular screen's features can help in communicating a message effectively.

<picture>
      <!-- Show a portrait cropped version of the image in grayscale for viewports up to 320px -->
      <source media="(max-width: 320px)" 
              srcset="https://zenhub.zengenti.com/image-examples/tree-frog.jpg?w=240&h=320&fit=crop&e=grayscale 240w">

      <!-- Show a portrait cropped version of the image for viewports up to 480px -->
      <source media="(max-width: 480px)" 
              srcset="https://zenhub.zengenti.com/image-examples/tree-frog.jpg?w=240&h=320&fit=crop 240w">

      <!-- Show a traditional 4:3 crop of the image for viewports up to 640px -->
      <source media="(max-width: 640px)" 
              srcset="https://zenhub.zengenti.com/image-examples/tree-frog.jpg?w=640&h=320&fit=crop 640w">

      <!-- Show a letterbox crop of the image for viewports up to 1920px -->
      <source media="(max-width: 1920px)" 
              srcset="https://zenhub.zengenti.com/image-examples/tree-frog.jpg?w=1024&h=450&fit=crop-bottom 1024w">

      <!-- Show a tighter letterbox crop of the image for viewports larger than 1921px -->
      <source media="(min-width: 1921px)" 
              srcset="https://zenhub.zengenti.com/image-examples/tree-frog.jpg?w=1920&h=600&fit=crop 1920w">

      <img src="https://zenhub.zengenti.com/image-examples/tree-frog.jpg?w=240&h=320&fit=crop" 
           alt="Dainty tree frog">
</picture>

See the Pen Responsive Images - Art Direction by Zengenti (@zengenti) on CodePen.

View CodePen

results matching ""

    No results matching ""