HTML POST Basic-HTML

Basic HTML - Images

HTML Images

Pada pembahasan kita kali ini akan membahas images pada HTML, Bagaimana cara menyisipkan gambar di website kita?, dan gambar seperti apa saja yang dapat kita sisipkan dalam dokumen HTML? Lansung saja kita akan membahas tentang images pada HTML.

Menyisipkan Gambar di Website

Gambar merupakan sesuatu yang sering digunakan di sebuah website, tag yang digunakan untuk menyisipkan gambar yaitu :

<img src="url" alt="deskripsi gambar">

Tag untuk menyisipkan gambar pada dokumen HTML yaitu tag img. Secara teknis gambar tidak di masukkan ke dalam halaman web, akan tetapi gambar di hubungkan ke dalam halaman web. Tag img merupakan tag tanpa penutup.

Attribute yang wajib digunakan pada tag img yaitu

  • src = attribute ini digunakan untuk mehubungkan url gambar.
  • alt = attribute ini berfungsi untuk menampilkan value dari alt jika gambar tidak tampil di dalam browser

Berikut contoh penggunaan tag img:

<img src="image.png" alt="image">
<img src="https://www.tdfprogramming.com/img/logo.svg" alt="Logo">

Resize Gambar

kita dapat mengatur ukuran gambar menggunakan attribute width dan height:

  • width mengatur ukuran lebar gambar
  • height mengatur ukuran tinggi gambar

Value dari kedua attribute tersebut memiliki 2 nilai, yaitu

  • px = mengatur secara statik (default)
  • % = mengatur secara dinamis sesuai ukuran layar

Saat kita mengatur ukuran gambar, maka gambar tersebut tidak akan mempengaruhi dari ukuran dari gambar asli itu sendiri, termasuk ukuran file dari gambar tersebut.

Ukuran file gambar juga mempengaruhi aksebilitas saat gambar di load. Ukuran gambar yang besar mempengaruhi load gambar saat di tampilkan ke browser. Sebab membutuhkan bandwidth yang besar untuk di load oleh user, maka gambar akan menjadi lama muncul di halaman website.

Berikut contoh script untuk mengatur ukuran gambar:

  • Gambar tanpa di resize
<img src="tdfprogramminglogo.png" alt="logo">

gambar tanpa di resize

  • Gambar di resize
<img width="200" height="200" src="tdfprogramminglogo.png" alt="logo">

gambar di resize

Kita juga dapat mengatur ukuran gambar dengan salah satu attribute saja. Misalkan kita mengatur ukuran lebarnya saja. Maka tinggi gambar akan menyesuaikan dengan skala dari ukuran gambar yang di atur.

Jika kita mengatur tinggi dan lembar gambar, makan akan terjadi bentrok dari ukuran gambar atau yang biasa disebut dengan stretch. berikut contoh saat kita mengatur ukuran gambar dengan kedua attribute tanpa mementingkan dari ukuran aslinya.

<img width="400" height="100" src="tdfprogramminglogo.png" alt="logo">

stretch image

Sekarang coba kamu lakukan sendiri untuk mengatur ukuran gambar dan coba gunakan persen untuk mengaturnya, lalu resize browsernya untuk melihat hasilnya

Jenis Dukungan Gambar

Berikut adalah jenis file gambar yang paling umum, yang didukung di semua browser (Chrome, Edge, Firefox, Safari, Opera):

Singkatan Format Ekstensi
APNG Animated Portable Network Graphics .apng
GIF Graphics Interchange Format .gif
ICO Microsoft Icon .ico, .cur
JPEG Joint Photographic Expert Group image .jpg, .jpeg, .jfif, .pjpeg, .pjp
PNG Portable Network Graphics .png
SVG Scalable Vector Graphics .svg

Image Maps

Image map merupakan pemetaan atau menandai bagian sebuah gambar agar dapat di klik. Tag yang dapat digunakan untuk membuat image maps yaitu:

  • <map> tag ini berfungsi untuk mendefenisikan gambar yang akan di petakan
  • <area> tag ini digunakan untuk memilih area gambar yang ingin di klik

Jika masih bingun sekarang kita akan cobakan untuk membuat sebuah image map seperti script berikut :

See the Pen by Triadmoko Denny Fatrosa (@triad-moko) on CodePen.

Coba kamu klik gambar yang berada di area laptop, kopi dan handphone. Maka kamu akan di arahkan ke tautan yang dituju. Untuk membuat Image Maps kamu bisa menggunakan image maps generator

HTML Picture

HTML picture berfungsi sebagai menampilkan gambar yang berbeda untuk perangkat atau ukuran layar yang berbeda. Memanfaatkan element picture kita dapat menyisipkan gambar lebih banyak dalam menentukan resources gambar. Tag yang digunakan untuk menyisipkan gambar menggunakan tag <picture>. Pada tag picture berisi satu elemen atau lebih yang disebut dengan tag <source>. Setiap gambar menautkan ke gambar melalui attribute srcset.

Dengan cara ini browser dapat memilih gambar sesuai perangkat atau lebar layar yang digunakan oleh user. Setiap tag <source> memiliki attribute media yang mendefenisikan dari ukuran layar untuk menentukan gambar yang akan ditampilkan. Berikut contoh scriptnya:

<picture>
  <source media="(min-width: 650px)" srcset="sate.jpg">
  <source media="(min-width: 465px)" srcset="bakso.jpg">
  <img src="ketupat.jpg">
</picture>

Pada script di atas dijelaskan bahwa kita memiliki 3 buah gambar, untuk ukuran lebar layar lebih dari 650px akan di tampilkan gambar sate, gambar dengan ukuran layar yang kurang dari 650px dan lebih dari 465px akan menampilkan gambar bakso, dan pada tag <img> jika sebuah browser tidak mendukung tag <picture> maka gambar yang di tampilkan adalah ketupat, jika browser tersebut mendukung tag <picture> maka ukuran layar yang kurang dari 465px gambar yang di tampilkan adalah ketupat.

Penjelasan singkat:

  • gambar sate = ukuran layar >= 650px
  • gambar bakso = ukuran layar (>= 465px) (<= 650px)
  • gambar ketupat = ukuran layar <= 465 + Browser tidak mendukung element picture

Kesimpulan

Menyisipkan gambar dapat menggunakan tag <img> dengan attribut src untuk menghubungkan gambar dengan dokumen html agar gambar dapat di tampilkan ke browser. Jika gambar tidak tampil text pada attribute alt akan tampil. Gambar juga dapat di atur ukurannya dengan menggunakan attribute width dan height. Tag <map> digunakan untuk memetakan sebuah gambar agar dapat di klik, untuk memilih area atau koordinatnnya dapat menggunakan tag <area>. Tag <picture> dapat menentukan gambar dengan sesuai ukuran lebar layar, untuk memilih gambar yang ingin di tampilkan menggunakan tag <source> di dalam tag <picture>.