Jika gambar Anda tidak sesuai dengan tata letak, Anda dapat mengubah ukurannya di HTML. Salah satu cara termudah untuk mengubah ukuran gambar dalam HTML adalah menggunakan atribut
8 dan
9 pada tag img {
width: 400px,
height: 300px
}
0. Nilai-nilai ini menentukan tinggi dan lebar elemen gambar. Nilai ditetapkan dalam px i. e. piksel CSSMisalnya, gambar aslinya berukuran 640×960
//ik.imagekit.io/ikmedia/women-dress-2.jpg
Kita bisa merendernya dengan tinggi 500 piksel dan lebar 400 piksel
Jika tinggi dan lebar elemen gambar yang diperlukan tidak cocok dengan dimensi gambar sebenarnya, browser akan menurunkan [atau meningkatkan] gambar. Algoritme persis yang digunakan oleh browser untuk penskalaan dapat bervariasi dan bergantung pada perangkat keras dan OS yang mendasarinya.
Ada beberapa kelemahan dari pengubahan ukuran gambar sisi klien, terutama kualitas gambar yang buruk dan perenderan gambar yang lebih lambat. Untuk mengatasinya, Anda harus menyajikan gambar yang sudah diubah ukurannya dari server. Anda dapat menggunakan Thumbor atau CDN gambar gratis seperti ImageKit. io untuk mengubah ukuran gambar secara dinamis menggunakan parameter URL
Mengubah ukuran gambar di CSS
Anda juga dapat menentukan tinggi dan lebar dalam CSS
img {
width: 400px,
height: 300px
}
Mempertahankan rasio aspek sambil mengubah ukuran gambar
Saat Anda menentukan
8 dan
9, gambar mungkin kehilangan rasio aspeknya. Anda dapat mempertahankan rasio aspek dengan menentukan hanya
9 dan menyetel
8 ke img {
width: 400px,
height: 300px
}
5 menggunakan properti CSSimg {
width: 400px,
height: auto
}
Ini akan membuat gambar selebar 400px. Ketinggian disesuaikan untuk menjaga rasio aspek dari gambar asli. Anda juga dapat menentukan atribut
_8 dan menyetel
9 sebagai img {
width: 400px,
height: 300px
}
5, tetapi sebagian besar tata letak umumnya dibatasi lebar dan bukan tinggiGambar responsif yang menyesuaikan berdasarkan lebar yang tersedia
Anda dapat menentukan lebar dalam persentase alih-alih angka absolut untuk membuatnya responsif. Dengan menyetel
_9 ke img {
width: 400px,
height: auto
}
0, gambar akan diskalakan jika diperlukan agar sesuai dengan lebar elemen induk. Ini mungkin menghasilkan gambar buram karena gambar dapat diperbesar menjadi lebih besar dari ukuran aslinyaimg {
width: 100%;
height: auto;
}
Alternatifnya, Anda dapat menggunakan properti
img {
width: 400px,
height: auto
}
_1. Dengan pengaturanmax-width:100%;
gambar akan diperkecil jika perlu, tetapi jangan pernah diperbesar menjadi lebih besar dari ukuran aslinya
img {
max-width: 100%;
height: auto;
}
Bagaimana cara mengubah ukuran & memotong gambar agar sesuai dengan area elemen?
Sejauh ini, kita telah membahas cara mengubah ukuran gambar dengan menentukan
8 atau
9 atau keduanyaSaat Anda menentukan
8 dan
9, gambar dipaksa untuk menyesuaikan dengan dimensi yang diminta. Itu bisa mengubah rasio aspek asli. Terkadang, Anda ingin mempertahankan rasio aspek sementara gambar menutupi seluruh area meskipun sebagian gambar terpotong. Untuk mencapai ini, Anda dapat menggunakan- Gambar latar belakang
_6 properti cssimg { width: 400px, height: auto }
Mengubah ukuran gambar latar belakang
img {
width: 400px,
height: auto
}
_7 adalah properti CSS yang sangat kuat yang memungkinkan Anda menyisipkan gambar pada elemen selain img {
width: 400px,
height: 300px
}
0. Anda dapat mengontrol pengubahan ukuran dan pemangkasan gambar menggunakan atribut CSS berikut-
_9 - Ukuran gambarimg { width: 400px, height: auto }
0 - Posisi awal gambar latar belakangimg { width: 100%; height: auto; }
background-size
Secara default, gambar latar belakang ditampilkan dalam ukuran penuh aslinya. Anda dapat menimpanya dengan menyetel tinggi dan lebar menggunakan properti CSS
img {
width: 400px,
height: auto
}
9. Anda dapat menskalakan gambar ke atas atau ke bawah sesuai keinginan
.background {
background-image: url["/image.jpg"];
background-size: 150px;
width: 300px;
height: 300px;
border: solid 2px red;
}
Nilai yang mungkin dari
img {
width: 400px,
height: auto
}
_9
5 - Merender gambar dalam ukuran penuhimg { width: 400px, height: 300px }
4 - Mengatur lebar dan tinggi gambar latar belakang. Nilai pertama mengatur lebar, dan nilai kedua mengatur tinggi. Jika hanya satu nilai yang diberikan, yang kedua disetel keimg { width: 100%; height: auto; }
5. Misalnya,img { width: 400px, height: 300px }
_6 atauimg { width: 100%; height: auto; }
7img { width: 100%; height: auto; }
8 - Mengatur lebar dan tinggi gambar latar belakang dalam persentase elemen induk. Nilai pertama mengatur lebar, dan nilai kedua mengatur tinggi. Jika hanya satu nilai yang diberikan, yang kedua disetel keimg { width: 100%; height: auto; }
5. Misalnya,img { width: 400px, height: 300px }
0 ataumax-width:100%;
1max-width:100%;
Ini juga memiliki 2 nilai khusus
max-width:100%;
_2 dan max-width:100%;
3background-size. mengandung
max-width:100%;
_4 - Ini mempertahankan rasio aspek asli gambar, tetapi gambar diubah ukurannya sehingga terlihat sepenuhnya. Tinggi atau lebar terpanjang akan sesuai dengan dimensi yang diberikan, terlepas dari ukuran kotak yang berisi
.background {
background-image: url["/image.jpg"];
background-size: contains;
width: 300px;
height: 300px;
border: solid 2px red;
}
background-size. menutupi
max-width:100%;
_3 - Ini mempertahankan rasio aspek asli tetapi mengubah ukuran gambar untuk menutupi seluruh wadah, bahkan jika gambar harus ditingkatkan atau dipotong
.background {
background-image: url["/image.jpg"];
background-size: cover;
width: 300px;
height: 300px;
border: solid 2px red;
}
properti CSS sesuai-objek
Anda dapat menggunakan properti CSS
img {
width: 400px,
height: auto
}
_6 pada elemen img {
width: 400px,
height: 300px
}
0 untuk menentukan bagaimana gambar harus diubah ukurannya & dipotong agar sesuai dengan wadah. Sebelum properti CSS ini diperkenalkan, kami harus menggunakan gambar latar belakangSeiring dengan
max-width:100%;
8, max-width:100%;
9, dan img {
max-width: 100%;
height: auto;
}
0, ada 5 nilai yang lebih mungkin untuk object-fit
_2. Ini mempertahankan rasio aspek asli gambar, tetapi gambar diubah ukurannya sehingga terlihat sepenuhnya. Tinggi atau lebar terpanjang akan sesuai dengan dimensi yang diberikan, terlepas dari ukuran kotak yang berisimax-width:100%;
_3. Itu mempertahankan rasio aspek asli tetapi mengubah ukuran gambar untuk menutupi seluruh wadah, bahkan jika itu harus memperbesar gambar atau memotongnyamax-width:100%;
3. Ini adalah nilai default. Gambar akan mengisi area tertentu, meskipun itu berarti kehilangan rasio aspeknyaimg { max-width: 100%; height: auto; }
4. Gambar tidak diubah ukurannya sama sekali, dan ukuran gambar asli memenuhi area yang diberikanimg { max-width: 100%; height: auto; }
5. Yang lebih kecil mengandung atau tidak sama sekaliimg { max-width: 100%; height: auto; }
Anda dapat menggunakan
img {
max-width: 100%;
height: auto;
}
_6 untuk mengontrol posisi awal gambar seandainya bagian gambar yang dipotong sedang direnderMari kita pahami ini dengan contoh
Lebar asli gambar berikut adalah 1280px dan tingginya 854px. Di sini diregangkan ke lebar maksimum yang tersedia menggunakan
img {
max-width: 100%;
height: auto;
}
7
0cocok untuk objek. berisi
_1Rasio aspek asli gambar sama, tetapi gambar diubah ukurannya sehingga terlihat sepenuhnya. Kami telah menambahkan
img {
max-width: 100%;
height: auto;
}
_8 perbatasan di sekitar gambar untuk menampilkan inisesuai objek. menutupi
_2Rasio aspek asli dipertahankan tetapi untuk menutupi seluruh area, gambar dipotong dari sisi kiri dan kanan
sesuai objek. mengisi
_3Gambar dipaksa masuk ke dalam penampung selebar 200px dengan tinggi 300px, rasio tinggi lebar asli tidak dipertahankan
sesuai objek. tidak ada
4cocok untuk objek. perkecil
5cocok untuk objek. penutup dan posisi objek. benar
6Kelemahan pengubahan ukuran gambar sisi klien
Ada kerugian tertentu dari pengubahan ukuran sisi klien yang harus Anda ingat
1. Rendering gambar lambat
Karena gambar berukuran penuh tetap dimuat sebelum pengubahan ukuran terjadi di browser, dibutuhkan lebih banyak waktu untuk menyelesaikan pengunduhan dan akhirnya merender. Ini berarti bahwa jika Anda memiliki besar, 1. Foto 5 megabyte, 1024×682 yang Anda tampilkan dengan lebar 400px, keseluruhan 1. Gambar 5 megabyte diunduh oleh pengunjung sebelum browser mengubah ukurannya menjadi 400px
Anda dapat melihat waktu pengunduhan ini di panel jaringan, seperti yang ditunjukkan pada gambar di bawah
Di sisi lain, jika Anda mengubah ukuran gambar di server menggunakan beberapa program atau CDN gambar, browser tidak perlu memuat data dalam jumlah besar dan membuang waktu mendekode & merendernya
Dengan ImageKit. io, Anda dapat dengan mudah mengubah ukuran gambar menggunakan parameter URL. Sebagai contoh -
Gambar asli
https. //ik. com.imagekit. io/ikmedia/women-dress-2. jpg
Gambar lebar 400px dengan rasio tinggi lebar dipertahankan
https. //ik. com.imagekit. io/ikmedia/women-dress-2. jpg?tr=w-400
2. Kualitas gambar buruk
Algoritme penskalaan yang tepat yang digunakan oleh browser dapat bervariasi, dan kinerjanya bergantung pada perangkat keras dan OS yang mendasarinya. Saat gambar yang relatif lebih besar diubah ukurannya agar sesuai dengan wadah yang lebih kecil, gambar akhir bisa terlihat buram
Ada tradeoff antara kecepatan dan kualitas. Pilihan terakhir tergantung pada browser. Firefox 3. 0 dan versi yang lebih baru menggunakan algoritme resampling bilinear, yang disetel untuk kualitas tinggi daripada kecepatan. Tapi ini bisa bervariasi
Anda dapat menggunakan properti CSS
img {
max-width: 100%;
height: auto;
}
_9 , yang menentukan cara browser merender gambar jika diperbesar atau diperkecil dari dimensi aslinya
_73. Pemborosan bandwidth
Karena gambar berukuran penuh tetap dimuat, ini menghasilkan pemborosan bandwidth, yang sebenarnya bisa dihemat. Transfer data tidak murah. Selain meningkatkan tagihan bandwidth Anda, ini juga membebani pengguna Anda dengan uang sungguhan
Jika Anda menggunakan CDN gambar, Anda dapat mengurangi konsumsi bandwidth lebih lanjut dengan menyajikan gambar dalam format generasi berikutnya e. g. WebP atau AVIF
Dasbor ramah pengguna juga akan menunjukkan kepada Anda berapa banyak bandwidth yang telah Anda hemat sejauh ini
4. Peningkatan memori dan persyaratan pemrosesan pada perangkat klien
Mengubah ukuran gambar besar agar sesuai dengan wadah yang lebih kecil mahal dan bisa menyakitkan pada perangkat kelas bawah di mana memori dan daya pemrosesan terbatas. Ini memperlambat seluruh halaman web dan menurunkan pengalaman pengguna
Ringkasan
Saat mengimplementasikan halaman web, gambar harus pas dengan tata letak dengan sempurna. Inilah yang perlu Anda ingat untuk dapat mengimplementasikan desain responsif