HTML & CSS untuk Pemula (Bagian 09): Gambar untuk Web (01)

Ketika Anda menyimpan gambar di program grafis, berbagai format grafis ditawarkan. Namun, format mana yang harus dipilih ketika ingin menyisipkan gambar ke dalam halaman web?



Jika Anda ingin menampilkan sebuah gambar di halaman web Anda, Anda memiliki pilihan antara tiga format.

• GIF

• JPEG

• PNG

Namun, format mana yang harus dipilih untuk penggunaan tertentu? Apakah lebih baik menggunakan GIF atau PNG untuk foto? Pertama-tama, ada gambaran singkat tentang kemampuan masing-masing format.

Tabel kecil ini sudah memperlihatkan perbedaan sifat-sifat dari masing-masing format. Oleh karena itu tidak mengherankan bahwa beberapa format lebih cocok digunakan untuk tujuan tertentu daripada yang lain. Pada titik ini, bagian berikutnya akan menjelaskan kapan sebaiknya menggunakan format yang mana.

Foto

Tanpa keraguan, untuk foto Anda menggunakan format JPEG. Karena di dalamnya gambar dapat dikompresi dengan baik, dengan kualitas yang dapat dipilih variabel. Di sini Anda dapat menemukan keseimbangan yang tepat antara kualitas dan tingkat kompresi.

Tangkapan Layar/Diagram

Format PNG adalah yang terbaik untuk penggunaan ini. PNG juga menarik untuk gambar teknis, denah, dan sebagainya. PNG juga dapat digunakan untuk gambar dengan area transparan.

Huruf/Logo

Jika logo Anda berisi teks atau Anda ingin menampilkan huruf, Anda harus menggunakan GIF atau PNG. Namun, karena performa lebih baik, biasanya lebih baik menggunakan PNG. JPEG tidak cocok untuk menampilkan huruf karena tepi hasilnya tidak rapi.

Transparansi

Ketika harus menampilkan area transparan, JPEG sudah pasti tidak dipertimbangkan. Sisanya adalah GIF dan PNG. Namun, format mana yang harus dipilih untuk transparansi? Secara prinsip, GIF dapat menangani transparansi, namun hasilnya biasanya tidak rapi. Sebab, satu piksel dalam format GIF hanya bisa sepenuhnya terlihat atau sepenuhnya transparan. Hal ini tidak terjadi dalam format PNG. Format ini memiliki saluran alfa tambahan, sehingga hasil transparansi yang lebih halus bisa didapatkan.

Menyisipkan Gambar

Grafik dapat disisipkan melalui elemen img. (Perhatikan bahwa saat ini gambar sering disisipkan melalui CSS. Informasi lengkap tentang CSS tentu akan menyusul. Namun, cara HTML yang ditunjukkan sepenuhnya sesuai standar dan dapat digunakan dengan aman di HTML5.)

<img src="logo.png" alt="PSD-Tutorials.de" />

Pada img ini merupakan elemen mandiri. Melalui atribut-atribut yang sesuai, gambar bisa dideskripsikan lebih lanjut. Atribut terpenting adalah src itu sendiri. Sebab, melalui atribut ini, gambar yang akan disisipkan ditentukan. Dalam contoh yang ditunjukkan, diasumsikan bahwa grafik logo.png berada di direktori yang sama dengan file HTML tempat elemen img didefinisikan.

Agar gambar dapat ditampilkan dengan benar, pastikan untuk menentukan jalur yang benar ke gambar tersebut. HTML menyediakan berbagai cara untuk merujuknya.

• Jalur Absolut

• Penunjukan Jalur Absolut relatif terhadap Alamat Basis

• Penunjukan Jalur Relatif relatif terhadap Alamat Basis

Sekarang mengenai jalur absolut. Cara ini biasanya digunakan saat gambar tidak berada di server Anda sendiri. Misalnya, Anda ingin menyisipkan gambar kupu-kupu yang dikenal dari PSD-Tutorials.de ke situs web Anda. Maka teoretis Anda bisa langsung memuatnya dari server tempat gambar itu berada. Pertama, tentukan jalur gambar tersebut. Cara termudah adalah dengan mengklik kanan gambar di browser dan memilih Salin URL Gambar.

Yang akan dimuat ke dalam papan klip akhirnya akan terlihat seperti ini:

http://4eck-media.de/wp-content/uploads/2013/01/logo-psd-tutorials.jpg

Jadi, itulah alamat lengkap gambar tersebut. Informasi ini sudah cukup untuk menyisipkan gambar.

<img src=" http://4eck-media.de/wp-content/uploads/2013/01/logo-psd-tutorials.jpg" alt="PSD-Tutorials.de" />

Yang dimaksud dengan atribut src adalah untuk memberikan jalur lengkap gambar.

Namun, masalah dari penggunaan jalur absolut adalah bahwa kita tidak memiliki kontrol penuh atas konten yang disertakan. Jika gambar yang direferensikan oleh Anda dihapus dari server atau dipindahkan ke direktori lain, akan terjadi kesalahan tampilan.





Oleh karena itu, penggunaan referensi absolut seharusnya menjadi pengecualian.

Pendekatan Jalur Absolut yang Berhubungan dengan Alamat Dasar

Varian ini selalu cocok ketika gambar berada di komputer/server yang sama dengan file HTML dan dapat diakses melalui protokol yang sama. Terdengar rumit, tetapi sebenarnya tidaklah.

Contoh:

http://4eck-media.de/wp-content/uploads/2013/01/logo-psd-tutorials.jpg

Inilah alamat lengkapnya. Bagian berikutnya adalah jalur absolutnya.

wp-content/uploads/2013/01/logo-psd-tutorials.jpg

Jalur absolut ini berhubungan dengan alamat dasar http://4eck-media.de.

Pendekatan Jalur Relatif yang Berhubungan dengan Alamat Dasar

Varian yang diperkenalkan sekarang ini tentu saja yang paling umum digunakan. Di sini, jalur saat ini selalu diambil sebagai titik acuan untuk akhirnya diakses. Berikut beberapa contoh lagi. Katakanlah, ada file index.htm, di mana Anda ingin menyisipkan sebuah gambar. Selain itu, pada level yang sama terdapat direktori images, di mana gambar tersebut berada.

index.htm
images
--logo.png

Panggilan dalam atribut src akan terlihat seperti ini:

src="images/logo.png"

Tapi bagaimana jika gambar berada di direktori di atas file HTML?

projekt
--images
-----logo.png
--archiv
-----index.htm

Dalam kasus ini, index.htm terletak di bawah direktori tempat gambar logo.png disisipkan.

src="../images/logo.png"

Jadi, sintaks di sini adalah: Maju satu level, pindah ke direktori images dan tunjukkan logo.png.

projekt
--images
----logo.png
----2013
------januar
--------index.htm

Di sini sintaksnya akan terlihat seperti:

src="../../images/logo.png"

Gambar logo.png dalam kasus ini berada dua level di atas index.htm dalam direktori images.

Kelebihan pendekatan jalur relatif adalah fleksibilitasnya. Anda dapat mengembangkan proyek secara lokal dan kemudian mengkopi ke server "nyata". Jalurnya akan tetap sama setelahnya.