Next.js tiene un componente de imagen que carga imágenes de forma diferida y también proporciona un srcset para una imagen determinada.
Sin embargo, a veces queremos entregar diferentes imágenes para diferentes dispositivos ( redirección de arte ).
Mozilla dice que deberíamos usar el elemento <picture> para este propósito, proporcionando diferentes imágenes para diferentes consultas de medios.
No puedo encontrar un artículo (incluso en los documentos oficiales de next.js) que nos diga cómo podemos hacer eso usando el componente <Image> .
¿Es posible? ¿Cómo puedo usar el componente next.js <Image> y el elemento HTML <picture> juntos?
He buscado en cientos de sitios web, esta es la única solución que encontré que funciona en Next.js (con tailwindcss).
import Image from 'next/image' <div> <div className="md:hidden"> <Image src="Banner-767x500.webp" height={500} width={767} /> </div> <div className="hidden md:inline-flex lg:hidden"> <Image src="Banner-1023x500.webp" height={500} width={1023} /> </div> <div className="hidden lg:inline-flex xl:hidden"> <Image src="Banner-1400x500.webp" height={500} width={1400} /> </div> <div className="hidden xl:inline-flex"> <Image height={500} width={2000} src="Banner-2000x500.webp" /> </div> </div>