P°φprava obrßzk∙ pro web

Obrßzek je soubor. Na internetu se b∞╛n∞ pou╛φvajφ dva grafickΘ formßty -- *.jpg a *.gif. StruΦn∞ °eΦeno jpg je lep╣φ na fotografie, gif na v╣echno ostatnφ.

Jak ud∞lat obrßzek (pro zaΦßteΦnφky)

Jin²mi slovy, mo╛nostφ je vφce, ale cφlem musφ b²t soubor ve formßtu .gif nebo .jpg

Grafick² program

Hlavnφm kritΘriem pou╛itelnosti editoru je, zda umφ uklßdat do jpg a gif. Tak╛e t°eba Malovßnφ z Windows∙ 98 je na nic.

Datov² objem

Hlavnφ p°ikßzßnφ webovΘho grafika znφ: obrßzky se nesm∞jφ dlouho stahovat. (Proto jsou gif i jpg formßty kompresnφ.)

Dßvat na web obrßzek v∞t╣φ ne╛ takov²ch 60 kB je vcelku nesmysl, proto╛e se na jednΘ obrazovce stejn∞ nem∙╛e pat°iΦn∞ zobrazit.

forma	optimum	snesitelnΘ maximum
tlaΦφtko	2 kB	5 kB
pozadφ strßnky	2 kB	10 kB
reklamnφ baner	8 kB	20 kB
fotografie	15 kB	40 kb
zmen╣enina fotky	5 kB	10 kB
obrßzkov² nadpis	3 kB	8 kB
diagram, komix		60 kB

JPG

Formßt JPG (tΘ╛ JPEG) je vhodn² pro uklßdßnφ fotografiφ a obrßzk∙ s velkou barevnou hloubkou. Jpeg neumo╛≥uje d∞lat pr∙hlednΘ nebo animovanΘ obrßzky.

Pou╛φvß ztrßtovou kompresi, to znamenß, ╛e Φßst informace vypou╣tφ. D∞lß to tak, aby to lidskΘ oko pokud mo╛no nepoznalo. Mφra tΘto komprese se dß nastavit v grafickΘm programu. Ale pozor, po ka╛dΘm znovuotev°enφ a ulo╛enφ se op∞t provßdφ komprese, tak╛e se tφm obrßzek stßle znehodnocuje. Je proto dobrΘ mφt p°edlohu ulo╛enou v n∞Φem neztrßtovΘm a po ka╛dΘ ·prav∞ importovat do jpg.

GIF

GIF takΘ pou╛φvß kompresi, ale neztrßtovou, tak╛e jsou ty soubory relativn∞ v∞t╣φ ne╛ JPG, ale zato jsou p°esnΘ (zachovßvajφ barvy a kontury). M∙╛e se v n∞m vyskytovat maximßln∞ 256 barev. Jedna z barev se m∙╛e oznaΦit jako pr∙hlednß (tu prohlφ╛eΦ potom nezobrazφ), gify tΘ╛ podporujφ animace.

Barevnß hloubka GIFu

Na Internetu zßle╛φ na ka╛dΘm bitu, a proto Φφm jsou obrßzkovΘ soubory men╣φ, tφm lΘpe. Je zbyteΦnΘ k≤dovat v gifu 256 barev, kdy╛ pou╛φvß t°eba jenom dv∞ nebo Φty°i. Pokud se v grafickΘm programu snφ╛φ barevnß hloubka (poΦet barev), podstatn∞ se u╣et°φ velikost souboru (u ΦernobφlΘho souboru a╛ osminßsobn∞). Postup p°i sni╛ovßnφ poΦtu barev se op∞t li╣φ od programu k programu. V angliΦtin∞ je to obvykle p°φkaz "decrease color depht" nebo "export - bitmap".

Prou╛kovßnφ

Z datovΘho formßtu GIFu vypl²vß zajφmavß vlastnost: pokud °ßdek bod∙ obsahuje jenom jednu barvu, velmi se ╣et°φ datov² objem. Jednoduch² gif obsahujφcφ zejmΘna barevnΘ prou╛ky (a mßlo p°echod∙) se tedy ulo╛φ velmi ·sporn∞.

Proklßdßnφ (progresivnφ vykreslovßnφ)

P°i uklßdßnφ soubor∙ JPG i GIF se dß nastavit, zda se majφ vykreslovat proklßdan∞. KonkrΘtnφ postup nastavenφ proklßdßnφ p°i uklßdßnφ obrßzku zßvisφ na pou╛itΘm editoru. V anglick²ch editorech se to jmenuje "interlaced" nebo "progresive encoding".

Normßln∞ se obrßzky vykreslujφ po °ßdcφch odshora, ale kdy╛ se nastavφ toto proklßdßnφ, tak se nap°ed vykreslφ zaml╛enΘ, ale celΘ. Jak postupn∞ dochßzejφ dal╣φ data, tak se zobrazenφ zp°es≥uje. Je to hezkΘ.

Dal╣φ formßty

Existuje "nov²" formßt png, kter² by m∞l mφt v²hody gifu i jpegu. Ale p°φli╣ se nepou╛φvß, pravd∞podobn∞ kv∙li nepodpo°e star╣φch prohlφ╛eΦ∙.

Prohlφ╛eΦe verze 4 v sob∞ majφ podporu i jin²ch formßt∙; kup°φkladu IE 4 podporuje minimßln∞ bmp. Ale takov² soubor rozhodn∞ nedoporuΦuji do strßnek za°azovat, proto╛e je moc velk² a prohlφ╛eΦe krom∞ IE 4 (a v²╣) jej stejn∞ Φφst neum∞jφ.

P°evß╛nß v∞t╣ina grafick²ch formßt∙ pot°ebuje ke svΘmu zobrazenφ plu╛inu (plug-in), co╛ je podp∙rn² program prohlφ╛eΦe. Chcete-li umφstit na strßnky n∞co hodn∞ netradiΦnφho, musφte si na webu najφt plu╛inu. Obrßzek pak nezadßvat jako <img>, ale jako <object> nebo <embed> s odkazem na umφst∞nφ plu╛iny.

Pr∙hlednΘ obrßzky

V grafickΘm editoru m∙╛ete ud∞lat gif, kter² bude mφt n∞kterΘ Φßsti pr∙hlednΘ. V²hody jsou tyto:

Zpr∙hledn∞nφ se v ka╛dΘm editoru d∞lß jinak, idea je takovß, ╛e se vybere jedna barva a ta se nastavφ jako pr∙hlednß. Jak na to:

Opravdov²m problΘmem pr∙hledn²ch gif∙ jsou r∙znΘ p°echody, kterΘ obsahujφ mnoho odstφn∙. TakovΘ obrßzky doporuΦuji rad∞ji dßvat do jpg a zpr∙hledn∞nφ o╛elet.

Jin²m problΘmem m∙╛e b²t to, ╛e je pot°eba zpr∙hlednit vφce ne╛ jednu barvu. To nejde. Je pot°eba v╣echny takovΘ odstφny p°evΘst na jeden a ten zpr∙hlednit.

AnimovanΘ gify

Formßt gif dovoluje posklßdat v sob∞ n∞kolik obrßzk∙ a sestavit z nich animaci. Musφte na to mφt n∞jak² specißlnφ program, v∞t╣inou se to jmenuje "bla bla Animator". V normßlnφm editoru si p°ipravφte grafickΘ sekvence, kterΘ v animßtoru posklßdßte, nastavφte Φasovßnφ a ulo╛φte do gifu. AnimovanΘ gify se ve strßnkßch pou╛φvajφ ·pln∞ stejn∞ jako normßlnφ gify, co╛ je fantastickß v²hoda.

Nev²hodou animovan²ch gif∙ je znaΦnß ru╣ivost pro Φtenß°e (tak╛e se pou╛φvß prakticky pouze v reklamßch) a n∞kdy i dost velk² datov² objem.