Simple picture component for pattern lab.

data.json

{
  "breakpoints": {
    "desktop": "all and (min-width: 1200px)",
    "tablet": "all and (min-width: 768px) and (max-width: 1199px)",
    "mobile": "all and (max-width: 767px)"
  }
}

picture_pattern_lab.twig

<picture>
  {% for key, source in sources %}
    <source media="{{ breakpoints[key] }}" srcset="{{ source }}">
  {% endfor %}
  <img src="{{ src }}" alt="{{ alt }}">
</picture>

picture_pattern_lab.yml

sources:
  desktop: "https://via.placeholder.com/1920x1080?text=Desktop+image"
  tablet: "https://via.placeholder.com/1200x900?text=Tablet+image"
  mobile: "https://via.placeholder.com/768x500?text=Mobile+image"
src: "https://via.placeholder.com/1920x1080?text=Fallback+image"
alt: "Vestibulum ante ipsum"