Efektivnφ pou₧itφ obrßzk∙
Jednφm ze zßkladnφch problΘm∙ designu webov²ch strßnek je velikost grafiky - co je platnΘ, ₧e je grafickß ·prava hezkß, kdy₧ jejφ stahovßnφ na pomal²ch linkßch ΦeskΘho internetu trvß Φtvrt hodiny. P°φliÜ dlouhΘ Φekßnφ nßvÜt∞vnφka strßnek prost∞ otrßvφ.
Proto₧e text-only verze strßnek se stßvajφ raritou a bez obrßzk∙ se p°i designu v∞tÜiny strßnek asi neobejdeme, jsou velmi d∙le₧itΘ metody efektivnφ v²roby a pou₧itφ obrßzk∙. TΘm∞° ka₧dou webovou prezentaci je mo₧nΘ navrhnout tak, aby jejφ naΦφtßnφ netrvalo ne·nosn∞ dlouho, nebo alespo≥ nep∙sobilo tak beznad∞jn∞ zdlouhav∞.
P°edpokladem je omezenφ zbyteΦn²ch grafick²ch prvk∙, nap°φklad gigantick²ch a mnohdy samo·Φeln²ch "uvφtacφch" strßnek, kterΘ se bohu₧el stßvajφ m≤dou. Existuje n∞kolik zp∙sob∙, jak naΦφtßnφ grafiky zefektivnit a urychlit.
Chvßla d∞lenφ
Samoz°ejm∞ je °eΦ o d∞lenφ obrßzk∙ do menÜφch Φßstφ. Pokud je to mo₧nΘ, je v∞tÜinou lepÜφ obrßzkek rozd∞lit ne₧ nerozd∞lit. Nap°φklad r∙znΘ klikacφ mapy na jednotlivß tlaΦφtka, logo s ovlßdacφmi prvky na logo a ovlßdacφ prvky zvlßÜ¥ a podobn∞. Mezi v²hody pat°φ mo₧nost efektivnφho vyu₧itφ "ALT" tagem definovan²ch popisn²ch text∙ - Φtenß° nemusφ Φekat na naΦtenφ grafick²ch ovlßdacφch prvk∙. Rozd∞lenφ obrßzk∙ umo₧≥uje lΘpe vyu₧φvat JavascriptovΘ efekty, nap°φklad oblφbenß tlaΦφtka m∞nφcφ se po p°ejetφ myÜi. Nezanedbateln² je takΘ psychologick² efekt - Φßsti obrßzku se sice nenaΦφtajφ o mnoho rychleji, ale postupnΘ naΦφtßnφ a zobrazovßnφ nep∙sobφ tak zdlouhav∞, surfa° mß stßle pocit, ₧e se n∞co d∞je. Stavov² °ßdek prohlφ₧eΦe hlßsajφcφ dlouhΘ minuty nap°φklad "10% of 105K" p∙sobφ dosti beznad∞jn∞.
K rychlΘmu roz°ezßnφ obrßzk∙ na Φßsti a jejich nßslednΘmu slo₧enφ v HTML lze vyu₧φt nap°φklad program .... (viz strßnka Download). Pot°ebn²mi funkcemi ale disponujφ vÜechny znßm∞jÜφ programy.
Volba formßtu
Prvnφm krokem k efektivnφmu ulo₧enφ souboru, tedy ulo₧enφ v rozumnΘ kvalit∞ p°i minimßlnφ velikosti, je volba vhodnΘho formßtu. V podstat∞ tedy volba JPEG nebo GIF. Ambici≤znφ formßt PNG mß mnoho p°ednostφ, ale pomalu se prosazuje a vyskytujφ se problΘmy s kompatibilitou, co₧ je pro web rozhodujφcφ.
Obecn∞ lze °φct, ₧e ztrßtovß komprese JPG je vhodnß pro fotografie, jemnou true-color grafiku, montß₧e a textury bez jemn²ch rastr∙. Naopak se nehodφ pro obrßzky s ostr²mi hranami, skokov²mi p°echody, velk²mi jednolit²mi plochami tΘ₧e barvy a pro obrßzky s mal²m poΦtem barev. U JPG je pot°eba zabrßnit n∞kolikanßsobnΘ kompresi a rekompresi - s obrßzky tedy v∞tÜinou pracujeme v internφm formßtu grafickΘho editoru a do JPG exportujeme teprve koneΦnou verzi.
GIF naopak p°esn∞ zachovßvß originßl, podporuje transparentnost a postupnΘ "zaost°ovßnφ" p°i naΦφtßnφ (volba "Interlaced"). Samostatnou kapitolou jsou animovanΘ obrßzky, kde je GIF prakticky jedinou mo₧nostφ. Paleta GIFu je omezena na 256 barev, GIF se tedy hodφ pro loga, Φßry, tlaΦφtka a podobnΘ prvky s omezen²m poΦtem barev. Naopak fotografie a true-color obrßzky p°evedenΘ do GIFu mohou mφt znaΦnou velikost, tΘm∞° v₧dy v∞tÜφ, ne₧ jako JPEG.
╚asto se ovÜem vyskytujφ obrßzky, kterΘ nepat°φ ani k jednomu vyhran∞nΘmu p°φpadu - nap°φklad fotografie s textem, jednoduchΘ logo podlo₧enΘ true-color grafikou nebo fotografiφ. NejjednoduÜφ, ale podle velikosti v²slednΘho souboru v∞tÜinou nejhorÜφ, je takovou kompozici ulo₧it jako GIF. Zajφmav∞jÜφ je pou₧itφ JPG - pak je t°eba dbßt na d∙sledn² antialiasing pφsma a skokovΘ p°echody barev rozoost°it. V∞tÜinou je takΘ nutnΘ nastavit nφzkou ·rove≥ komprese, nap°φklad 15%. Vysokß ·rove≥ komprese a ostrΘ p°echody zp∙sobujφ znßmΘ "duhovΘ" efekty v okolφ hran.
Alternativou, kterß spojuje v²hody obou formßt∙, m∙₧e b²t pou₧itφ JPEGu p°ekrytΘho transparentnφm GIFem. Vytvo°φme ji tak, ₧e transparentnφ GIF (nap°φklad logo nebo nadpis snφmku) vlo₧φme do tabulky, * kterß mß jako pozadφ JPG (nap°φklad fotografie).
Optimalizace
P°esto₧e jsou oba formßty, JPEG i GIF, znaΦn∞ propracovanΘ, efektivita uklßdßnφ mß jeÜt∞ urΦitΘ rezervy. Malß ·prava p°edlohy p°ed kompresφ m∙₧e znaΦn∞ zv²Üit jejφ ·Φinnost. Programy pro optimalizaci grafiky proto v∞tÜinou provßdφ Φinnost, kterß by se dala nazvat "p°edkomprimacφ" - filtrujφ p°edlohu tak, aby ji mohl kompresnφ algoritmus JPEGu nebo GIFu zpracovat maximßln∞ efektivn∞. Za cenu urΦitΘho zhorÜenφ kvality zφskßme v²razn∞ menÜφ v²sledn² soubor. ZjednoduÜen∞ by se dalo °φci, ₧e u GIFu takovß optimalizace funguje na zßklad∞ omezenφ poΦtu barev, u JPEGu na principu jakΘhosi vyhlazenφ Φßstφ obrßzku. Velmi u₧iteΦnß je takΘ mo₧nost lokßlnφho zv²Üenφ ·rovn∞ komprese u JPEG. P°esto₧e je mo₧nost zkomprimovat urΦitou Φßst obrßzku mΘn∞ ne₧ jinou velmi u₧iteΦnß, nenφ p°φliÜ znßmß ani pou₧φvanß.
DalÜφm typem "optimalizace" je mo₧nost okam₧itΘho prohlφ₧enφ zm∞n kvality obrßzku p°i nastavovßnφ ·rovn∞ komprese JPEGU - je tak mo₧nΘ p°esn∞ najφt nejvyÜÜφ ·rove≥, kterß jeÜt∞ obrßzek nepoÜkozuje.
Podrobn∞jÜφ popis optimalizaΦnφch program∙ by vydal na n∞kolik Φlßnk∙, o konkrΘtnφch programech a jejich mo₧nostech tentokrßt tedy jen struΦn∞: Optimalizaci umo₧≥ujφ profesionßlnφ programy pro tvorbu webovΘ grafiky, existuje celß °ada sharewarov²ch nßstroj∙, a¥ u₧ jako samostatn²ch program∙ nebo plugin∙ pro Photoshop. Nap°. JPEG Optimizer, Ulead Smart Saver, Web Razor, a dalÜφ. ╚ast∞jÜφ je "optimalizace" pomocφ p°esnΘho nastavenφ ·rovn∞ komprese.
Ka₧d² webdesignΘr by se m∞l sna₧it svoje strßnky optimalizovat, jak nejvφc je to mo₧nΘ. U₧
jen z ohleduplnosti k u₧ivatel∙m pomalΘho dial-up p°ipojenφ, kte°φ musφ za ka₧dou minutu stahovßnφ strßnek platit.
-jk-
* V HTML vypadß celß konstrukce takhle <<TABLE ALIGN=left BORDER=0 WIDTH=500 HEIGHT=150 BACKGROUND="foto.jpg"><TR> <TD><IMG SRC="nadpis.gif" WIDTH=500 HEIGHT=150 BORDER=0></TD></TR> Bohu₧el Netscape verze 3 mß s korektnφm zobrazovßnφm problΘmy. | |
