Tag: Image

Belajar HTML – Memasukkan Image dengan Tag IMG
Matamu.NET – Foto atau Image dapat digunakan untuk meningkatkan tampilan dari sebuah laman HTML. Gambar bisa dimasukkan ke dalam document HTML dengan tag <img> dengan syntax sebagi berikut :
```
<img src="url gambar" alt="Tittle Gambar">
```
Tag ini tidak perlu ditutup dengan penutup </img> sebagaimana lazimnya penggunaan tag pada HTML.

src adalah alamat dari gambar yang disimpan. Alamat gambar bisa disimpan dalam folder lokal dan dipanggil dengan syntax :
```
<img src="C://my document/picture/nama file gambar.jpg" alt="Tittle Gambar">
```
Jika ditaruh dalam sebuah server atau website maka syntaxnya sebagai berikut :
```
<img src="https://matamu.net/wp-content/uploads/2021/04/Membuat-website-Fotografi-keren-murah-dan-gratis.jpg" alt="Tittle Gambar">
```
A. Ukuran Tampilan Gambar

File foto / image di komputer disimpan dalam satu px atau Pixel, namun kita menampilkan gambar di HTML berbeda dengan ukuran aslinya. Tujuannya agar lebih cantik atau sesuai dengan kebutuhan kita.

Untuk mengganti ukuran gambar kita tambahkan atributte style pada gambar.
```
<img src="https://matamu.net/wp-content/uploads/2021/04/Membuat-website-Fotografi-keren-murah-dan-gratis.jpg" alt="Tittle Gambar" style="width:400px; height:200px;">
```
Hasilnya gambar akan ditampilan dengan ukuran fix yakni lebar 400 px dan tinggi 200 px. ukuran gambar tidak sesuai dengan propostional gambar asli, maka gambar akan ditampilkan stretch (tertarik)

B. Floating

Floating digunakan untuk membuat penampilan lebih menarik di mana gambar akan berada di suatu sisi dari paragraf, misalnya sisi kiri, tengah atau kakan.
```
<h2>Image Size</h2>

<p> <img src="img_girl.jpg" alt="Girl in a jacket" style="float:left;width:66px;height:88px;">
Tulis paragrafinya disini... </p>
```
Perhatikan bahwa tag <img> adalah bagian dari tag <p>.

C. Background dengan Image

Kita bisa menjadikan sebuah gambar menjadi background laman. Caranya dengan meletakkan informasi tersebut dalam CSS dari laman dengan syntax berikut :
```
<style>
body {
  background-image: url('example_img_girl.jpg');
}
</style>
```
Secara dafault, HTML akan memasukkan gambar sebagai background, jika gambar berukuran kecil, maka gambar akan diulang (repeat) sampai laman terpenuhi, seperti pada gambar di bawah ini!

Untuk membuat gambar tidak berulang kita berikat attribute no.repeat. Agar fit dengan ukuran layar kita tambahkan attributte attachment fix dengan syntax seperti berikut :
```
<style>
body {
  background-image: url('img_girl.jpg');
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-size: cover;
}
</style>
```
hasilnya akan terliaht seperti gambar di bawah :
April 16, 2021
Pengertian Pixel, Resolusi, DPI dan PPI Dalam menentukan Kualitas Foto

Matamu.Net – Kualitas gambar digital pada dasarnya hanya bisa dinilai relatif terhadap media tampilnya. Misalnya dilihat melalui layar device, hasil cetak, atau dalam keadaan di zoom. Setiap media tersebut punya satuan yang berbeda dalam menyatakan kualitas dari sebuah foto yang pada umumnya dikenal dalam 4 unit yakni Pixel, Resolusi, DPI dan PPI.

Empat faktor ini menentukan kuliatas dari suatu foto yang secara sederhana ditandai dengan angka yang lebih tinggi akan menunjukkan gambar yang lebih bagus. Gambar 4 MP akan lebih baik dari 2 MP akan tetap MP bukanlah satu-satu parameter kualitas foto yang baik.

Misalnya saja kita pasti sama percayanya bahwa Foto 16 MP dari kamera DSLR memiliki kualitas gambar yang lebih tajam dibandingkan foto 48 MP dari kamera Handphone.

Agar lebih mudah memahami kualitas foto, mari kita mulai memhami istilah dalam kualitas foto Digital yakni Pixel, Resolusi, DPI dan PPI.

1. Pengertian Pixel

Pixel adalah singkat dari Picture Element yang berarti bagian terkecil dari penyusun gambar digital. Gambar digital pada dasarnya adalah kumpulan titik yang membentuk sebuah pola. Titik inilah yang disebut sebagai Pixel.

Dalam dunia digital, Pixel ini berbentuk kotak sangat kecil yang berisi warna seperti Merah, Hijau, Biru, Hitam, Putih dan sejenisnya. Dengan demikian Pixel adalah dimensi terkecil dari sebuah gambar digital.

Sebagai contoh gambar hati di atas, pada sisi kanan gamabr hati di susun dari 17 pixel sedangkan di sisi kanan gambar hati disusun dengan jumlah pixel yang lebih banyak. Semakin banyak jumlah pixel yang disusun dari sebuh gambar maka semakin detail.

2. Resolusi

Seperti penjelasan tentang pixel, kita dapat menarik kesimpulan bahwa semakin banyak dot / pixel yang digunakan untuk membuat sebuah gambar maka semakin detail pula gambar yang dihasilkan.

Seluruh Pixel yang ada pada sebuah foto akan terdistribusi di bidang dua dimensi yakni Width (Horisontal) dan High (Vertikal). Hasil perkalian antara panjang x lebar ini disebut sebagai resolusi.

Kamera dengan resolusi 2 MP itu berarti mampu menghasilkan gambar sebanyak 2 juta pixel setiap fotonya, umumnya dengan 1600 px x 1200px = 1.920.000 px atau setara dengan 1,92 MP kemudian dibulatkan sebagai 2 MP. Demikian pula dengan 2570 px x 3861px = 9.922.700 atau 10 MP.

Semakin besar resolusi dari sebuah gambar semakin baik pula kualitas yang disajikan ketika gambar tersebut di zoom in. Namun hal tersebut bukanlah jaminan, tergantung lagi dari proses perekeman dan pembuatan gambar itu sendiri.

Gambar di atas meruapakan dua gambar yang sama dengan ukuran pixel yang sama, namun dari sumber yang berbeda. Gambar bunga pada sisi kiri diambil dari file beresolusi 2000 px x 2000 px kemudian di resize menjadi 1200 px x 1200 px, sedangkan gambar yang ada di sisi kanan diambil dari file beresolusi 100 px x 100 px kemudian di resize dengan menjadi 1200 px x 1200 px.

Jadi sejatinya gambar sisi kiri dan kanan memiliki resolusi yang sama yakni 1 440 000 pixel atau 1,4 MP namun berasal dari sumber yang berbeda. Hal ini pula yang menjelaskan mengapa kamera DSLR 16 MP selalu lebih tajam dibandingkan dengan Kamera Handphone yang Resolusinya 48 MP. Hal ini disebabkan karena proses perekaman di KAmera DSLR jauh lebih baik (Ukuran sensor yang lebih besar) dibandingkan dengan kamera Handphone.

3. PPI

PPI adalah singkatan dari Pixel per Inchi atau jumlah titik terkecil penghasil warna pada layar setiap satu inci. Satuan ini digunakan untuk menjelaskan ketajaman gambar secara fisik dari sebuah layar device atau monitor.

Tujuannya tentu saja agar layar bisa menampilkan kualitas maksimal dari gambar atau foto dengan resolusi besar. Semakin kecil ukuran pixelnya (angka PPI besar) makan semakin besar resolusi layarnya.

Sebagai ilustrasi tentang DPI, ditunjukkan pada gambar di bawah ini.

Gambar dengan resolusi besar masih tetap bis adijalankan di layar dan monitor berPPI kecil jika software GPU memungkinkan untuk menampilkan gambar tersebut, namun tentu saja hasilnya tidaklah maksimal.

Kendati demikian PPI bukanlah satu-satunya kualitas layar menampilkan gambar, ada juga color range (Saturation) dan brightness dari setiap dot tersebut.

4. DPI

DPI adalah singkatan dari Dot per Inchi. Konsepnya hampir mirip dengan PPI, sama-sama menunjukkan kualitas fisik dari sebuah foto namun DPI menunjukkan kemampuan sebuah printer mencetak gambar dengan resolusi paling detail.

Sebagai contoh misalnya Printer dengan tulisan 300 DPI itu berarti jarung dari printer ini bisa membuat 300 titik dalam satu inci.

Jika kita mencetak gambar 72 PPI di printer 300 DPI maka hasil yang terlihat sama persis dengan apa yang dilihat di layar, namun jika mencetak gambar 350 PPI di printer 300 PPI, maka gambar cetak akan di downgrade oleh system dan terkadang downgradenya tidak sesuai dengan harapan oleh karena kebanyakan desainer profesional akan menyamakan settingan gambar dan kemampuan printer tempat mereka mencetak.

July 9, 2020