Gęstość ekranu – dopasowane wyświetlanie obrazków

Gęstość ekranu – parametr określający liczbę pikseli znajdujących się na określonej powierzchni. PPI – pixels per inch.

 

Retina – posiada powiększona gęstość ekranu w porównaniu ze standardowymi ekranami.

Powiększenia ekranu od 1.5 do 2.25 raza.

 

Narzędzie do przeliczania wymiarów obrazka dla większych gęstości.

 

Odmienne obrazki w zależności od gęstości ekranu:

span.icon{
  background:url(mypath/icon.png) no-repeat center center;
}
@media only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min-device-pixel-ratio: 2) {
  span.icon{
    background-image: url(mypath/icon@2.png);
    background-size:200px 200px;
  }
}

 

gdzie:
icon.png – wymiar 100px x 100px
icon@2.png – wymiar 200px x 200px

 

Za pomocą pluginu Foresight – posiadającgo funkcję wykrywania gęstości urządzenia przed wyświetleniem obrazków.

  <img data-src="images/myimg.jpg" data-width="500" data-height="200" class="myimg">
  <noscript>
    <img src="images/myimg.jpg">
  </noscript>

.myimg { width:100%; font-family: 'image-set(url(-small|-small-2x) 2x high-bandwidth)';}