Blog

/

Web Development

/

5 Cara Mengecilkan Gambar di HTML

5 Cara Mengecilkan Gambar di HTML

Suci Wulandari

19 September 2023

83

Image Banner

Gambar adalah elemen penting dalam desain web. Selain memperindah tampilan halaman web, gambar juga berfungsi untuk mengkomunikasikan informasi dengan lebih efektif. Namun, terkadang kamu mungkin perlu mengecilkan gambar di HTML agar sesuai dengan desain atau agar halaman web lebih responsif. 


Terdapat berbagai metode untuk mengecilkan gambar di HTML. Kamu bisa pilih metode yang paling sesuai serta pastikan gambar tetap tampil dengan baik dan sesuai dengan desain web yang diinginkan. Dalam artikel ini, MinDi akan menjelaskan 5 cara mengecilkan gambar di HTML.


Menggunakan Atribut Width dan Height

Salah satu cara paling sederhana untuk mengecilkan gambar di HTML adalah dengan menggunakan atribut width dan height dalam elemen <img>. Atribut width mengontrol lebar gambar, sementara atribut height mengontrol tingginya. Berikut contoh penggunaannya:

<img src="gambar.jpg" width="300" height="200" alt="Gambar Contoh">


Dalam contoh yang MinDi buat tersebut, gambar akan ditampilkan dengan lebar 300 piksel dan tinggi 200 piksel. Namun, perlu diingat bahwa ini hanya mengubah tampilan gambar secara visual. Gambar tersebut tetap memiliki ukuran asli, dan hanya ditampilkan dalam ukuran yang lebih kecil. Hal ini mungkin mengurangi kualitas gambar jika gambar aslinya besar.

Menggunakan CSS


Cara Mengecilkan Gambar di HTML

Dibimbing.id - Menggunakan CSS


Metode lain untuk mengecilkan gambar adalah dengan menggunakan CSS. Hal ini memberikan lebih banyak kontrol atas tampilan gambar. Selain itu, kamu juga bisa menggabungkan gambar dengan desain web secara lebih baik. 


MinDi membuat contoh menggunakan sebuah class CSS dengan nama "gambar-kecil" untuk mengontrol ukuran gambar. Kamu dapat menyesuaikan nilai lebar (width) dan tinggi (height) sesuai kebutuhan. Hal ini memberikan keuntungan tambahan karena kamu dapat mengubah tampilan gambar dengan mudah. Hanya dengan mengedit CSS saja, kamu tidak harus mengubah HTML.


Menggunakan Software Pengedit Gambar

Apabila kamu ingin mengurangi ukuran fisik gambar dan mengoptimalkannya untuk web, cobalah menggunakan software pengedit gambar seperti Photoshop, GIMP, atau lainnya. Langkah-langkah umum yang dilakukan untuk mengecilkan gambar dengan software pengedit yaitu:

  • Buka gambar di software pengedit gambar yang sudah kamu pilih.

  • Ubah ukuran gambar sesuai yang diinginkan.

  • Simpan gambar dalam format yang sesuai untuk web seperti JPEG atau PNG.


Setelah proses mengedit gambar selesai, kamu bisa menggunakannya dalam halaman web seperti biasa. Cara ini cukup baik untuk memastikan bahwa gambar yang digunakan memiliki ukuran sesuai untuk web tanpa mengorbankan kualitas.



Menggunakan Responsif Image


Cara Mengecilkan Gambar di HTML

Dibimbing.id - Menggunakan Responsif Image


Dalam desain responsif, penting untuk memastikan gambar menyesuaikan diri dengan berbagai ukuran layar. Kamu dapat menggunakan elemen <picture> bersama dengan atribut srcset untuk mencapai ini. 


MinDi membuat contoh berupa gambar "gambar-kecil.jpg" akan ditampilkan jika lebar layar kurang dari atau sama dengan 600 piksel. Hal ini memungkinkan tampilan gambar lebih kecil pada perangkat dengan layar yang juga lebih kecil, sehingga mengoptimalkan pengalaman pengguna.


Menggunakan Framework CSS


Dibimbing.id - Framework CSS

Khusus untuk kamu yang menggunakan framework CSS seperti Bootstrap, coba manfaatkan kelas-kelas mereka untuk mengontrol ukuran gambar. Pada Bootstrap terdapat kelas img-fluid yang akan membuat gambar secara otomatis menyesuaikan diri dengan lebar elemennya. 


Berikut adalah contoh penggunaannya: <img src="gambar.jpg" class="img-fluid" alt="Gambar Contoh">. Kelas img-fluid akan membuat gambar tetap proporsional dan menyesuaikan ukuran sesuai dengan lebar elemen yang mengandungnya.


Kamu juga bisa lebih mendalami berbagai hal tentang web development dengan mengikuti kursus yang sesuai. Salah satu yang sebaiknya dicoba yaitu bootcamp dibimbing.id. Kamu akan berkesempatan menangani kasus real-project dan diarahkan langsung oleh para praktisi profesional.



Keuntungan Memakai Gambar di HTML

Menggunakan gambar di HTML memiliki banyak keuntungan dalam pengembangan web. Gambar dapat menjadi elemen berharga dalam komunikasi visual dan interaksi pengguna. Berikut adalah beberapa keuntungan utama dari penggunaan gambar di HTML.

Ternyata mengecilkan gambar tidak berbanding lurus dengan mengorbankan kualitas. Malah, dengan gambar kecil website bisa lebih responsif. Penggunaan gambar terbukti menjadikan web lebih menarik, informatif, dan interaktif bagi pengguna. 


Jika kamu tertarik dengan untuk belajar web development lebih lanjut, ikutii bootcamp programmer yang diadakan dibimbing.id. Selain pengetahuan mendalam, Sobat MinDi juga akan mendapat benefit tambahan berupa pengalaman magang yang nyata dan koneksi ke 500+ perusahaan.


Daftarkan segera sebelum kehabisan kuota untuk mengikuti bootcamp online dibimbing.id, ya!



bootcamp front end web development

Share

Author Image

Suci Wulandari

Kolektor kartu pos, mantan pustakawan, dan penulis yang bisa menulis apa saja kecuali skenario kehidupannya sendiri.

Artikel Terkait