Design reattivo - Media query - Come non caricare determinate immagini

Question

Ok, quindi ho progettato un layout reattivo che non mostra immagini per schermi di dimensioni molto ridotte, utilizzando query multimediali e display: none;.

Fin qui tutto bene.Ma queste immagini vengono comunque scaricate su questi dispositivi, provocando un aumento della larghezza di banda.

Qual è il modo corretto per impedire che queste immagini vengano scaricate sui dispositivi specificati?

Qualsiasi risposta sarebbe molto apprezzata!

Answer 1

L'unica soluzione accessibile in questo momento è racchiudere l'immagine con tag <noscript>, quindi estrarre l'immagine in un secondo momento con javascript. I cookie non funzionano al caricamento della prima pagina (HTMLPreloadScanner), né con CDN.Lo sniffing del browser è inutile se le tue immagini non sono sempre al 100% della visualizzazione.

Slimmage.js implementa immagini responsive contestuali in 3 KB di JS vaniglia .

Anche il markup è piuttosto semplice:

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

Naturalmente, puoi creare un assistente lato server per astrarre anche questo.

Answer 2

Mi vengono in mente due opzioni:

1. Rileva piccoli dispositivi sul server utilizzando lo sniffing del browser e invia loro un codice HTML diverso che non fa riferimento alle immagini.
2. Visualizza le immagini tramite CSS anziché HTML (negli attributi style se lo desideri), utilizzando background-image o :before / :after e content (non supportato da IE 6 o 7) e racchiude il codice CSS nelle query multimediali in modo che venga visualizzato solo dai dispositivi con schermi più grandi.

Answer 3

Se non ti dispiace una dipendenza JavaScript puoi controllare window.innerWidth eInserire i tag immagine per schermi sufficientemente grandi.

Le immagini sarebbero state richieste solo se JavaScript è abilitato e la finestra è abbastanza grande.

Answer 4

Se non si dispone di problemi utilizzando un ulteriore JavaScript, allora puoi provare questo .Mi sono imbattuto su di esso durante la ricerca e l'apprendimento delle query dei media.