Menampilkan Gambar di HTML


Halo sobat Artikel Multimedia, di dalam halaman website sudah tentu gambar menjadi salah satu komponen yang dapat meningkatkan desain dan tampilan agar terlihat lebih menarik. Nah, disini kita akan membahas bagaimana cara menampilkan gambar tersebut. Ada dua cara, pertama kita akan melakukannya dengan mengambil dari server lain seperti link dari internet, dan yang kedua kita akan melakukannya dengan mengambil gambar yang sudah tersimpan di penyimpanan lokal. Tag html yang akan digunakan yaitu <img src="" alt="">, baiklah langsung saja berikut caranya. 


<!DOCTYPE html>
<html lang="en">
 
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Menampilkan gambar di HTML</title>
</head>
 
<body>
    <h2>Gambar mengunakan link dari internet</h2>
    <img src="https://picsum.photos/id/235/300/200" alt="Gambar Gunung">
    <h2>Gambar dari penyimpanan lokal</h2>
    <img src="images/gunung.jpg" alt="Gambar Gunung" width="300" height="auto">
</body>
 
</html>


 


Atribut yang terdapat di dalam tag <img>, yaitu:

  1. scr (source): merupakan path file gambar yang ingin ditampilkan baik itu berupa relative path (sumber internal / penyimpanan lokal) atau absolute path (sumber eksternal / link dari internet).
  2. alt (alternative text): merupakan teks alternatif pengganti gambar jika suatu ketika gambar gagal ditampilkan.
  3. width & height: merupakan atribut yang mengatur ukuran lebar dan tinggi gambar, bisanya dalam satuan pixel atau persentase. Untuk nilai height bisa diisi dengan auto jika sobat bingung menentukan tinggi gambar yang pas.


Berikut ini beberapa format gambar yang dapat dimuat pada browser:

1. JPEG/JPG (.jpeg / .jpg)

Format ini biasa digunakan untuk foto.

2. PNG (.png)

Format ini biasa digunakan untuk logo atau ikon, terlebih lagi yang tidak memiliki latar belakang.

3. SVG (.svg)

Format ini juga bisa digunakan untuk logo atau ikon, namun ukurannya lebih kecil.

4. GIF (.gif)

Format ini biasa digunakan untuk menampilkan animasi gif.

5. WebP (.webp)

Format ini juga bisa digunakan untuk menampilkan foto atau gambar lainnya, yang mana ini adalah format modern dari google untuk efisiensi sehingga ukurannya lebih kecil dibanding jpeg dan png namun kualitas tetap sama.

6. ICO (.ico)

Format ini biasa digunakan khusus untuk favicon.


Sekian pembahasan tentang cara menampilkan gambar di html, jika sobat tertarik dengan artikel seputar multimedia silakan kunjungi postingan kami lainnya di blog ini. Terima kasih ...

Tags:

Posting Komentar

0 Komentar

Terima kasih telah mengunjungi website ini semoga bermanfaat untuk anda