Perkenalan
HTML atau Hypertext Markup Language adalah bahasa yang digunakan untuk membuat halaman web. Salah satu fitur HTML yang paling umum digunakan adalah menampilkan gambar. Namun, banyak yang bingung tentang cara menampilkan gambar dari hosting. Artikel ini akan membahas tentang cara menampilkan gambar dari hosting menggunakan HTML.
Step-by-Step
Langkah pertama untuk menampilkan gambar dari hosting adalah dengan menentukan URL gambar. URL gambar dapat diperoleh dengan mengunggah gambar ke hosting dan mengambil URL yang diberikan. Setelah URL gambar ditentukan, gunakan tag untuk menampilkan gambar tersebut. Contohnya seperti berikut:
Source: bing.comDalam contoh di atas, src adalah atribut yang menentukan URL gambar, sedangkan alt adalah atribut deskripsi gambar.
Alternatif Text
Alternatif text atau teks alternatif adalah deskripsi singkat tentang gambar. Teks alternatif dapat membantu pembaca dengan kebutuhan khusus seperti pembaca layar. Teks alternatif juga dapat meningkatkan SEO karena mesin pencari menggunakan teks alternatif untuk memahami konten gambar. Pastikan untuk selalu menyertakan teks alternatif yang sesuai dengan gambar yang ditampilkan.
Ukuran Gambar
Ukuran gambar dapat mempengaruhi kecepatan dan kualitas tampilan halaman web. Pastikan untuk menentukan ukuran gambar yang tepat agar halaman web lebih cepat dimuat. Salah satu cara untuk menentukan ukuran gambar adalah dengan menambahkan atribut width dan height pada tag . Contohnya seperti berikut:
Source: bing.comDalam contoh di atas, width dan height adalah atribut yang menentukan ukuran gambar dalam piksel.
Responsive Design
Responsive design adalah teknik desain web yang memungkinkan halaman web menyesuaikan ukuran tampilannya dengan perangkat yang digunakan. Untuk membuat gambar responsif, gunakan CSS dan media query. Contohnya seperti berikut:
Source: bing.comDalam contoh di atas, CSS mengatur lebar maksimum gambar menjadi 100% dan tinggi menjadi otomatis. Media query akan mengatur gambar agar sesuai dengan ukuran layar perangkat.
Optimasi Gambar
Optimasi gambar adalah proses mengurangi ukuran gambar tanpa mengorbankan kualitas. Hal ini dapat meningkatkan kecepatan halaman web dan menghemat ruang penyimpanan server. Ada banyak cara untuk mengoptimalkan gambar, salah satunya adalah dengan mengompres gambar. Ada banyak alat online yang dapat digunakan untuk mengompres gambar seperti TinyPNG dan Compressor.io.
Kesimpulan
Menampilkan gambar dari hosting dalam HTML cukup mudah dengan menggunakan tag . Pastikan untuk selalu menyertakan teks alternatif, menentukan ukuran gambar yang tepat, membuat gambar responsif, dan mengoptimalkan gambar untuk meningkatkan kualitas dan kecepatan halaman web. Dengan mengikuti tips ini, Anda dapat membuat halaman web yang menarik dan efisien secara teknis.