La <picture>etiqueta HTML5 lo ayudará a resolver la fuente de imagen correcta dependiendo del ancho de la pantalla
Aparentemente, el comportamiento de los navegadores no ha cambiado mucho en los últimos 5 años y muchos aún descargarían las imágenes ocultas, incluso si hubiera una display: nonepropiedad establecida en ellas.
Aunque hay una solución alternativa de consultas de medios , solo podría ser útil cuando la imagen se configuró como fondo en el CSS.
Mientras pensaba que solo hay una solución JS para el problema ( carga diferida , relleno de imágenes , etc.), parecía que hay una buena solución HTML pura que viene con HTML5.
Y esa es la <picture>etiqueta.
Así es como MDN lo describe:
El elemento HTML<picture> es un contenedor utilizado para especificar múltiples <source>elementos para un <img>contenido específico contenido en él. El navegador elegirá la fuente más adecuada de acuerdo con el diseño actual de la página (las restricciones del cuadro en el que aparecerá la imagen) y el dispositivo en el que se mostrará (por ejemplo, un dispositivo normal o hiDPI).
Y aquí está cómo usarlo:
<picture>
<source srcset="mdn-logo-wide.png" media="(min-width: 600px)">
<img src="mdn-logo-narrow.png" alt="MDN">
</picture>
La lógica detrás
El navegador cargaría la fuente de la imgetiqueta, solo si no se aplica ninguna de las reglas de medios. Cuando el <picture>navegador no admite el elemento, volverá a mostrar la imgetiqueta.
Normalmente, colocaría la imagen más pequeña como fuente de la fuente <img>y, por lo tanto, no cargaría las imágenes pesadas para pantallas más grandes. Viceversa, si se aplica una regla de medios, <img>no se descargará la fuente , sino que descargará el contenido de la URL de la <source>etiqueta correspondiente .
El único inconveniente aquí es que si el elemento no es compatible con el navegador, solo cargará la imagen pequeña. Por otro lado, en 2017 deberíamos pensar y codificar en el primer enfoque móvil .
Y antes de que alguien salga demasiado, aquí está el soporte actual del navegador para <picture>:
Navegadores de escritorio
Navegadores móviles
Puede encontrar más información sobre el soporte del navegador en ¿Puedo usarlo ?
Lo bueno es que la oración de html5please es usarla con un respaldo . Y personalmente tengo la intención de seguir sus consejos.
Puede encontrar más información sobre la etiqueta en la especificación del W3C . Hay un descargo de responsabilidad allí, que me parece importante mencionar:
El pictureelemento es algo diferente de los de aspecto similar videoy audioelementos. Si bien todos ellos contienen sourceelementos, el srcatributo del elemento fuente no tiene sentido cuando el elemento está anidado dentro de un pictureelemento, y el algoritmo de selección de recursos es diferente. Además, el pictureelemento en sí no muestra nada; simplemente proporciona un contexto para su imgelemento contenido que le permite elegir entre múltiples URL.
Entonces, lo que dice es que solo lo ayuda a mejorar el rendimiento al cargar una imagen, al proporcionarle un contexto.
Y aún puede usar algo de magia CSS para ocultar la imagen en dispositivos pequeños:
<style>
picture { display: none; }
@media (min-width: 600px) {
picture {
display: block;
}
}
</style>
<picture>
<source srcset="the-real-image-source" media="(min-width: 600px)">
<img src="a-1x1-pixel-image-that-will-be-hidden-in-the-css" alt="MDN">
</picture>
Por lo tanto, el navegador no mostrará la imagen real y solo descargará la 1x1imagen de píxeles (que puede almacenarse en caché si la usa más de una vez). Sin embargo, tenga en cuenta que si el <picture>navegador no admite la etiqueta, incluso en las pantallas de escritorio, la imagen real no se mostrará (por lo que definitivamente necesitará una copia de seguridad de polyfill allí).
