fbpx

Каталог статей

Каталог статей для размещения статей информационного характера

Технології

Векторна і растрова графіка в web

1. В даний час існує достатньо велика кількість різних форматів графічних файлів. Тим не менш, всі їх можна розділити на дві групи. Це файли, що зберігають векторну графіку і файли зберігають растрову графіку. Растрова графіка – це коли зображення зберігається у вигляді маленьких точок – пікселів. Відповідно якість такої картинки обмежується двома факторами: це власне розмір самої картинки в пікселях, і роздільною здатністю зображення – тобто кількістю пікселів на одиницю довжини (найбільш поширене пікселі на дюйм). Файли, що зберігають растрову графіку це jpg, gif, bmp, tiff, png, psd та інші. Векторна графіка – це коли зображення зберігається у вигляді масиву чисел, що описують побудову зображення у вигляді кривих та ключових точок – вершин. Формати векторної графіки, swf, cdr, max, ai, частково pdf.
2. У практиці web графіки в основному використовуються два формати растрової графіки – jpeg і gif, і один формат векторної графіки, swf. Набагато рідше використовується формат png.
3. Формати jpeg і gif різняться різними алгоритмами стиснення зображення. Так як в web розмір файлу досі грає вельми суттєве значення в силу ряду причин, отже мала вага графічного файлу істотно підвищує швидкість завантаження зображення. Для різних «видів» картинок підходить той чи інший формат графіки. Визначення необхідного формату – основне вміння web – дизайнера. Для фотографій, портретів, фотографій великого розміру, насичених складними деталями – найкраще підходить формат jpeg. Алгоритм стиснення цього формату працює таким чином, що при зменшенні ваги» картинки, а отже якості, зображення як би «розмивається», стають погано помітні чіткі переходи між кольорами, і з’являються паразитні кольорові пікселі як побічний ефект дії алгоритму. Ступінь компресії файлу визначається кожного разу дизайнером виходячи з його потреб, але оптимальним співвідношенням розмірякість зображення вважається відсоток стиснення рівний 65. Формат gif найкращим чином підходить для зображень невеликого розміру, там де необхідна прозорість (альфа-канал), і для анімованої растрової графіки. Алгоритм стиснення цього формату ґрунтується на тому, що зображення задається фіксована колірна палітра (від 2 до 256 кольорів), а всі близькі відтінки викидаються або замінюються сусідніми кольорами. Також алгоритм прораховує зображення лініями – зліва направо, і зберігає інформацію не про кожному пікселі окремо, а рахує скільки пікселів однакового кольору стоять в ряд, і зберігає інформацію лише про кольорі і кількості пікселів. Це істотно знижує вагу файлу. Неважко помітити, що вертикальний градієнт (зверху-вниз) буде важити в такому випадку набагато менше горизонтального градієнта (зліва-направо). Це слід враховувати при створенні зображень, особливо при створенні анімованих банерів, де вага складається ще й з кількості кадрів і йде буквально війна за кожен байт. Формат png використовується вкрай рідко. Його відмінність від формату gif у тому, що png дозволяє зберігати більше інформації про файл. Зокрема інформацію про альфа-каналі. У форматі gif кожен окремий піксель може бути повністю прозорим, або повністю непрозорим. Це накладає обмеження на використання прозорих переходів прозорість, із за чого файли gif з прозорістю часто виглядають «рваними» по краях. Але, у зв’язку з великою вагою png файлів, їх практично не використовують, а застосовують різні візуальні хитрощі у форматі gif, зокрема додавання «перехідних» пікселей по краях зображення.
4. При іменуванні файлів слід дотримуватися простих правил. По-перше, слід уникати безглуздих, так і «говорять» назв. Назва файлу повинна відразу визначати його місце в структурі веб-сторінки. Тобто. Якщо це картинка до статті, то вона повинна розташовуватися в папці articles і її назвою служить id статті. Якщо це позиція в каталозі, то у відповідній папці (items, groups) картинка повинна мати назвою ID групи, підгрупи чи товару. У той же час, якщо, наприклад, на сайті дуже рідко пишуться статті, можна не вводити додаткові папки, але тоді файл повинен за назвою однозначно асоціюватися з даним розділом. Це можна зробити наприклад додаванням слова news чи art перед id картинки (наприклад news-34.jpeg). Якщо до одного id відноситься кілька картинок різного розміру – необхідно додавати після id картинки розширення, що означає розмір (для великих картинок – b, для маленьких – s) (приклад 38-s.gif, art-08-b.jpeg). Для декількох картинок одного розміру, можна ввести порядкові номери (приклад: art08-b_01.gif). При іменуванні картинок, формують оформлення сайту слід дотримуватися наступних позначень: top – для шапки сайту, bottom – для підвалу сайту, but – для різного роду кнопок, ico – для іконок, img або pic – для інших картинок оформлення з додаванням порядкового номера в кінці.
5. Основними програмами для роботи з зображеннями у дизайнера служать Adobe Photoshop та Adobe ImageReady для растрової графіки (наприклад, веб-дизайн) ; Corel draw і Macromedia Flash для векторної. Також використовується іноді для векторної графіки Adobe illustrator – але це вже справа смаку дизайнера, бо програми по своїй суті ідентичні, і володіють схожим функціоналом. Всі продукти фірми Adobe (а до них останнім часом відноситься і Flash), володіють схожим інструментарієм і гарячими клавішами, що спрощує роботу в різних програмах при переході від однієї до іншої.
6. Формат flash – один з найбільш «модних» і популярних у вебі. Цьому служать кілька його особливостей. По-перше, за рахунок того, що це векторний формат, можливо створення відносно складних і барвистих зображень при досить малій вазі файлу (зараз поширене створення flash презентацій, flash сайтів). По-друге, за рахунок використання вбудованої скриптової мови Action Script flash є можливість створювати інтерактивні банери, програми, писати різні сценарії, створювати онлайн системи розрахунку, ігри, окремі додатки і т. п.
Джерело –