Cacher is the code snippet organizer for pro developers

<?php
$full_url = $hero['image']['url'];
$mobile_url = $hero['image_mobile']['url'];
$alt = $hero['image']['alt'];
$breakpoint = 480; // Mobile image will display at or below this breakpoint.

printf(
  '<picture>
    <source media="(max-width: %dpx)" srcset="%s">
    <source media="(min-width: %dpx)" srcset="%s">
    <img src="%s" alt="%s">
  </picture>',

  esc_attr( $breakpoint ),
  esc_attr( $mobile_url ),

  esc_attr( $breakpoint + 1 ),
  esc_attr( $full_url ),

  esc_attr( $full_url ),
  esc_attr( $alt )
);