Які графічні формати використовуються в web-дизайні?

В даний час існує досить велика кількість різних форматів графічних файлів. Тим не менше, всі їх можна розділити на дві групи. Це файли, що зберігають векторну графіку і файли, що зберігають растрову графіку.

Растрова графіка - це коли зображення зберігається у вигляді маленьких точок - пікселів. Відповідно якість такої картинки обмежується двома факторами: це власне розмір самої картинки в пікселях, і здатністю зображення - тобто кількістю пікселів на одиницю довжини (найбільш поширене пікселі на дюйм). Файли, що зберігають растрову графіку, це jpg, gif, bmp, tiff, png, psd та інші.

Векторна графіка - це коли зображення зберігається у вигляді масиву чисел, що описують побудову зображення у вигляді кривих і ключових точок-вершин. Формати векторної графіки - swf, cdr, max, ai, частково pdf.

У практиці web графіки в основному використовуються два формати растрової графіки - jpeg і gif, і один формат векторної графіки - swf. Набагато рідше використовується формат png.

Формати jpeg і gif розрізняються різними алгоритмами стиснення зображення. Так як в web розмір файлу досі грає досить істотне значення в силу ряду причин, отже, мала вага графічного файлу істотно підвищує швидкість завантаження зображення. Для різних «видів» картинок підходить той чи інший формат графіки.

Визначення необхідного формату - основне вміння web-дизайнера. Для фотографій, портретів, зображень великого розміру, насичених складними деталями - найкраще підходить формат jpeg.

Алгоритм стиснення цього формату працює таким чином, що при зменшенні «ваги» картинки, а отже якості, зображення як би «розмивається», стають погано помітні чіткі переходи між квітами, і з'являються паразитні кольорові пікселі як побічний ефект дії алгоритму. Ступінь компресії файлу визначається кожного разу дизайнером виходячи з його потреб, але оптимальним співвідношенням розмір / якість зображення вважається відсоток стиснення, рівний 65.

Формат gif найкращим чином підходить для зображень невеликого розміру, там де необхідна прозорість (альфа-канал), і для анімованої растрової графіки.

Алгоритм стиснення цього формату грунтується на тому, що зображенню задається фіксована колірна палітра (від 2 до 256 кольорів), а всі близькі відтінки викидаються або замінюються сусідніми квітами. Також алгоритм прораховує зображення лініями - зліва направо, і зберігає інформацію нема про кожному пікселі окремо, а вважає, скільки пікселів однакового кольору стоять у ряд, і зберігає інформацію тільки про колір і кількості пікселів. Це істотно знижує вагу файлу. Неважко помітити, що вертикальний градієнт (зверху-вниз) буде важити в такому випадку набагато менше градієнта горизонтального (зліва-направо). Це слід враховувати при створенні зображень, особливо при створенні анімованих банерів, де вага складається ще й з кількості кадрів і йде буквально війна за кожен байт.

Формат png використовується вкрай рідко. Його відмінність від формату gif в тому, що png дозволяє зберігати більше інформації про файл. Зокрема, інформацію про альфа-каналі. У форматі gif кожен окремий піксель може бути або повністю прозорим, або повністю непрозорим. Це накладає обмеження на використання прозорих переходів у прозорість, із за чого файли gif з прозорістю часто виглядають «рваними» по краях. Але, у зв'язку з великою вагою png файлів, їх практично не використовують, а застосовують різні візуальні хитрощі в форматі gif, зокрема додавання «перехідних» пікселів по краях зображення.

При іменуванні файлів слід дотримуватися простих правил. По-перше, слід уникати як безглуздих, так і «говорять» назв. Назва файлу повинна відразу визначати його місце в структурі веб-сторінки. Тобто, якщо це картинка до статті, то вона повинна розташовуватися в папці 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 - для інших картинок оформлення з додаванням порядкового номера в кінці.

Основними програмами для роботи із зображеннями у дизайнера служать Adobe Photoshop і Adobe ImageReady для растрової графікі- Corel draw і Macromedia Flash для векторної. Також використовується часом для векторної графіки програма Adobe illustrator - Але це вже справа смаку дизайнера, бо програми за своєю суттю ідентичні, і володіють схожим функціоналом. Всі продукти фірми Adobe (а до них останнім часом відноситься і Flash), володіють схожим інструментарієм і гарячими клавішами, що спрощує роботу в різних програмах при переході від однієї до іншої.

Формат flash - Один з найбільш «модних» і популярних в інтернеті. Цьому служать кілька його особливостей. По-перше, за рахунок того, що це векторний формат, можливе створення щодо складних і барвистих зображень при досить малій вазі файлу. По-друге, за рахунок використання вбудованого скриптового мови Action Script під flash є можливість створювати інтерактивні банери, додатки, писати різні сценарії, створювати онлайн системи розрахунку, ігри, окремі додатки і т.п.