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 darialt
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 gambarheight
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 di resize
<img width="200" height="200" src="tdfprogramminglogo.png" alt="logo">
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">
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>
.