Графіка на вашій WEB-сторінці. Оптимізація графіки для Веб-сторінок
Онлайн підручник по WEB-графіку
Здавалося б, що можна сказати нового на цю досить стару тему - оптимізація графіки. Однак я спробую поділитися власним досвідом у цій галузі і дати деякі чисто практичні рекомендації з підготовки графіки для веб-сторінок.
Я не став зупинятися на питаннях, пов'язаних з поведінкою графіки в старовинних восьмибітних відеорежимах. Такі поняття, як "безпечна" палітра вже втратили колишню актуальність. У той же час багато веб-майстри часто роблять помилки, яких можна уникнути, уважніше придивившись до деяких особливостей графічних форматів і графічних редакторів.
Мова тут йде про тільки двох класичних мережевих растрових форматах - GIF і JPEG, оскільки для повноцінної підтримки, скажімо, PNG навіть браузерам останніх версій необхідний спеціальний модуль, який далеко не всі користувачі знайшли за потрібне встановити. Векторна ж графіка практично повністю зводиться до ультрамодному стандарту ShockwaveFlash, а це вже зовсім інша історія ...
GIF і JPEG використовують абсолютно різні принципи стиснення графічної інформації. Щоб навчитися вибирати відповідний формат, давайте спробуємо краще розібратися в пристрої цих форматів.
Особливості стиснення в JPEG
При розробці методу стиснення JPEG були враховані деякі примітні особливості органів колірного сприйняття людини. Справа в тому, що людський зір куди більш чутливо до зміни освітленості, а не власне кольору. Використовувана в комп'ютерній графіці колірна модель RGB (червоний, зелений, синій) »не економічна" через однаковою важливості всіх трьох складових. Вибір же іншої системи колірних координат дозволяє збільшити стиснення шляхом покидька доброї половини інформації про відтінку і насиченості кольору. При цьому найбільш важливий для ока компонент яскравості залишається недоторканим. Після такої операції обсяг інформації зменшується на третину. До речі, в цьому формат JPEG дуже схожий на схеми передачі кольору в кольоровому телебаченні.
Крім того в JPEG реалізований алгоритм стиснення "з втратами" - дискретне косінусоідальное перетворення (DCT), при якому інформація про колір кожного пікселя замінюється інформацією про характер зміни кольорів в межах заданої області. Зображення квантуется - перетворюється в мозаїку з квадратів (зазвичай 8 х 8 пікселів). Усередині кожного такого квадрата розподіл квітів описується спеціальної математичної функцією, коефіцієнти якої і зберігаються в JPEG-файлі. Якість сурогатного зображення, отриманого шляхом зворотного перетворення, і відповідно розмір файлу залежать від складності функції і похибки округлення.
Тільки після всіх цих перетворень настає черга звичайного стиснення (вже без втрат). Для цього, як правило, застосовується не запатентований алгоритм Huffman compression. Попередньо розсортувати по поличках інформація стискається максимально ефективно.
JPEG призначений, перш за все, для кольорових фотографій з м'якими колірними переходами, адже зі збільшенням показника стиснення стає помітним взаємне проникнення квітів на різких колірних контактах і "тремтіння" тонких ліній. Варіюючи ступінь стиснення можна домогтися дуже високих показників оптимізації кольорових фотографій (наприклад, 1: 10) без помітної оці втрати якості. Формат 24-розрядний (16,7 млн. Квітів) - це можливо головне, хоча і відносне, перевага перед GIF.
Для малорозмірних зображень (десятки пікселів) JPEG не використовують, т. К. В виду описаних вище особливостей він нечітко передає дрібні деталі. Для порівняння наведу мінімальні розміри одно-піксельних файлів: для JPEG - 542 байта; для GIF - 35 байт.
Особливості стиснення в GIF
Цей формат був створений фірмою CompuServe в далекому 1987 році. На сьогодні GIF залишається одним з найпоширеніших графічних форматів, і його підтримують всі існуючі графічні браузери. Фактично, поняття Web-графіки здебільшого зводиться до техніки створення GIF-зображень.
Головні, хоча і абсолютно не пов'язані між собою, особливо формату - це прив'язка зображення до певної палітрі і алгоритм стиснення без втрат - LZW. Тому розмір (а значить швидкість завантаження) GIF-файлу знаходиться в строгій залежності від двох речей - розміру палітри (кількості задіяних квітів) і характеру самого зображення (його "фрагментації")
Палітра (таблиця кольорів) може містити 2, 4, 16, 32, 64, 128 або 256 осередків. Таким чином, картинка в форматі GIF не може мати більше 256 кольорів (8 біт на піксель). Втім, для більшості завдань веб-дизайну 256 квітів в одному файлі - це навіть багато. Палітра може містити "системні" кольору, або бути довільно індексованої, т. Е. Адаптованої для конкретного зображення. Якщо оригінал має більше 256 кольорів, то при експорті близькі відтінки приймають деякий усереднене значення. Є навіть таке псевдо-емпіричне правило: чим більшу площу займає колір на зображенні, тим більше у нього шансів залишитися "самим собою". Частково вирішити проблему обмеженості палітри іноді допомагає дифузія кольорів - змішування пікселів для отримання перехідного відтінку. Така опція є в більшості графічних редакторів. Але тут ми стикаємося з іншою проблемою - дифузія вносить в файл зображення додаткову порцію безладу, що впливає на його стисливість. Тому дифузію бажано компенсувати скороченням палітри (наприклад, з 256 до 128 або 64 кольорів)
Ось наочний приклад залежності розміру файлів від впорядкованості графічної інформації в них (ці три картинки не відрізняються нічим, крім характеру малюнка)
210 байт
519 байт
1002 байта
Секрет в тому, що в GIF-файлах інформація зберігається за рядком. Як бачите, описати по рядках першу картинку досить просто, чого не скажеш про останній.
Як відомо, існує дві версії формату: GIF87a і GIF89a. Такі розширення, як прозорість і анімація підтримуються тільки в GIF89a, тому більшість програм створюють файли саме в цьому варіанті.