5 Cara Mengatur Ukuran Gambar di HTML. Tutorial Lengkap!

Siti Khadijah Azzukhruf Firdausi

•

19 September 2023

•

1688

Mengatur ukuran gambar adalah salah satu tugas paling fundamental di desain web. Oleh sebab itu, pemahaman mengenai cara mengatur ukuran gambar di HTML mungkin menjadi hal yang cukup krusial.

Dengan pemahaman ini, kamu bisa menyesuaikan gambar dengan baik dan meningkatkan estetika situs dan mempercepat load speed. Untuk lebih lengkapnya, baca artikel ini sampai habis ya!

5 Cara Mengatur Ukuran Gambar di HTML

1. Menggunakan Atribut Width dan Height

Cara untuk mengatur ukuran gambar di HTML pertama adalah menggunakan atribut width dan height dalam elemen <img>. Atribut width mengontrol lebar gambar, sementara height mengatur tingginya. Berikut contoh skripnya:

Output dari skrip ini akan menampilkan gambar dengan lebar 300 dan tinggi 200 piksel. Namun, ini hanya akan mengubah tampilan gambar secara visual.

Gambar tersebut tetap memiliki ukuran asli dan hanya ditampilkan dalam ukuran yang berbeda. Ini juga mungkin mengurangi kualitas gambar jika gambar aslinya besar.

2. Menggunakan CSS

Berikutnya, cara mengatur ukuran gambar di HTML adalah menggunakan CSS. Hal ini memberikan kontrol yang lebih banyak atas tampilan gambar. Selain itu, kamu juga bisa menggabungkan gambar dengan desain web secara lebih baik.

Berikut adalah contoh penggunaan sebuah class CSS dengan nama gambar kecil. Tujuan dari contoh ini adalah untuk mengontrol ukuran gambar.

Kamu bisa menggunakan skrip yang sama dan sesuaikan width dan height sesuai kebutuhan.

Dengan CSS, kamu bisa mengubah tampilan gambar dengan mudah. Ini juga bisa dilakukan tanpa mengubah HTML.

3. Menggunakan Software Pengedit Gambar

Cara mengatur ukuran gambar di HTML selanjutnya adalah menggunakan software pengedit gambar. Ini cocok digunakan apabila kamu mau mengurangi ukuran fisik gambar dan mengoptimalkannya untuk web. Berikut adalah langkah-langkahnya:

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 selesai, kamu bisa gunakannya dalam halaman web seperti biasa. Ini adalah cara terbaik untuk memastikan bahwa gambar yang digunakan memiliki ukuran sesuai untuk web. Ini juga tidak akan mengorbankan kualitas gambar.

4. Menggunakan Responsif Image

Lalu, cara mengatur ukuran gambar di HTML adalah dengan menggunakan responsif image. Pada desain responsif, kamu harus memastikan bahwa gambar bisa menyesuaikan berbagai ukuran layar.

Ini bisa dilakukan dengan menggunakan elemen <picture> dengan atribut scrset untuk mencapainya. Berikut adalah contoh skrip dengan nama gambar gambar-kecil.jpg. Contoh ini akan ditampilkan jika lebar layar kurang dari atau sama dengan 600 piksel.

Cara Mengecilkan Gambar di HTML

Hal itu memungkinkan tampilan gambar lebih kecil pada perangkat dengan layar yang juga lebih kecil. Sehingga, ini juga bisa mengoptimalkan pengalaman pengguna.

5. Menggunakan Framework CSS

Terakhir, cara mengatur ukuran gambar di HTML juga bisa dilakukan dengan pakai framework CSS. Framework seperti Bootstrap bisa dimanfaatkan untuk mengontrol ukuran gambar.

Selain itu, pada Bootstrap juga ada kelas img-fluid yang membuat gambar secara otomatis menyesuaikan diri dengan lebar elemennya. Contoh penggunaan skripnya adalah <img src="gambar.jpg" class="img-fluid" alt="Gambar Contoh">.

Kelas img-fluid di dalamnya akan membuat gambar tetap proporsional dan menyesuaikan ukuran dengan lebar elemen yang mengandungnya.

Baca Juga: Cara Membuat Bullet di HTML: Panduan Lengkap

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.

Itulah beberapa hal yang perlu kamu pelajari soal cara mengatur ukuran gambar di HTML. Dari penjelasan di atas, cara ini tidak terlalu sulit diterapkan, bukan?

Jika mau belajar lebih dalam lagi soal HTML, MinDI rekomendasikan kamu untuk ikut Bootcamp Frontend Web Development Dibimbing. Lewat program ini, kamu bisa belajar semua hal yang berkaitan dengan pengembangan web dari nol.

Mulai dari konsep dasar, bahasa pemrograman, tools penunjang, hingga praktik dengan real-case project. Selain itu, programnya juga dirancang dengan kurikulum beginner-friendly. Jadi, kamu yang baru mulai juga bisa mengikutinya tanpa kesusahan.

Menarik bukan? Yuk, daftar dan kembangkan keahlianmu di web development bareng Dibimbing.id!

Training