Image Replacement Untuk Logo Situs

Keterbatasan font yang terinstall di desktop client dan kebutuhan untuk menampilkan font yang sama persis dengan tampilan desain melahirkan metode-metode seperti text-replacement dan image-replacement. Text replacement adalah metode me-replace teks dengan font custom yang diinginkan menggunakan flash, image atau javascript sedangkan image replacement adalah metoda text replacement yang fokus menggunakan image.

Image replacement umumnya dilakukan untuk bagian-bagian yang relatif tidak banyak berubah seperti logotype untuk logo situs / blog, sementara text replacement lebih lazim digunakan untuk bagian – bagian yang dinamis seperti heading / subheading menggunakan SiFR, Cufon atau @font-face.

Image replacement untuk logotype logo situs

Chris Coyier dari CSS-Tricks telah menulis 9 metoda image replacement lengkap dengan komparasi, kelebihan dan kekurangannya (penjelasan lebih detail dapat dibaca disana). Metode image replacement yang saya rasa paling baik adalah the NEW way of Image Replacement yang Chris telah bahas di Rethinking CSS Image Replacement.  Saya telaah, Nick La dari N Design Studio pun ternyata menggunakan metode ini pada Web Designer Wall. Metode ini keren karena bekerja baik karena tetap memiliki tampilan yang “readable” jika browser men-disable image (saya tidak mengasumsikan CSS off karena pengguna mana sih yang mendisable CSS browser-nya? – Berbeda dengan disable image).

Markup HTML

Ini markup html yang diperlukan untuk image replacement logotype. Image berformat .gif dengan support terhadap transparansi.

<h1 id="logo-site">
<a href="#">
<img src="bloggingly-logo.gif" alt="Bloggingly - Ulasan Seru Seputar Blogging" />
</a>
</h1>

CSS

Ini kode CSSnya. Perhatikan comment yang saya sertakan.

#demo-wrapper:after {
content: ".";
visibility: hidden;
display: block;
height: 0;
clear: both;
}
/* pseudo-class :after dilakukan untuk menghindari collapsing yang disebabkan oleh floating child element*/

h1#logo-site {
width:223px; height:69px; float:left;
/* tanpa pendeklarasian width height dan float ini tampilan sudah bekerja dengan baik.
Namun jika anda ingin menempatkan elemen lain disisi icon, 'pemadatan' menggunakan float jadi wajib dilakukan */
margin:10px;
}

h1#logo-site a img {
width:223px; height:69px; float:left; overflow:hidden;
/* membuat ALT text 'tetap berada dilokasinya' ketika images: off */
border:none;
}

Demo

Berikut ini demo dari markup diatas.  Markup html dan CSS ini dioptimasi untuk dapat menghasilkan tampilan yang relatif stabil dan readable jika image tidak ditampilkan oleh browser (umumnya pada kasus pengguna dengan koneksi internet lambat atau mobile browser pengguna opera yang imagenya di disable).

Lihat demo image replacement untuk logo situs.