Picture tag mobiel/desktop

Developing with Prismic
1

I'm looking for a definitive explanation of how to implement different image sizes for mobile / desktop.
I have my different aspect ratios configured but I'm not sure which component to use to get them as a src set or maybe a picture tag?
There are some threads on here but they don't actually suggest a way to implement it.
My use case is a hero image.

Thanks Dan

3

Hey Daniel, I think you can use whatever is more comfortable to you. A regular tag can work if you add all the sized in a srcset attribute. Generally, it's always better to separate the context of each image to convey a more organized sturcture in the HTML. So, you're right, using the element is best as it allows you to to specify different images for different viewport sizes or conditions.
Here's a simple example:

<picture>
  <source media="(min-width: 768px)" srcset={doc.data.myImageField.url}>
  <source media="(max-width: 767px)" srcset={doc.data.myImageField.mobile.url}">
  <img src="small.jpg" alt="Hero Image">
</picture>