Poslyšte příběh: klient si přál učinit svůj web hezčím a tak jsem mu doporučil jednoho z těch mála dobrých tuzemských grafiků. Před pár dny jsme měli schůzku a on se svěřil, že už dostal od grafika návrh a není z něj gór šťastný. Že písmo je moc malé a celé je to jakési kostrbaté. Nějak se mi to nezdálo, poprosil jsem ho, aby návrh otevřel, že se na to podíváme. Dohledal email, odkliknul obrázek a naběhl mu výchozí prohlížeč obrázků ve Windows. A protože obrázek měl větší rozměry, zobrazil se (mírně) zmenšený. A hned bylo jasné, kde je zakopaný pes.
Pokud klient není expert, nemá šanci zjistit, že se dívá na obrázek
zdeformovaný zmenšením. Prohlížeč obrázků ve Windows XP nebo Vista na to
nijak neupozorní. Ba co víc – i kdyby to zaregistroval, nejspíš se mu
nepodaří obrázek zvětšit na plnou velikost. Alespoň kolečkem myši nebo
klávesami + - to nejde. Ty obrázek
zvětšují/zmenšují o 20 % a hranici 100 % bez zastavení přeskočí.
Zobrazit jej v měřítku 1:1 vyžaduje fištróna.
Z příběhu vyplývá velmi cenná a nejspíš překvapivá zkušenost: neposílejte klientům náhledy webů jako obrázek.
Jak tedy náhledy posílat? Nejvhodnější je klientovi poslat URL. Design
tak uvidí v kontextu webového prohlížeče a bude mít daleko ucelenější
dojem. Ale pozor, pokud byste poslali přímo URL obrázku, prohlížeč by jej
opět zmenšil. Je nad ním potřeba vytvořit HTML obálku. Nahrejte proto na
web kromě obrázku ještě soubor nahled.php:
<title>Náhled webu</title>
<body style="margin:0; text-align:center">
<img src="<?php echo htmlSpecialChars($_SERVER['QUERY_STRING']) ?>">
</body>Potom např. obrázek pala.png bude dostupný pod URL
http://example.com/nahled.php?pala.png. Tu pošlete klientovi a
učiníte přítrž možným nedorozuměním.
Na závěr ještě tři tipy:
- udělejte obrázek dostatečně široký a výsoký, nebo vhodně nastavte pozadí, aby nebylo vidět bílé pozadí prohlížeče
- náhled ukládejte zásadně jako 24bitový PNG
- ponechte v kódu element
img, zobrazením pomocí CSS stylu background zkomplikujete klientovi tisk