CSS Image Replacement (Bag-1)
Dalam hal Aksesibilitas, HTML memang lebih unggul dari pada penggunaan gambar atau movie Flash, karena HTML berbasiskan teks, search engine dapat dengan baik membaca HTML. Oleh karena itu, penggunaan HTML untuk bagian-bagian yang penting seperti judul utama atau titel sebuah situs sangat dianjurkan.
Namun dibalik keunggulan itu, HTML memiliki keterbatasan. Ia tidak memberikan kebebasan penuh pada para desainer untuk menampilkan objek-objek yang akan ditampilkan di Web. Diantaranya adalah logo perusahaan, karena alasan grafis dan tipografi, keberadaan logo yang kebanyakan berupa Image ini tidak dapat begitu saja digantikan oleh teks HTML, dengan kata lain, hal ini berkaitan dengan image perusahaan dan branding (yang satu ini tidak dapat di tawar-menawar dengan klien).
CSS menawarkan solusi untuk hal ini, yaitu dengan metode Image Replacement. Titel atau nama sebuah situs yang disimpan dalam sebuah tag heading atau <h1> dapat kita gantikan menggunakan gambar (image) secara visual. Walaupun sebenarnya image bukan “menggantikan” sepenuhnya dari fungsi titel dalam h1 ini, tapi lebih ke “bekerja-sama” dimana kedua fungsi ini akan saling menggantikan.
Image Replacement ini memiliki beberapa metode diantaranya
Fahrner Image Replacement (FIR)
Diperkenalkan oleh Todd Fahrner, Metoda ini mungkin adalah metode image replacement yang paling terkenal dan banyak digunakan karena kemudahannya. Konsep dari metode ini sangat sederhana, yaitu dengan menyimpan teks dalam tag span diapit oleh tag heading:
<h1>
<span>Fourg Core Gear</span>
<h1>
Lalu aplikasikan image untuk menggantikan teks sebagai background pada elemen heading.
h1 {
background: url(logofourg.gif) no-repeat top left;
width: 180px;
height: 50px;
} Lalu sembunyikan konten dalam span dengan:
span {
display:none;
} Metode ini bekerja dengan sangat baik, namun ternyata memiliki metode ini akibat buruk terhadap aksesibilitas. Bila user menon-aktifkan tampilan image pada browser mereka, mereka tidak melihat apa-apa. Selain itu screen reader juga tidak membaca teks yang telah disembunyikan oleh metode ini.
Phark
Mike Rundle memperkenalkan metode yang lebih screenreader-friendly dan menghindari penggunaan non-semantic tag.
<h1>Fourg Core Gear</h1>Metode yang dipergunakan Phark tidak membuat teks menghilang, tapi dengan memindahkan teks keluar area browser. Phark memberikan text-indent negatif yang besar,
h1 {
text-indent: -5000px;
background: url(logofourg.gif) no-repeat top left;
width: 180px;
height: 50px;
}Screen reader dapat membaca dengan baik teks dalam h1, namun seperti halnya teknik FIR, metode ini tidak akan bekerja bila tampilan image tidak diaktifkan di browser karena keterbatasan bandwidth dan akses yang lambat.
Masih terdapat beberapa metode Image Replacement kita akan membahasnya pada tulisan yang akan datang (bersambung…)
Pustaka:
CSS Mastery: Advanced Web Solutions; Budd, Andy; 2006; Friends of Ed.
Tentang Penulis
Pupung Budi Purnama - Bukan pakar atau ahli, hanya seorang freelance web designer, tinggal di Bandung, Jawa Barat. Bergelut di dunia web sejak 1999, pernah bekerja di beberapa perusahaan IT sebagai desainer. Sehari-hari, ia menjalankan sebuah perusahaan web development dari kamarnya.
13 Comments
“Screen reader dapat membaca dengan baik tag dalam h2, namun seperti…”
ini h2 yang mana ya mas pupung, saya kok jadi bingung ?
@anti: Ada kesalahan pengetikan seharusnya:
apakah logo yang mempunyai nama persis suatu kata bisa di lacak dengan search engine??
@Vandy: tergantung cara menampilkannya, search engine saat ini mengenali teks dari situs. Nah image replacement ini adalah salah satu cara supaya sebuah logo/kata tertentu berbentuk teks dapat digantikan dengan image.
kebetulan saya sedang mencari info mengenai ini, thanks for sharing mas :)
ASIK..
makasih infonya mas…
sekalian mo nanya nih…
kalo mau nempatin gambar di tengah halaman pake css caranya gimana ya?
jadi ceritanya ada halaman kosong, trus di tengahnya mau dikasih satu gambar…
thx…
@lilamr
body { background: url(my-image.jpg) no-repeat center; }Ada yg tahu tentang perbedaan antara { display: none } dan { visibility:hidden }?
keduanya sama-sama menyembunyikan konten text.
@Yan Arief:
{display:none} bila dipergunakan maka elemen dalam halaman Web akan hilang sama sekali pada tampilan di browser, browser akan menganggap bahwa elemen tersebut tidak ada.
{Visibility: hidden} bila dipergunakan elemen dalam halaman Web akan disembunyikan, browser akan menganggap elemen tersebut ada. Akibatnya lahan elemen yang di-hidden tidak akan ditempati oleh elemen lain, dan akan meninggalkan jarak seolah elemen tersebut ada (padahal disembunyikan).
Mau tanya mas, saya pernah baca bahwa metode ini “istilahnya” oleh Google adalah mengecohkan mereka dalam mengindeks seuatu halaman dan masuk kategori black hat SEO. Hal ini dikarenakan karena kita menyembunyikan teks agar tidak tebaca user. sebenarnya metode ini boleh dipakai atau tidak? Saya sudah sering menggunakan metode ini.
@Herman: Kalau menggunakan Phark text-indent setahu saya masih dapat terbaca dengan baik oleh Search Engine seperti Google, karena teks sebenarnya dipindahkan ke Area diluar browser, tidak dihilangkan.
Hmm agak terganggu dengan komen
“HTML memang lebih unggul dari pada penggunaan gambar atau movie Flash, karena HTML berbasiskan teks, search engine dapat dengan baik membaca HTML.”
mungkin anda belum tahu bahwa search engine selalu melakukan update program, tahukah anda bahwa search engine sudah 3 th ini mampu mencari semua informasi di dalam file *.swf?
bukan hanya data yang diambil dr SQL aja, langkah simpel buatlah sebuah dokumen *.swf semua teks letakkan aja di situ apakah berujud betul2 teks atau sudah anda rubah menjadi vektor
lalu gunakan google untuk mencarinya, dijamin pasti ketemu
[...] DesignMagz juga memiliki artikel mengenai CSS Image Replacement yang membahas teknik Fahrner Image Replacement (FIR) dan [...]