The most common use case when working with responsive images is you need different resolutions of the same image for different screen sizes. For this particular straightforward use case, Chris Coyier recommends using srcset
on the <img>
tag to control which image gets loaded in different widths rather than using the more verbose and complicated <picture>
tag with explicit <source>
declarations. Click the button to read the full discussion.
Pingback: Responsive Image Using Foto.js