|
|
| ХАТА МОЯ | ПОРТФОЛІО | ХРИСТИЯНИНУ | ПОЧИТАТИ | МОЄ ЖИТТЯ | ФОТОАЛЬБОМ | ЗВ'ЯЗОК | |
 Один на один с FreeBSD |
|
|
Швидкі пальчики 01
За побажаннями тих, хто вважає своїми знаряддями праці клавіатуру і мишку, кому вже нудно пасивно користуватися Інтернетом, і права долонька свербить від невимовного хотіння вклеїти свою сторінку в різноколірну глобальну книжку, розпочинаємо спілкування на цю тему. Ви всі вже люди дорослі або принаймні вважаєте себе дорослими, і тому вчити вас - вельми невдячна і важка справа. Ніхто не любить невдячних справ - ні ті, хто не дякує, ні тим більше ті, кому не дякують. У зв’язку з цим сумним законом буття статті клубу “Швидкі пальчики” будуть носити радше характер інформацій для роздуму. Та й називатись будуть так само. Інформація для роздуму номер 1: малюнки, фотки, прибамбасики. З чого складається Інтернет-сторінка звичайного формату HTML? Відповідь очевидна – з тексту і картинок. Текст – це текст, а картинки – це що? Відповідь не така очевидна. Тому поговоримо про формати графіки в Інтернет. Вияснимо дещо до того, як будемо збирати докупи текст і графіку в неповторне, гармонійне і наповнене страшенно цікавим змістом віртуальне творіння нашої уяви (саме у цьому полягає суть веб-дизайну). Існують два основні формати Інтернет-графіки – GIF i JPEG. Є ще також формат PNG. Всюди, де згадують про нього, не забувають сповістити, що цей формат дуже прогресивний (можна використати навіть 48-бітний колір!) і набуває все більшого поширення (хоча й не дозволяє створювати анімацію). На жаль, жоден з файлів цього формату не потрапив мені до рук, - чи то через потік кешу, чи то простим завантаженням оригінальної картинки. Тому облишимо його. Поки що. Нетерплячих запрошую на сайт: http://pro.net.ru/fiction/png.html. Усі ці формати репрезентують собою растрову графіку (чи то бітмапи – bitmap англійською). Єдиний поширений векторний (лінійний) формат анімованої веб-графіки – це flash-анімації (.swf), зараз вони в моді, і, мабуть колись замінять собою GIF-и (бо маленькі-премаленькі і швидкі-прешвидкі, а це все ще важливо і буде важливим ще довго). Але поки ніхто нікого не замінив, нам нічого не залишається, як погомоніти про те, що маємо. Отже, маємо бітмапу. Що має бітмапа? Оскільки вона по суті є матрицею кольорових точок (пікселів), то має ширину і висоту в цих самих пікселах, а також палітру, розмірність якої залежатиме від того, скільки біт використовується для збереження кольору в цій бітмапі. Наприклад, розглянемо роздільну здатність (resolution), що називається True Color або RGB (red, green, blue). Відомо, що колір є зміксований з цих трьох основних компонуючих кольорів , тому кожен піксел можна представити 3-ма числами, в яких відображено кількість зеленого, червоного і синього в кольорі цього піксела. Три основні кольори – це три байти (по байту на кожен компонуючий колір) або 24 біти. З цього випливає, що максимальна кількість дискретних кольорів для бітмапи в палітрі True Color дорівнює 2 до 24-го ступеня, тобто 16 777 216 (ось звідки взялися постійно згадувані 16 мільйонів кольорів). Приклад: якого мінімального розміру повинна бути відеокарта для того, щоб при розмірах екрану 600x800 пікселів досягалася роздільна здатність 16 біт або так званий High Color (палітра в 65 536 кольорів)? Рахуємо: 600x800x2 байти = 960 000 байт або приблизно 0.91 Мб. Отже, 1-Мб відеокарти нам вистачить. Наступний приклад: порахуємо, скільки місця на диску займе файл 200x300 пікселів в True Color. 200x300x3байти = 180 000 байт або приблизно 175 Кб. Багато, звичайно, і дуже багато для Інтернет-сторінки, загальний розмір якої бажано робити десь меншим удвічі. Звичайно, чим вища роздільна здатність, чим більше з 16 мільйонів кольорів використано, тим якіснішою і колористично багатшою виглядає картинка. Але нас не перестає хвилювати розмір, і наші хвилювання цілком виправдані. Користувачі Інтернету – народ нетерплячий. Дуже повільно вантажиться сторінка – втікає на іншу. Кому, як не нам, це знати. Особливо тим, хто платить цілий справжній зелений папірець за годину і не з кишені шефа, а з ріднесенької власної. Гадаю, всі згідні – файли треба стискати, зменшувати, скручувати в баранячий ріг, висушувати і викручувати (як після прання). Повинні для цього бути і певні засоби. Більшість графічних програм дозволяє здійснити різні види компресії. Найпримітивніший з них полягає в тому, що в картинці знаходяться області, що мають однаковий колір, і заміняються приміткою на зразок: “вся ця область такого самого кольору”. Але де ви бачили такі області на фотографії?… Тут, мабуть, така компресія не спрацює. Ще трошечки класифікації, і можна вже буде приступати до роботи. Знання – сила, а сили не буває забагато. Буває замало розуму. Оскільки нам це не загрожує, в темпі вальсу рухаємося далі. Розвиток лейтмотиву “забагато-замало” представлений у наступній сентенції. Відомо, що бітмапи
бувають 3-х типів:
А тепер трошки перескочимо до іншого поняття, яке називається зведенням (dithering або клішування чи remapping або навіть не знаю як перекласти, але знаю тільки, що для фотографій краще працює dithering, а для мальованої графіки - remapping), що означає зменшення кількості кольорів, що використовуються в палітрі, до 256-ти або навіть меншої їх кількості. Зведення відбувається таким чином, щоб створити максимально якісну “підробку” всіх кольорів картинки. Очевидно, краще, щоб для кожної бітмапки підбиралась своя унікальна палітра з 256-ти кольорів ( так званий 8-бітний колір), а не одна із стандартних палітр “по замовчуванню”(тобто щоб в програмі була така можливість, а в “правильних” програмах вона є). Найчастіше в пакетах обробки графіки використовуються такі стандартні палітри “по замовчуванню”, як:
Щоб бути точною до кінця, признаюсь, що про “палітрований колір” (paletted-color) згадують тоді, коли в картинці використовується 256 кольорів і менше. Це все тонкі питання термінології, хоча краще мати глибоке розуміння процесу, а не самих лишень термінів. Основне тут – просто зрозуміти, що треба вчинити з малюнком, якщо ми хочемо розмістити його в Інтернет. Мабуть, ви вже потрохи вловлюєте різницю між GIF i JPEG. Для того, щоб з класичного BMP-файлу WINDOWS отримати GIF, здійснюємо компресію “без втрат”, а щоб отримати JPEG – задаємо ступінь деградації. Перший і наразі єдиний формат, що дозволяє робити анімацію, gif , – використовує максимум 256 кольорів. Якщо вам потрібні різні елементи оформлення сторінки – кнопочки, гудзички, маркери абзаців, лінійочки і різні всякі там анімовані фіглі-міглі - то використовуйте саме його. 256-колірний файл очевидно менший ( не повірите, але рівно в 3 рази) від того, де використано 16 мільйонів кольорів. (Можна і JPEG звести до 256-ти кольорів, але тоді не має змісту звертатися до цього формату.Ну, а взагалі, якщо щось можна звести до 256-ти кольорів і не втратити якість зображення, то зробити це треба обов’язково. 256 можна спробувати зредукувати до 128, 128 – до 64-х, 64 – до 32-х і так далі – поки картинка терпить всі ці тортури. Деколи зробити це просто лінуються, а потім дивуються, чому на їх сайт ніхто другий раз не заходить. Ще б пак, - він і перший раз до кінця зайти не зміг, - не вичекав завантаження, бідося.) Саме стільки , - 16 мільйонів кольорів, - використовує формат jpeg, до якого ми, як правило, зводимо файли повноцінних колірно BMP або PNG-форматів. Без 16 мільйонів не обійтися, якщо треба розмістити на веб-сторінці фотографію або живопис, де є дуже важливим відтворення тонких переходів між відтінками кольору. Та й що тут казати – гарні речі люблять усі. Не буде зайвим поекспериментувати з ступінню деградації кольору, відслідковуючи при цьому зміни розміру файлу та якості картинки. Ще один нюанс – jpeg не підтримує прозорості фону, як gif, але не всі картинки в Інтернет квадратові. Шматочкам за межами заокруглених куточків кнопочок для досягнення відповідного ефекту звичайно присвоюють властивість прозорості. І тому якщо картинка зводиться до 256-ти кольорів або менше, то її краще зберегти у форматі gif, як вже зазначалося вище. Підбір кольору фону веб-сторінки до кольору тих куточків з 16 мільйонів можливих може призвести до часткового затьмарення широких горизонтів, які перед вами відкриває власна сторінка в WWW. І взагалі, надмірне захоплення цим форматом часто буває причиною важких психічних розладів і зорових галюцинацій, першою ознакою яких є яскраво-зелений крокодильчик, що невпинно гасає по периметру головної вітрини WINDOWS. Слід ще врахувати візуальні розміри файлу (ширина-висота). При збільшенні цих параметрів в 2 рази кілобайтний розмір файлу збільшується в 4 рази. Аналогічно при зменшенні. Ці операції треба також робити акуратно, бо зменшуючи або збільшуючи кількість пікселів в картинці, ми якісь пікселі викидаємо або відповідно додаємо, але не всі програми роблять це коректно. Особливо допитливі з вас ще можуть поцікавитися терміном dpi (dots per inch). Якщо все вищесказане засвоїлося вами без особливих спотворень, то зрозуміти це буде зовсім просто. Допустимо, що екран має 600 на 800 пікселів, разом їх 480 тис. Знаючи фізичні розміри екрана в дюймах (12,14,15,17 і т.д.), можна порахувати, скільки точок (пікселів) припаде на 1 дюйм. Чим їх більше, тим картинка виглядає більш гладко і реалістично. Тепер, мабуть, зрозуміло, чому розмірність екрана (600 на 800, 1024 на 768 і так далі) повинна б зростати із збільшенням діагоналі екрана, - для того, щоб якісніше відображати графіку. Детально про формати файлів можна почитати на сайті, присвяченому цій водночас вузькій і широкій темі:http://www.halyava.ru/document/ Безкоштовні картинки можна знайти на сайтах: http://www.barrysclipart.com, http://www.arttoday.com, http://pix.km.ua Знайте: і солідні, і не дуже програми, звичайно дозволяють здійснити операції зведення та необхідної конвертації форматів. Не можу проминути того факту, що переважна більшість програм для створення GIF-ів є платною (майже немає в цій сфері відповідного freeware), оскільки ліцензія на цей формат належить корпорації Unisys з 1985 року, але вона підступно мовчала аж до 1994 –го, тобто поки формат не знайшов свого широкого розповсюдження і став заледве не найпопулярнішим в WEB. З того часу вищезгадана фірма вимагає виплати авторського гонорару в кожного, хто створює програми з використанням алгоритму LZW, - а це всі графічні пакети для конструювання GIF-ів. Добре хоч, що ліцензуванню підлягає тільки програмне забезпечення, а не всі картинки, що створюються за його допомогою. В будь-якому випадку дана тема не є актуальною там, де вимушені користуватися “хекнутими-крекнутими” пакетами. Залишається пожаліти виробників таких програм, які, з одного боку, потерпають від Unisys, а з іншого - від піратів. А з третього боку – де б були тепер всі ми, якби не пірати?… І головне: завжди є можливість створити анімацію формату AVI (в якому можна використати True Color, але який не можна використати на веб-сторінці безпосередньо, а тільки при наявності плагінів або ще там чогось). А цей файл можна перекинути в GIF за допомогою, наприклад, Gif Construction Set Professional (автори програми люб’язно залишили цю опцію в незареєстрованій оціночній версії). Не можу не забігти наперед і не зазначити, що тег <IMG>, за допомогою якого на веб-сторінку вписується картинка, вигідно не залишати без параметрів WIDTH i HEIGHT з правдивими значеннями, бо тоді браузер одразу знатиме, скільки місця треба відвести на ту чи іншу картинку і вантажитиме сторінку набагато швидше. Про теги почнемо розмову наступного разу. Пропозиції прошу надсилати на поштову скриньку, але перед цим зверніть увагу на те, що гонорові люди називають disclaimer, а не гонорові – відмазкою: жодного Фронтпейджу, чистий, незіпсутий трактуванням різних візуальних редакторів HTML, також JavaScript і трошки VBScript-у. Врахуємо особливості браузерів та різних “халявних” і платних серверів. Розглянемо допоміжне програмне забезпечення і ваші побажання. А наразі тренуйте пальчики.
|
|
|||||||||||||
| |||||||||||||||
|
Ідея проекту, програмування, HTML, CSS, дизайн,
редагування та переклад текстів - Дідок Олександр. | |||||||||||||||
А хто ж тоді я ...