Seorang Pengembang website, gambar memiliki peran penting dalam meningkatkan kualitas visual suatu halaman agar menarik para audience atau visitor website tersebut.
Nah pada pembahasan kali ini kita akan membahas mengenai penggunaan Gambar pada HTML beserta tag-tag lainnya dan atribut yang digunakan untuk membuat visual gambar menjadi lebih optimal.
 |
| Tag Image HTML |
Tag Image HTML
Untuk menampilkan gamar pada suatu halaman web kita akan menggunakan tag <img>. tag ini memiliki beberapa atribut yang memungkinkan kita mengatur aspek tertentu pada gambar yang di tampilkan.
berikut contoh penggunaan Tag <img>
<img src="serieswans.jpg" alt="Deskripsi Gambar" width="400" height="300">Keterangan atribut :
- src (source) yaitu artibut yang diisi dengan URL atau path file gambar
- alt (alternative text) yaitu atribut ini memberikan deksripsi singkat mengenai gambar untuk keperluan aksebilitas jika gambar tidak berhasil dimuat
- width dan height yaitu atribut ini digunakan untuk menentukan lebar dan tinggi gambar dengan satuan pixel.
Tips Penggunaan Gambar
Agar penggunaan gambar lebih optimal, ada beberapa tips yang diperhatikan berikut ini:
1. Pemilihan Format Gambar
Ada beberapa format gambar yang umum digunakan seperti PNG, JPEG dan GIF. pemilihan gambar tersebut tergantung pada jenis gambar dan kebutuhan kualitas gambar tersebut.
PNG (.png) : Gambar dengan area atau background transparan dan memiliki detail gambar yang baik.
JPEG (.jpg) : Gambar dengan gradasi warna yang kompleks seperti foto-foto.
GIF (.fig) : Gambar animasi sederhana dengan durasi yang singkat
2. Optimasi Ukuran File Gambar
Ukuran file gambar sangat berpengaruh dalam waktu muat suatu halaman. oleh karena itu lakukan optimasi gambar baik itu melalui online atau software kompres gambar yang dapat membantu mengurangi ukuran file tanpa mengurangi kualitas gambar tersebut.
3. Lazy loading
Lazy loading merupakan teknik yang terjadi dimana ketika gambar dimuat saat diperlukan atau di kondisi tertentu contohnya seperti saat scroling halaman web baru gambar nya termuat. hal tersebut dapat meningkatkan kecepatan muat halaman, terutama halam website tersebut panjang dan banyak gambarnya.
Kita bisa menggunakan attribute loading pada gambar. atribut ini memiliki tiga nilai yaitu Lazy, eager dan auto. untuk penggunaan lazy akan membuat gambar termuat hanya saat di perlukan. contoh penggunaanya seperti berikut.
<img src="serieswans.jpg" alt="Deskripsi Gambar" loading="lazy">
Gambar Responsif terhadap ukuran layar
Untuk membuat gambar menjadi responsif yang menyesuaikan diri dengan berbagai ukuran layar. kita menggunakan atribut max-width : 100% dan height : auto dalam CSS untuk membuat gambar menjadi responsif. contoh penggunaanya seperti berikut:
img {
max-width: 100%;
height: auto;
}Membuat Galeri menggunakan HTML dan CSS
Kita akan mencoba membuat galeri sederhana dengan menggunakan tag html dan css. meskipun materi yang bahas baru HTML, tidak apa-apa kita akan mengenal CSS setelah materi HTML selesai.
Penggunaan galeri gambar ini bisa menjadi cara yang menarik untuk menampilkan beberapa gambar dalam satu halamn web.
contoh struktur HTML untuk galeri gambar:
<div class="gallery-image">
<img src="image1.jpg" alt="Deskripsi image 1">
<img src="image2.jpg" alt="Deskripsi image 2">
<img src="image3.jpg" alt="Deskripsi image 3">
</div>contoh CSS untuk memberikan style tata letak pada galeri
.gallery-image {
margin: 5px;
border: 1px solid #ccc;
float: left;
width: 180px;
}
.gallery-image:hover {
border: 1px solid #777;
}
.gallery img {
width: 100%;
height: auto;
}
Atau bila menggunakan CSS Grid contohnya seperti berikut
.gallery-image {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(400px, 1fr));
gap: 15px;
}
Kesimpulan
Dalam mengembangkan suatu website, penggunaan gambar bukan hanya menampilkan visual untuk menarik audience atau visitor tetapi juga melibatkan responsivitas dan performa halaman. oleh karena itu lakukan pemilihan format gambar yang sesuai kebutuhan, kompress file gambar, responsivitas gambar terhadap ukuran layar dan penggunaan lazy image sehingga dapat membuat pengalaman audience atau visitor lebih nyaman dan efisien ketika mengakses halaman tersebut.
Posting Komentar