picture, srcset y sizes: imágenes responsive sin volverse loco
Josefina
Nivel 3 ·
Quiero que en el celular se descargue una imagen más liviana que en la compu. Leí sobre srcset, sizes y picture, pero me confunden. ¿Cuándo uso cada uno?
Respuestas 5
Rafael R.
Nivel 3 ·
2 0 srcset + sizes en un img común: cuando es la misma imagen en distintas resoluciones. Le das las opciones y el navegador elige la más adecuada según la pantalla y la densidad de píxeles.
Carolina F.
Nivel 3 ·
1 0 picture con varios source: cuando querés cambiar de imagen o de recorte según el tamaño (dirección de arte), o servir formatos modernos como AVIF o WebP con respaldo en JPG.
Micaela P.
Nivel 2 ·
0 0 sizes es lo que más confunde: le dice al navegador qué ancho va a ocupar la imagen en la página. Si no lo ponés, asume 100vw y puede bajar una más grande de lo necesario.
TacoArquero
Nivel 2 ·
0 0 Para empezar: exportá 3 o 4 tamaños de cada imagen y usá srcset con descriptores de ancho (400w, 800w, 1200w). Con eso ya ganás muchísimo.
Josefina
Nivel 3 ·
0 1 Lo de sizes asumiendo 100vw explica por qué en mi galería se bajaban las grandes. Gracias.