Bagaimana saya bisa mengubah ukuran gambar tanpa kehilangan kualitas di css?

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="https://ik.imagekit.io/ikmedia/women-dress-2.jpg" 
     width="400" 
     height="500" />

<img src="https://ik.imagekit.io/ikmedia/women-dress-2.jpg" 
     width="400" 
     height="500" />

img {
  width: 400px,
  height: 300px
}

Misalnya, gambar aslinya berukuran 640×960

https://ik.imagekit.io/ikmedia/women-dress-2.jpg

Kita bisa merendernya dengan tinggi 500 piksel dan lebar 400 piksel

<img src="https://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="https://ik.imagekit.io/ikmedia/women-dress-2.jpg" 
     width="400" 
     height="500" />

<img src="https://ik.imagekit.io/ikmedia/women-dress-2.jpg" 
     width="400" 
     height="500" />

<img src="https://ik.imagekit.io/ikmedia/women-dress-2.jpg" 
     width="400" 
     height="500" />

<img src="https://ik.imagekit.io/ikmedia/women-dress-2.jpg" 
     width="400" 
     height="500" />

img {
  width: 400px,
  height: 300px
}

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="https://ik.imagekit.io/ikmedia/women-dress-2.jpg" 
     width="400" 
     height="500" />

<img src="https://ik.imagekit.io/ikmedia/women-dress-2.jpg" 
     width="400" 
     height="500" />

img {
  width: 400px,
  height: 300px
}

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="https://ik.imagekit.io/ikmedia/women-dress-2.jpg" 
     width="400" 
     height="500" />

img {
  width: 400px,
  height: auto
}

img {
  width: 100%;
  height: auto;
}

Alternatifnya, Anda dapat menggunakan properti

img {
  width: 400px,
  height: auto
}

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="https://ik.imagekit.io/ikmedia/women-dress-2.jpg" 
     width="400" 
     height="500" />

<img src="https://ik.imagekit.io/ikmedia/women-dress-2.jpg" 
     width="400" 
     height="500" />

Saat Anda menentukan

<img src="https://ik.imagekit.io/ikmedia/women-dress-2.jpg" 
     width="400" 
     height="500" />

<img src="https://ik.imagekit.io/ikmedia/women-dress-2.jpg" 
     width="400" 
     height="500" />

• Gambar latar belakang

• img {
    width: 400px,
    height: auto
  }
  

  _6 properti css

Mengubah ukuran gambar latar belakang

img {
  width: 400px,
  height: auto
}

img {
  width: 400px,
  height: 300px
}

• 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
}

<style>
.background {
  background-image: url("/image.jpg");
  background-size: 150px;
  width: 300px;
  height: 300px;
  border: solid 2px red;
}
</style>

<div class="background">
</div>

Nilai yang mungkin dari

img {
  width: 400px,
  height: auto
}

• 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%;

max-width:100%;

background-size. mengandung

max-width:100%;

<style>
.background {
  background-image: url("/image.jpg");
  background-size: contains;
  width: 300px;
  height: 300px;
  border: solid 2px red;
}
</style>

<div class="background">
</div>

background-size. menutupi

max-width:100%;

<style>
.background {
  background-image: url("/image.jpg");
  background-size: cover;
  width: 300px;
  height: 300px;
  border: solid 2px red;
}
</style>

<div class="background">
</div>

properti CSS sesuai-objek

Anda dapat menggunakan properti CSS

img {
  width: 400px,
  height: auto
}

img {
  width: 400px,
  height: 300px
}

Seiring dengan

max-width:100%;

max-width:100%;

img {
  max-width: 100%;
  height: auto;
}

• 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;
}

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;
}

<img src="https://ik.imagekit.io/ikmedia/women-dress-2.jpg" 
     width="400" 
     height="500" />

cocok untuk objek. berisi

<img src="https://ik.imagekit.io/ikmedia/women-dress-2.jpg" 
     width="400" 
     height="500" />

Rasio aspek asli gambar sama, tetapi gambar diubah ukurannya sehingga terlihat sepenuhnya. Kami telah menambahkan

img {
  max-width: 100%;
  height: auto;
}

sesuai objek. menutupi

<img src="https://ik.imagekit.io/ikmedia/women-dress-2.jpg" 
     width="400" 
     height="500" />

Rasio aspek asli dipertahankan tetapi untuk menutupi seluruh area, gambar dipotong dari sisi kiri dan kanan

sesuai objek. mengisi

<img src="https://ik.imagekit.io/ikmedia/women-dress-2.jpg" 
     width="400" 
     height="500" />

Gambar dipaksa masuk ke dalam penampung selebar 200px dengan tinggi 300px, rasio tinggi lebar asli tidak dipertahankan

sesuai objek. tidak ada

<img src="https://ik.imagekit.io/ikmedia/women-dress-2.jpg" 
     width="400" 
     height="500" />

cocok untuk objek. perkecil

<img src="https://ik.imagekit.io/ikmedia/women-dress-2.jpg" 
     width="400" 
     height="500" />

cocok untuk objek. penutup dan posisi objek. benar

<img src="https://ik.imagekit.io/ikmedia/women-dress-2.jpg" 
     width="400" 
     height="500" />

Kelemahan 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;
}

<img src="https://ik.imagekit.io/ikmedia/women-dress-2.jpg" 
     width="400" 
     height="500" />

3. 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

Bagaimana cara mengubah ukuran gambar tanpa merusak kualitas?

Bagaimana Anda mengubah ukuran gambar tanpa mendistorsinya di CSS?

Bagaimana saya bisa mengubah ukuran gambar di CSS?

Bagaimana cara meningkatkan kualitas gambar di CSS?