Ðàáîòà ñ ãðàôèêîé html-äîêóìåíòà (÷.3)
Ïðåîáðàçîâàíèå ôîðìàòà èçîáðàæåíèÿ
Óâåëè÷åíèå ðàçìåðîâ èçîáðàæåíèÿ
Ïðåîáðàçîâàíèå ôîðìàòà èçîáðàæåíèÿ html-äîêóìåíòà
Åñëè êàðòèíêà õðàíèòñÿ â ôàéëå ñ ðàñøèðåíèåì îòëè÷íûì îò .gif èëè .jpg, òî âàì íåîáõîäèìî áóäåò âûïîëíèòü ïðåîáðàçîâàíèå ôîðìàòà èçîáðàæåíèÿ â íóæíûé. Äëÿ ýòîãî ìîæíî âîñïîëüçîâàòüñÿ ñðåäñòâàìè îäíîé èç ïðîãðàìì ðåäàêòèðîâàíèÿ ãðàôèêè, íàïðèìåð Adobe Photoshop èëè Corel PhotoPaint. Áîëåå ïîäðîáíî ðàáîòà íåïîñðåäñòâåííî ñ ãðàôèêîé ðàññìàòðèâàåòñÿ íà âåòêå ñàéòà "Ãðàôèêà".
Èçîáðàæåíèÿ GIF (Graphics Interchange Format) ìîãóò ñîäåðæàòü 256 öâåòîâ è èñïîëüçóþòñÿ, â îñíîâíîì, äëÿ îòîáðàæåíèÿ ðèñóíêîâ. Êðîìå òîãî, ýòîò ôîðìàò îáëàäàåò ñðåäñòâàìè ïîääåðæêè àíèìàöèè è ïðîçðà÷íîñòè.
Èçîáðàæåíèÿ JPEG (JPG) (Joint Photographic Experts Group) ñîäåðæàò áîëåå 16 ìëí. öâåòîâ. Äàííûé ôîðìàò èñïîëüçóåòñÿ äëÿ õðàíåíèÿ ôîòîãðàôèé è êðóïíûõ èçîáðàæåíèé.
Êàê ïðàâèëî, â ïðîöåññå êîíâåðòàöèè ôàéëà â ôîðìàò .gif èëè .jpg åãî ðàçìåð óìåíüøàåòñÿ, ÷òî ñïîñîáñòâóåò óâåëè÷åíèþ ñêîðîñòè çàãðóçêè êàðòèíêè.
Çàäàíèå ðàçìåðîâ èçîáðàæåíèÿ html-äîêóìåíòà
Çàäàíèå ðàçìåðîâ ãðàôè÷åñêîãî èçîáðàæåíèÿ ÿâíî (ñ ïîìîùüþ àòðèáóòîâ WIDTH, HEIGHT) ïîçâîëÿåò áðàóçåðó çàãðóæàòü êàðòèíêó ñ áîëüøåé ñêîðîñòüþ, ò.ê. îí íå òðàòèò âðåìÿ íà äîïîëíèòåëüíûå âû÷èñëåíèÿ.
×òîáû çàäàòü ðàçìåð èçîáðàæåíèÿ, åãî, ïîíÿòíîå äåëî, íàäî çíàòü. Óçíàòü ðàçìåð ìîæíî, ïðàêòè÷åñêè, â ëþáîì ãðàôè÷åñêîì ðåäàêòîðå. Åñëè âû ïîëüçóåòåñü õîðîøèì html-ðåäàêòîðîì, òî îí àâòîìàòè÷åñêè âñòàâëÿåò ðàçìåð èçîáðàæåíèÿ â òåêñò ñòðàíèöû ïðè âûáîðå ñîîòâåòñòâóþùåãî ãðàôè÷åñêîãî ôàéëà.
Åùå îäíèì ñóùåñòâåííûì ïëþñîì çàäàíèÿ ðàçìåðîâ "âðó÷íóþ" åñòü òîò ôàêò, ÷òî ïîëüçîâàòåëè, îòêëþ÷èâøèå â ñâîèõ áðàóçåðàõ ñðåäñòâà îáðàáîòêè ãðàôèêè, óâèäÿò âàøå òâîðåíèå èìåííî â òîì âèäå, â êàêîì îíî çàìûøëÿëîñü, ïîñêîëüêó îáëàñòü Âýá-ñòðàíèöû, ïðåäóñìàòðèâàþùèå ðàçìåùåíèå â íèõ ãðàôè÷åñêèõ èçîáðàæåíèé îïðåäåëåííûõ ðàçìåðîâ, îñòàíóòñÿ â íåïðèêîñíîâåííîñòè.
Óâåëè÷åíèå ðàçìåðîâ èçîáðàæåíèÿ html-äîêóìåíòà
Çàäàâàÿ ÿâíî ðàçìåðû èçîáðàæåíèÿ ìîæíî óâåëè÷èòü åãî ðàçìåðû. Òàêèì îáðàçîì ìîæíî ïîëó÷èòü áîëüøîå èçîáðàæåíèå íå óâåëè÷èâàÿ îáúåì ãðàôè÷åñêîãî ôàéëà è âðåìåíè, òðåáóåìîãî äëÿ åãî çàãðóçêè. Çàäàâàÿ ðàçìåðû èçîáðàæåíèÿ, óêàçûâàéòå íóæíûå çíà÷åíèÿ â ïèêñåëÿõ èëè ïðîöåíòàõ îòíîñèòåëüíî òåêóùèõ ãàáàðèòîâ îêíà áðàóçåðà. Ñëåäóåò çàìåòèòü, ÷òî íå ñëåäóåò çëîóïîòðåáëÿòü óâåëè÷åíèåì ðàçìåðîâ, ò.ê. â ýòîì ñëó÷àå êàðòèíêà ñòàíîâèòñÿ "çåðíèñòîé" è òåðÿåò ñâîå êà÷åñòâî.
Åñëè çíà÷åíèå íîâûõ ðàçìåðîâ çàäàâàòü â ïèêñåëÿõ, íàäî èñïîëüçîâàòü îáà àòðèáóòà WIDTH, HEIGHT. ×òîáû èçáåæàòü èñêàæåíèé, íåîáõîäèìî ñîáëþäàòü ïðîïîðöèþ. Åñëè æå çíà÷åíèÿ ââîäÿòñÿ â ïðîöåíòàõ îòíîñèòåëüíî ðàçìåðîâ îêíà áðàóçåðà, äîñòàòî÷íî çàäàòü ëþáîå çíà÷åíèå (øèðèíó èëè âûñîòó), - îñòàëüíîå áðàóçåð ïåðåñ÷èòàåò àâòîìàòè÷åñêè.
Óìåíüøåíèå èçîáðàæåíèÿ html-äîêóìåíòà
Àíàëîãè÷íûì ñïîñîáîì ìîæíî óìåíüøàòü èçîáðàæåíèÿ. Îäíàêî çäåñü ñóùåñòâóåò íåìàëîâàæíûé íåäîñòàòîê. Âðåìÿ, íåîáõîäèìîå äëÿ çàãðóçêè êàðòèíêè îñòàåòñÿ òî æå. Ò.å. êàðòèíêà ãðóçèòñÿ ñâîåãî "íàñòîÿùåãî" ðàçìåðà, ïðîñòî îíà "âæèìàåòñÿ" â òå ðàìêè, êîòîðûå âû ÿâíî óêàçûâàåòå àòðèáóòàìè WIDTH, HEIGHT. Òàêèì îáðàçîì, ÷òîáû óìåíüøèòü ðàçìåðû èçîáðàæåíèÿ, íàäî âîñïîëüçîâàòüñÿ ñðåäñòâàìè îäíîé èç ïðîãðàìì ðåäàêòèðîâàíèÿ ãðàôèêè, íàïðèìåð Adobe Photoshop èëè Corel PhotoPaint. Ïîñëå çàâåðøåíèÿ ðåäàêòèðîâàíèÿ ðåêîìåíäóþ ñîõðàíèòü âíåñåííûå èçìåíåíèÿ â íîâîì ôàéëå. Òàêèì îáðàçîì, âû âñåãäà ñìîæåòå âîñïîëüçîâàòüñÿ èñõîäíûì èçîáðàæåíèåì.
Ïðèìåð:
|
HTML-êîä: <img src="img/tigr.jpg" width="50" height="41">
<br>
<img src="img/tigr.jpg" width="100" height="82">
<br>
<img src="img/tigr.jpg" width="10%">
|
Îòîáðàæåíèå â áðàóçåðå: 
|
Îáðåçêà èçîáðàæåíèÿ html-äîêóìåíòà
Îáðåçêà èçîáðàæåíèÿ ïîçâîëÿåò óäàëèòü íåíóæíûå ÷àñòè êàðòèíêè.
Ïîñëå îáðåçêè îáúåì ôàéëà óìåíüøàåòñÿ, òåì ñàìûì óâåëè÷èâàÿ ñêîðîñòü çàãðóçêè ôàéëà.
Áîëåå ïîäðîáíî ðàáîòà íåïîñðåäñòâåííî ñ ãðàôèêîé ðàññìàòðèâàåòñÿ íà âåòêå ñàéòà "Ãðàôèêà".
