Membuat gambar tetap tajam saat beda device dengan RETINA IMAGES dan CSS

 710 view     06 Februari 2017     Admin    Website 
  #Css     #Device     #Gambartajam     #Html     #Image     #Retina     #Website    

Share:


Membuat gambar tetap tajam saat beda device dengan RETINA IMAGES dan CSS

Secara garis besar, retina difungsikan untuk membuat gambar tidak pecah atau blur ketika dibuka pada device berasio tinggi.

Gambar retina sangat mirip dengan gambar adaptif yang diciptakan oleh Matt Wilcox, namun di mana gambar adaptif memuat versi yang lebih besar dari gambar jika perangkat yang lebih besar terdeteksi, Gambar retina memuat gambar yang lebih besar jika kepadatan pixel perangkat lebih besar dari 1.

Gambar retina berfungsi gambar yang berbeda berdasarkan pada perangkat yang digunakan oleh penonton. Setelah setup pada website Anda (sangat sederhana!) Yang harus Anda lakukan adalah membuat-res tinggi versi masing-masing gambar yang ingin Anda dioptimalkan untuk layar retina dan semua pekerjaan dilakukan untuk Anda. Anda bahkan tidak perlu mengubah apapun <img /> tag (menyediakan mereka memiliki tinggi atau lebar).
Disini kami berikan dua metode penggunaan yang pertama menggunakan tag <img src="xxx"> yang ke dua menggunakan background pada css. Berikut detailnya :

1. Menggunakan tag img src

<img src="/images/foo.png" alt="bar" srcset="/images/foo-medium.png 1024w, /images/foo.png 2x" sizes="(min-width: 1024px) 50vw, 100vw" />

 

2. Menggunakan tag <div> atau css menggunakan background 

CSS :

 .logo {
     background: url('garuda_1x.jpg') center center no-repeat;
     background-size: 200px 212px;
     width: 200px;
     height: 212px;
 }
 @media all and (-webkit-min-device-pixel-ratio: 1.5),
 all and (-o-min-device-pixel-ratio: 3 / 2),
 all and (min--moz-device-pixel-ratio: 1.5),
 all and (min-device-pixel-ratio: 1.5) {
     .logo {
         background: url('garuda_2x.jpg') center center no-repeat;
         background-size: 200px 212px;
     }
 }
 @media (-webkit-min-device-pixel-ratio: 2),
 (min-resolution: 192dpi) {
     .logo {
         background: url('garuda_2x.jpg') center center no-repeat;
         background-size: 200px 212px;
     }
 }
 //ini untuk rasio tinggi 3x lipat dari ukuran 1
 @media (-webkit-min-device-pixel-ratio: 3),
 (min-resolution: 288dpi) {
     .logo {
         background: url('garuda_3x.jpg') center center no-repeat;
         background-size: 200px 212px;
     }
 }

HTML :

 <div class="logo"></div>

 

Hasil Test :

 

logo garuda test

Sekilas tidak terlihat bedanya, tetapi kalau dilihat dari mobile akan terlihat bedanya. Gambar yang belum menggunakan retina image akan terlihat lebih blur atau berbayang.

Untuk download sourcenya bisa langsung click tombol download, maaf ya gan.. ada iklannya hihihi...

Download

Semoga berhasil. 

 


Share:


Comments