Serve different images depending on screen size

[rhuddlestone]

Hi

Is there any way I can serve a different image depending on screen size? Example on mobile serve image1.jpg and on large screen serve image2.jpg?

Thanks

[prototypa]

Hi @rhuddlestone

That is a good question. I will be reviewing in detail and let you know.

In any case, it is good to also ask it in the official repository of the official Astro dependency that we use for images:

Docs: https://docs.astro.build/en/guides/integrations-guide/image/
Repo: https://github.com/withastro/astro/tree/main/packages/integrations/image/

Thank you.

---

UPDATE: Hello @rhuddlestone and @ankushg

I found a good article that talks in details about how <img> and <picture> work and how to show different images depending on the viewport:

https://webdesign.tutsplus.com/tutorials/quick-tip-how-to-use-html5-picture-for-responsive-images--cms-21015

To implement this with Astro it would be a good idea to make a component using the getImage and getPicture methods of @astrojs/image.

When I have some time I'll try to do something and let you know. If anyone manages to do something similar, please share. Thanks.

[rhuddlestone]

Thanks for the quick answer. I will take a look at the docs.

[ankushg]

Would love to see usage of the Picture tag in this project, so we can get an idea for how to properly set the widths and sizes attributes in the template :)