Ïîèñê ïî ñàéòó


Äèçàéíåðñêèé ôîðóì

Ðàññûëêà

Íàøà êíîïêà

Ìû ðåêîìåíäóåì

Èçîáðàæåíèÿ íà âåá-ñàéòå. ×àñòü I. Ôîðìàòû.

Íà ñåãîäíÿøíèé äåíü äëÿ îôîðìëåíèÿ âåá-ñàéòîâ ïðèìåíÿþòñÿ ãðàôè÷åñêèå ýëåìåíòû òðåõ ôîðìàòîâ: GIF, JPEG (JPG) è PNG. ×òîáû ïîíÿòü, êàêîé èç ïåðå÷èñëåííûõ ôîðìàòîâ äëÿ êàêîãî âèäà ãðàôèêè ïîäõîäèò, âûÿñíèì îñîáåííîñòè êàæäîãî.

1. GIF.

Ôîðìàò GIF (Graphics Interchange Format) áûë ðàçðàáîòàí â 1987 ãîäó êîìïàíèåé CompuServe è èçíà÷àëüíî ïðåäíàçíà÷àëñÿ äëÿ ïåðåäà÷è ðàñòðîâûõ èçîáðàæåíèé ïî Ñåòè(ëîêàëüíîé è Èíòåðíåò). Íî ïîñêîëüêó ïåðâàÿ âåðñèÿ ôîðìàòà íå îïðàâäàëà íàäåæä - ôàéë èçîáðàæåíèÿ ïîëó÷àëñÿ ñëèøêîì îáúåìíûì, ÷òî íà òîò ìîìåíò äåëàëà íåâîçìîæíûì åãî ïåðåäà÷ó ïî Ñåòè, äâóìÿ ãîäàìè ïîçæå âûøëà âòîðàÿ, óñîâåðøåíñòâîâàííàÿ âåðñèÿ GIF. Ñðåäè íîâûõ ôóíêöèîíàëüíûõ âîçìîæíîñòåé ôîðìàòà îêàçàëèñü: ïîääåðæêà ïðîçðà÷íîñòè è àíèìàöèè, çíà÷èòåëüíîå ñîêðàùåíèå îáúåìà ôàéëà èçîáðàæåíèÿ çà ñ÷åò ïîääåðæêè LZW-êîìïðåññèè.

Àëãîðèòì LZW îòíîñèòñÿ ê òàê íàçûâàåìûì ìåòîäàì ñæàòèÿ áåç ïîòåðü. Ïðèìåíèòåëüíî ê ôîðìàòó GIF ýòî îçíà÷àåò, ÷òî ïðè èñïîëüçîâàíèè ìåòîäà LZW-êîìïðåññèè íå ïðîèñõîäèò ïîâðåæäåíèÿ èëè èñêàæåíèÿ äàííûõ ãðàôè÷åñêîãî ôàéëà. Àëãîðèòì LZW ïðèìåíèì òîëüêî ê 8-áèòíûì èçîáðàæåíèÿì.

Ôîðìàò GIF ñ÷èòàåòñÿ ñòàíäàðòíûì äëÿ àíèìèðîâàííûõ èçîáðàæåíèé. Ïðîöåññ ðàçðàáîòêè GIF-àíèìàöèè íàïîìèíàåò ñîçäàíèå ìóëüòèïëèêàöèîííîãî ôèëüìà, êîãäà äâèæåíèÿ ïåðñîíàæà ïîäåëåíû íà êàäðû, ñìåíÿþùèå äðóã äðóãà ÷åðåç îïðåäåëåííûé ïðîìåæóòîê âðåìåíè.

Îáëàñòè ïðèìåíåíèÿ ôîðìàòà: äèàãðàììû, ãðàôèêè, ïðîñòåéøèå èçîáðàæåíèÿ è àíèìàöèÿ.

2. JPEG.

Ôîðìàò JPEG, ðàñøèôðîâûâàåìûé êàê "îáúåäèíåííàÿ ãðóïïà ýêñïåðòîâ ôîòîãðàôèè" (Joint Photographic Experts Group), ïðèìåíÿåòñÿ äëÿ õðàíåíèÿ ìíîãîöâåòíûõ ôîòîãðàôè÷åñêèõ èçîáðàæåíèé, òàê êàê îáåñïå÷èâàåò ñæàòèå ïîëíîöâåòíîãî èçîáðàæåíèÿ ïðàêòè÷åñêè áåç óìåíüøåíèÿ êîëè÷åñòâà öâåòîâ. Ïðîöåññ ñæàòèÿ ïðîèñõîäèò çà ñ÷åò óìåíüøåíèÿ ÷èñëà ïèêñåëåé, ñîäåðæàùèõ èíôîðìàöèþ.

Âî âðåìÿ ñæàòèÿ ïðîèñõîäèò êîíâåðòàöèÿ èçîáðàæåíèÿ â öâåòîâóþ ñèñòåìó YCbCr. Êàíàëû Cb è Cr, îòâå÷àþùèå çà öâåò, óìåíüøàþòñÿ â 2 ðàçà. Çàòåì óæå âñå öâåòîâûå êàíàëû èçîáðàæåíèÿ,âêëþ÷àÿ ÷åðíî-áåëûé êàíàë Y, ðàçáèâàþòñÿ íà ÷àñòè (êàæäàÿ ðàçìåðîì 8õ8 ïèêñåëåé). ×àñòè÷êè èçîáðàæåíèÿ ïîäâåðãàþòñÿ äèñêðåòíîìó êîñèíóñíîìó ïðåîáðàçîâàíèþ - àëãîðèòìó ñæàòèÿ áåç ïîòåðü. Çàêëþ÷èòåëüíûé ýòàï: óïàêîâêà ïîëó÷åííûõ êîýôôèöèåíòîâ ñ ïîìîùüþ êîäîâ Õàôôìàíà.

3.PNG.

PNG (Portable Network Graphics) ÿâëÿåòñÿ ðàñòðîâûì ôîðìàòîì õðàíåíèÿ ãðàôè÷åñêîé èíôîðìàöèè áåç ïîòåðè êà÷åñòâà âî âðåìÿ ñæàòèÿ.

Çàäóìûâàëñÿ äàííûé ôîðìàò êàê çàìåíà GIF. Îòñþäà è ñõîæèå âîçìîæíîñòè, âðîäå íàëè÷èÿ ïðîçðà÷íîãî ôîíà. Îäíàêî èç-çà áîëüøîãî, ïî ñðàâíåíèþ ñ GIF, îáúåìà ôàéëà ñ èçîáðàæåíèåì, à òàêæå îòñóòñòâèþ ïîääåðæêè àíèìàöèè, àìáèöèîçíûì ïëàíàì ðàçðàáîò÷èêîâ òàê è íå ñóæäåíî áûëî ñáûòüñÿ.

Òåì íå ìåíåå, ôîðìàò PNG îòëè÷íî ïîäõîäèò äëÿ õðàíåíèÿ è ðåäàêòèðîâàíèÿ èçîáðàæåíèé íà ïðîìåæóòî÷íîé ñòàäèè èõ ñîçäàíèÿ. Ãðàôè÷åñêèé ðåäàêòîð Macromedia Fireworks äëÿ ñîõðàíåíèÿ ðåçóëüòàòîâ îáðàáîòêè èçîáðàæåíèÿ èñïîëüçóåò èìåííî ýòîò ôîðìàò.

GIF, JPEG è PNG. ×òî ïðåäïî÷åñòü?

Ôîðìàò GIF ëó÷øå ïðèìåíÿòü äëÿ õðàíåíèÿ ãðàôè÷åñêèõ ýëåìåíòîâ ñàéòà (ìåíþ, áàííåðû, êíîïêè).  ôîðìàòå JPEG äîëæíû íàõîäèòüñÿ ôîòîãðàôèè èëè äðóãèå ïîëíîöâåòíûå èçîáðàæåíèÿ. À â PNG ìîãóò áûòü ñîõðàíåíû ïðåäâàðèòåëüíûå íàáðîñêè ìàêåòà áóäóùåãî ñàéòà.
Äèçàéí íàâèãàòîð - Photoshop, óðîêè ôîòîøîï, øàáëîíû ñàéòîâ