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
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
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.
Dapat digunakan untuk memvisualisasikan informasi dengan jelas dan efektif. Misalnya, dalam tutorial, diagram, grafik, atau ilustrasi dapat membantu pemahaman konten dengan lebih baik daripada teks saja.
Menarik perhatian pengguna dengan cepat.
Membuat pengguna mengingat informasi dengan lebih mudah terutama untuk konten edukatif dan pembelajaran online.
Memberikan elemen personalisasi pada halaman web yang kamu buat. Logo, gambar profil, atau gambar latar belakang dapat membantu membangun merek dan memberikan kesan yang kuat kepada pengguna.
Meningkatkan keterbacaan konten.
Meningkatkan meningkatkan SEO (Search Engine Optimization) halaman web selama gambar dioptimalisasi dengan baik. Kamu dapat menggunakan atribut "alt" untuk memberikan deskripsi gambar yang relevan sehingga membantu mesin pencari memahami konten gambar tersebut.
Menciptakan elemen-elemen interaktif di halaman web seperti menambahkan tautan atau hotspot untuk mengarahkan pengguna ke halaman lain.
Meningkatkan responsifitas web dengan pengaturan gambar yang baik. Teknik yang bisa digunakan yaitu media queries CSS untuk mengontrol tampilan gambar pada perangkat berbeda.
Meningkatkan konversi penjualan terutama dalam bisnis online.
Memperkaya narasi atau cerita yang ingin kamu sampaikan di halaman web. Gambar akan menyajikan suasana, karakter, atau konsep yang ingin kamu komunikasikan.
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!
Tags
Suci Wulandari
Kolektor kartu pos, mantan pustakawan, dan penulis yang bisa menulis apa saja kecuali skenario kehidupannya sendiri.
