Use different image content for mobile and desktop in Drupal 8 (Art direction)
This tutorial shows how to create a reusable container to display different images dependent on the viewport width. Scenario The website should display a different image depending on the viewport size. These images are art-directed, which means they will differ in content and layout and are created specifically for desktop and mobile respectivly. The goal is to have a reusable concept which allows using our existing image optimization pipelines, but will not include patching of existing components and will minimize site traffic. The solution should also work for Internet Explorer 11 ;( Serving both images and using CSS to hide one or the other, is out of the question as it will ultimately download both images. The picture element is a good start but rendering it manually would circumvent our existing image optimizations. Components We use the following components: Drupal 8 Paragraphs Module (Optional) Responsive Images Module reSmush.it image style optimizer Module (Optional) WebP M