HiSRC jQuery vtičnik za odzivne slike

HiSRC je jQuery vtičnik za reševanje problematike odzivih slik v odzivnem spletnem designu (RWD). Vtičnik uporablja metodo zamenjave slik na podlagi uporabnikove hitrosti povezave in ločljivosti naprave preko katere dostopa.

Kako deluje HiSRC jQuery vtičnik?

  1.  Brskalnik naloži “mobile first” sliko s klasično metodo IMG SRC atributom.
  2. HiSRC jQuery vtičnik preveri moč prenosa (npr. 3G) in če je slednja nizka ostane na osnovni sliki.
  3. Če je povezava močnejša oz. hitrejša in brskalnik podpira boljše zaslone (npr. retina) slika 2x zamenja sliko “mobile first”.
  4. Če je povezava hitrejša in večji zaslon, se slika “mobile first” zamenja z sliko 1x.

Primer izpisa

<div>
<img src="https://placehold.it/200x100.png" data-1x="http://placehold.it/400x200.png" data-2x="http://placehold.it/800x400.png">
</div>

Avtor vtičnika HiSRC je Christopher Schmitt, ki ima na to temo tudi zanimivo predavanje “Adaptive Images for Responsive Web Design”, ki si ga je vredno ogledati, če vas tematika odzivnih slik v odzivnem oblikovanju zanima.

Več informacij o vtičniku in prenos vtičnika HiSRC – https://github.com/teleject/hisrc

Komentiraj


*