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 <img src="//ik.imagekit.io/ikmedia/women-dress-2.jpg" width="400" height="500" />8 dan <img src="//ik.imagekit.io/ikmedia/women-dress-2.jpg" width="400" height="500" />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 CSS
Misalnya, gambar aslinya berukuran 640×960
//ik.imagekit.io/ikmedia/women-dress-2.jpgKita bisa merendernya dengan tinggi 500 piksel dan lebar 400 piksel
<img src="//ik.imagekit.io/ikmedia/women-dress-2.jpg" width="400" height="500" />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 <img src="//ik.imagekit.io/ikmedia/women-dress-2.jpg" width="400" height="500" />8 dan <img src="//ik.imagekit.io/ikmedia/women-dress-2.jpg" width="400" height="500" />9, gambar mungkin kehilangan rasio aspeknya. Anda dapat mempertahankan rasio aspek dengan menentukan hanya <img src="//ik.imagekit.io/ikmedia/women-dress-2.jpg" width="400" height="500" />9 dan menyetel <img src="//ik.imagekit.io/ikmedia/women-dress-2.jpg" width="400" height="500" />8 ke img { width: 400px, height: 300px }5 menggunakan properti CSS
img { width: 400px, height: auto }Ini akan membuat gambar selebar 400px. Ketinggian disesuaikan untuk menjaga rasio aspek dari gambar asli. Anda juga dapat menentukan atribut <img src="//ik.imagekit.io/ikmedia/women-dress-2.jpg" width="400" height="500" />_8 dan menyetel <img src="//ik.imagekit.io/ikmedia/women-dress-2.jpg" width="400" height="500" />9 sebagai img { width: 400px, height: 300px }5, tetapi sebagian besar tata letak umumnya dibatasi lebar dan bukan tinggi
Gambar responsif yang menyesuaikan berdasarkan lebar yang tersedia
Anda dapat menentukan lebar dalam persentase alih-alih angka absolut untuk membuatnya responsif. Dengan menyetel <img src="//ik.imagekit.io/ikmedia/women-dress-2.jpg" width="400" height="500" />_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 aslinya
img { width: 100%; height: auto; }Alternatifnya, Anda dapat menggunakan properti img { width: 400px, height: auto } _1. Dengan pengaturan
max-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 <img src="//ik.imagekit.io/ikmedia/women-dress-2.jpg" width="400" height="500" />8 atau <img src="//ik.imagekit.io/ikmedia/women-dress-2.jpg" width="400" height="500" />9 atau keduanya
Saat Anda menentukan <img src="//ik.imagekit.io/ikmedia/women-dress-2.jpg" width="400" height="500" />8 dan <img src="//ik.imagekit.io/ikmedia/women-dress-2.jpg" width="400" height="500" />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
- img { width: 400px, height: auto } _6 properti css
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-
- img { width: 400px, height: auto } _9 - Ukuran gambar
- img { width: 100%; height: auto; } 0 - Posisi awal gambar latar belakang
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
Nilai yang mungkin dari img { width: 400px, height: auto } _9
- img { width: 400px, height: 300px }5 - Merender gambar dalam ukuran penuh
- img { width: 100%; height: auto; } 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 ke img { width: 400px, height: 300px }5. Misalnya, img { width: 100%; height: auto; } _6 atau img { width: 100%; height: auto; } 7
- img { 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 ke img { width: 400px, height: 300px }5. Misalnya, max-width:100%;0 atau max-width:100%;1
Ini juga memiliki 2 nilai khusus max-width:100%;_2 dan max-width:100%;3
background-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-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
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 belakang
Seiring 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
- max-width:100%;_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 berisi
- max-width:100%;_3. Itu mempertahankan rasio aspek asli tetapi mengubah ukuran gambar untuk menutupi seluruh wadah, bahkan jika itu harus memperbesar gambar atau memotongnya
- img { max-width: 100%; height: auto; } 3. Ini adalah nilai default. Gambar akan mengisi area tertentu, meskipun itu berarti kehilangan rasio aspeknya
- img { max-width: 100%; height: auto; } 4. Gambar tidak diubah ukurannya sama sekali, dan ukuran gambar asli memenuhi area yang diberikan
- img { max-width: 100%; height: auto; } 5. Yang lebih kecil mengandung atau tidak sama sekali
Anda dapat menggunakan img { max-width: 100%; height: auto; } _6 untuk mengontrol posisi awal gambar seandainya bagian gambar yang dipotong sedang dirender
Mari 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
<img src="//ik.imagekit.io/ikmedia/women-dress-2.jpg" width="400" height="500" />0cocok untuk objek. berisi
Rasio 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 ini
sesuai objek. menutupi
<img src="//ik.imagekit.io/ikmedia/women-dress-2.jpg" width="400" height="500" />_2Rasio aspek asli dipertahankan tetapi untuk menutupi seluruh area, gambar dipotong dari sisi kiri dan kanan
sesuai objek. mengisi
<img src="//ik.imagekit.io/ikmedia/women-dress-2.jpg" width="400" height="500" />_3Gambar dipaksa masuk ke dalam penampung selebar 200px dengan tinggi 300px, rasio tinggi lebar asli tidak dipertahankan
sesuai objek. tidak ada
<img src="//ik.imagekit.io/ikmedia/women-dress-2.jpg" width="400" height="500" />4cocok untuk objek. perkecil
<img src="//ik.imagekit.io/ikmedia/women-dress-2.jpg" width="400" height="500" />5cocok untuk objek. penutup dan posisi objek. benar
<img src="//ik.imagekit.io/ikmedia/women-dress-2.jpg" width="400" height="500" />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
<img src="//ik.imagekit.io/ikmedia/women-dress-2.jpg" width="400" height="500" />_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