How to make <picture> with 'next/image'?
How to make that in Next with 'next/image'?
<picture>
<source media="(min-width: 1300px)" srcset="img/logo-desktop.jpg">
<source media="(min-width: 768px)" srcset="img/logo-tablet.jpg">
<img class="page-header__logo" src="img/logo-mobile.jpg" ">
</picture>
2 Replies
Generally, I think working with Next's image types is a PITA.
From what I can tell, they don't really have a great solution for that
<picture>
like use case (someone feel free to correct me).
See: https://github.com/vercel/next.js/discussions/26065 and https://github.com/vercel/next.js/discussions/25393.
Apparently they're "making progress" https://github.com/vercel/next.js/discussions/25393#discussioncomment-4301796
You might be able to play around with the image sizes configuration: https://nextjs.org/docs/api-reference/next/image#image-sizes.
Sorry for the "non-answer" answer, but that's all I can dig up. I’d use something other than next image