Diseño responsive - Media Queries - Cómo no cargar ciertas imágenes

Question

OK, así que diseñé un diseño de respuesta que no muestra imágenes para tamaños de pantalla muy pequeños, utilizando consultas de medios y display: none;.

tan bueno.Pero estas imágenes aún se descargan en estos dispositivos, causando un aumento en el ancho de banda.

¿Cuál es la forma correcta de hacer que estas imágenes no se descarguen en los dispositivos especificados?

¡Cualquier respuesta sería muy apreciada!

Answer 1

La única solución accesible en este momento es envolver la imagen con etiquetas <noscript> y luego extraer la imagen más tarde con javascript. Las cookies no funcionan en la carga de la primera página (HTMLPreloadScanner), ni con CDN.El rastreo del navegador es inútil si sus imágenes no siempre están al 100% de la ventana gráfica.

Slimmage.js implementa imágenes sensibles al contexto en 3 KB de vainilla JS .

El marcado también es bastante simple:

<noscript data-slimmage>
  <img src="http://z.zr.io/ri/1s.jpg?width=150" />
</noscript>

Por supuesto, puede crear un ayudante del lado del servidor para incluso abstraer esto.

Answer 2

Se me ocurren dos opciones:

1. Detecte dispositivos pequeños en el servidor mediante el rastreo del navegador y envíeles un código HTML diferente que no haga referencia a las imágenes.
2. Muestre las imágenes a través de CSS en lugar de HTML (en atributos style si lo desea), usando background-image o :before / :after y content (no es compatible con IE 6 o 7) y envuelve ese código CSS en consultas de medios para que solo se muestre en dispositivos con pantallas más grandes.

Answer 3

Si no le importa una dependencia de JavaScript, podría comprobarlo window.innerWidth yInserte las etiquetas de la imagen para pantallas suficientemente grandes.

Las imágenes solo se solicitarán si Javascript está habilitado y la ventana lo suficientemente grande.

Answer 4

Si no tiene ningún problema al utilizar JavaScript adicional, puede probar ESTO .Me encontré con él mientras buscaba y aprendía sobre consultas de medios.