Графічні файли Web відрізняються від тих, що використовуються в класичній поліграфії. Вони завжди записуються в форматі RGB і мають набагато менший розмір. Фізичні розміри таких файлів теж невеликі, тому як швидкість передачі даних через Інтернет накладає серйозні обмеження на обсяг інформації. Для пересилки файлів від сервера до клієнта потрібен час. Зрозуміло, що чим більше файл і чим менше швидкість підключення до Інтернету клієнта, тим більше часу потрібно для передачі інформації. Основний обсяг інформації, як правило, «з'їдають» зображення (графічні файли). Майже всі стикалися з ситуацією, коли неможливо завантажити зображення на сторінці. Відбувається це тому, що графічних файлів дуже багато, але дизайнер не потрудився зменшити їх в розмірі, тобто оптимізувати. Основне питання, згадуваний в цій статті, - шляхи реалізації Web-дизайнерами компромісу між розміром файлу та якістю його вмісту.
Існує два основних типи побудови комп'ютерних графічних даних: векторні файли і растрові файли.
Векторні фали побудовані з форм, що описуються математичною мовою. Тобто такими поняттями, як точки розміщення, ширина, висота, колір заповнення. Прикладами векторних програм є Adobe Illustrator. Adobe Macromedia FreeHand. з вільного програмного забезпечення: Xara LX. Inkscape.
Растр - це сукупність об'єктів (пікселів), вирівняних в стовпці і рядки, іншими словами, мозаїчна структура. Растровий файл можна розглядати як набір маленьких кольорових або чорно-білих квадратиків, де кожен квадратик виводиться одним тоном. Висока якість такого зображення обумовлено малим розміром пікселів, при якому людське око не розрізняє окремі елементи (пікселі), які зливаються один з одним, утворюючи безперервну зміну тону.
Слід зазначити, що крім деяких спеціальні випадки, можна стверджувати, що в Web можна використовувати векторні об'єкти. Ми розглянемо три типи файлів, які використовуються Web-дизайнерами:
Готове зображення в GIMP оптимізується при збереженні. Меню Файл⟶ Зберегти як. або комбінацією клавіш Shift + Ctrl + S. У полі Зберегти зображення необхідно вибрати розширення файлу або внести його в ручну в верхньому рядку. Від розширення залежать подальші вікна і налаштування оптимізації.
Оптимізація в форматі GIF (розширення .gif)
Формат GIF (Graphics Interchange Format - формат обміну графічними даними) був розроблений для передачі графічних файлів між комп'ютерами за допомогою модему. До недавнього часу був найпоширенішим в мережі. Цей формат використовує стиснення по методу LZW (запатентований алгоритм стиснення корпорацією Unisis). GIF обмежений 256 кольорами, має глибину кольору 8 біт, як нескладно здогадатися, кожен піксель використовує один байт. Підтримує прозорість.
Формат GIF добре підходить для стискання спочатку векторних зображень, якщо в них не присутні градієнтні заливки або інші тонові переходи. Це, як правило, зображення з суцільними тонами або повторюваними квітами.
Розглянемо вікно системи. Воно якнайкраще підходить під оптимізацію в форматі GIF. так як має обмежено кількість квітів.
При збереженні в форматі GIF в програмі GIMP відкриється вікно із запитом про параметри збереження в кольоровому режимі або відтінках сірого. Якщо експортувати зображення в індексовані, то в автоматичному режимі кольоровість буде урізана до 256 кольорів.
Оптимізація файлів в GIMP шляхом індексації в ручному режимі
Меню Зображення ⟶ Режим ⟶ Індексовані.
Вікно Перетворити зображення в індексовані містить два розділи:
- Колірна карта. Пункт Створити оптимальну палітру визначає максимальну кількість кольорів зображення. У нашому випадку близько 16-ти. Це найзручніший спосіб зменшити кількість квітів. Пункт Використовувати оптимізовану для WWW палітру на увазі кольоровість 256. Пункт Використовувати чорно-білу (1-біт) палітру говорить сам за себе, буде використано 2 кольори - чорний і білий. І, нарешті, в пункті Використовувати свою палітру можна вибрати вже готові палітри, відредаговані або створити свої. При виборі останніх трьох методів активізується пункт Видалити невикористані кольору з колірної карти. краще залишити його включеним, так як в цьому випадку оптимізоване зображення вийти з меншим розміром.
- Розмивання кольору. Використовуються алгоритми стиснення шляхом змішування близько стоять квітів. Для векторних файлів не підходять. В інших випадках будуть корисні. ПунктВключіть розмивання прозорості рекомендується при наявності в зображенні прозорих областей. Краї зображення не буде різким і ребристим.
При збереженні індексованого файлу в GIF. програма GIMP не видасть запиту про перетворення. Зображення в цьому випадку виходить набагато меншого розміру.
Оптимізація в форматі PNG (розширення .png)
Формат PNG (Portable Network Graphics - Портативна мережева графіка) спроектований як конкуренції і в кінцевому рахунку заміни формату GIF. Підтримує як 24-бітові, так і 48-бітові зображення. Для представлення зображень можна використовувати 256 квітів.
Оптимізація в форматі JPEG (розширення .jpg)
Формат JPEG (Joint Photographic Expert Group - Об'єднана група експертів з машинної обробці) заснований на методі з втратою якості (lossy). Технологія стиснення побудована за принципом усереднення пікселів групи. Для представлення інформації цей формат може використовувати мільйони квітів. Найбільш ефективний для фотографій та інших тонових (continuous-tone) зображень, в яких кольори сусідніх пікселів незначно відрізняються один від одного.
Спочатку зображення «важило» 75,4 Кбайт, після оптимізації 10,6 Кбайт.