Mengatur ukuran background image responsive.

CSS Background image Responsive.

Postingan terkait:

Audit Image Sizing Pagespeed Insight

Background image responsive

Contoh

Ubah perbesar / perkecil layar untuk melihat efeknya.

Praktik - CSS 1

CSS background image

.div-img {
height: 400px;
background-image: url(200w.png);
background-repeat: no-repeat;
background-size: contain;
background-position-x: center;
}

@media (min-width: 500px) {
.container {
background-image: url(640w.png);
width: auto;
}
.div-image {
background-image: url(1200w.png);
}
}

Penjelasan CSS 1

Mengatur media query @media

Media queri pada CSS diatas (min-width:500px) berarti hanya mengarahkan tampilan background image pada rentang lebar layar mulai 500px keatas. Berarti pada rentang lebar layar dibawah 500px pada media query tidak tersedia alias tanpa background.
Tetapi karena diluar media query sudah tersetting css dengan ukuran height:400px dan URL file 200w maka background akan tertutupi dengan file 200w ini.
Untuk membuat media query yang bisa mencakup semua lebar layar stidaknya layar laptop ukuran 11" atau sekitar 1366px - 1400px, memerlukan beberapa file gambar dengan ukuran width atau height yang berbeda-beda. Dan satu media query untuk tiap-tiap ukuran tersebut.
Jika maksimal layar 1366px sampai 1400px setidaknya sediakan ukuran gambar untuk layar dari yang terkecil:
1. ponsel 360px untuk uji di Googlebot,
2. 420px rata-rata ponsel umum,
3. 680px - 1024px untuk tablet
4. dan 1100px keatas untuk layar laptop atau smart tv.
Contoh media query:

@media (max-width:420px){
div{background-image: url(300w.png);}
}

@media (max-width:550px){
div{background-image: url(400w.png);}
}

@media (max-width:680px){
div{background-image: url(600w.png);}
}

@media (max-width:1100px){
div{background-image: url(800w.png);}
}

@media (min-width:1101px){
div{background-image: url(1000w.png);}
}

HTML tag `<img>`