9.2 Рекомендації для вибору графічних форматів

1. Формат JPEG краще підходить для фотографічних зображень, а формат GIF - для зображень, які містять рівні кольори, такі, як ілюстрації і штрихова графіка.

Повнокольорові зображення, наприклад, фотографії, найкраще зберігати у форматі JPEG. Хоча цей формат і стискає зображення із втратою якості, він найкраще підходить для фотографій, оскільки підтримує 16 млн. кольорів у зображенні, а також зберігає в ньому незмінними яскравість і насиченість. Веб-майстер, залежно від потреби, може обрати ступінь стиснення, від якого залежать якість малюнка та його розмір. При цьому існує можливість автоматизувати процес оптимізації зображення. У Adobe Photoshop, починаючи з версії 7.0 можна вибрати з меню Файл пункт Сохранить для Web. За допомогою відповідних полів діалогового вікна можна вибрати розміри малюнка та підібрати достатню якість, що відіб’ється на кінцевому розмірі зображення.

Фотографія у форматі GIF буде мати гіршу якість, оскільки палітра, згідно стандарту, буде приведена до розміру в 256 кольорів, що неминуче призведе до втрати якості зображення. Крім того, алгоритм стиснення, який використовується у форматі GIF гірше працює з із малюнками, що містять велику кількістю кольорів - фотографіями.

2. Розміри зображень підбирайте за допомогою відповідних графічних редакторів. Хоча можливо змінити в редакторі видимий розмір зображень, фактичний розмір файлу при цьому не змінюється; наприклад, якщо ви вставили в веб-сторінку зображення 2х2 см із розміром файлу 10 Кб, а потім зменшили його в редакторі в два рази, то його файл при цьому все одно залишиться розміром у 10 Кб.

3. Якщо ви створюєте зображення, що містить тільки чорний і білий колір, то збережіть його як чорно-біле зображення . Це допоможе скоротити розмір його файлу. У Microsoft Image Composer ви можете зробити це, установивши при зберіганні колірний формат Black and White.

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

5. Перевірте, як виглядають ваші зображення при різній роздільній здатності і різній кількості кольорів екрана, а також при використанні різних браузерів.

6. Якщо ви працюєте з Adobe Photoshop і хочете зберегти зображення у форматі GIF, то змініть колірний режим RGB на Indexed Color (Індексовані кольори) і виберіть мережну палітру (опція Palette: Safety)без дифузії (опція Dither: none)

7. Якщо ви використовуєте Photoshop і зберігаєте зображення як GIF, і при цьому знаєте, що в зображенні менше 256 кольорів, то спробуйте використовувати точну палітру (Palette: Exact). Точні палітри містять рівно стільки кольорів, скільки є в зображенні, тим самим зменшуючи розмір файлу.

8. При розробці зображень для веб-сторінок намагайтеся, щоб підготовлені вами зображення не перевищували 15-20 Кб (для орієнтування - типовий розмір більшості оптимізованих картинок 300х200 px складає 5 - 10 Кб). Якщо необхідно вставити зображення великого розміру, то краще окремо підготувати його зменшену копію, а вже з неї зробити посилання на велике зображення. Якщо буде необхідно, читач самостійно перегляне велике зображення в окремому вікні браузера.

9. GIF на відміну від JPEG підтримує анімаційні зображення.

10. Власний фоpмат PSD пакета PhotoShop вимагає великих об'ємів пам'яті, тому якщо шари не мають значення, краще зберігати зображення у PNG.

11. Не зберігайте пpоміжні pезультати в JPG! Це призведе до втрати якості зображення. Зберігайте в JPG тільки кінцевий pезультат .

12. Один із прийомів поєднати невеликі розміри та якість зображення полягає в розрізані зображення на ділянки і зберіганні кожної ділянки в найбільш доцільному для неї форматі. Наприклад, якщо поверх фотографії наноситься текст, то для нього неприпустимо використання формату JPG, оскільки в цьому випадку буде мати місце ореол навколо букв. У цьому випадку фотографія розрізається на декілька фрагментів таким чином, щоб напис виявився в окремому фрагменті невеликого розміру. Цей фрагмент доцільно запам'ятати у форматі GIF.

Отримані фрагменти потім розміщають у таблицю з невказаними pозміpами, що гаpантує їхнє щільне стикування між собою.

13. Якщо Вам потрібний прозорий фон, прийдеться використовувати GIF або PNG. При цьому необхідно пам'ятати, що зберігання в режимі anti-alisieng контурів приводить до утворення помітної кольорової кайми, якщо колір, обраний «прозорим» сильно відрізняється від кольору фону розміщення картинки. «Сгладжування» робить картинку приємнішою для очей шляхом додавання на межах колірних переходів пікселів середнього кольору. Крім того, небезпечні режими «взаємопроникнення» (Diffusion) або «змішування» (Dithering) різних кольорів, які використовуються для зменшення палітри. Можливо одержати «дірчастий» рисунок, якщо деякі його точки виявляться прозорими.

14. Підсилити стиснення й зменшити втрати якості в JPG можна попереднім застосуванням фільтра «Blur» («розмиття») , наявного в більшості графічних редакторів.

15. Найбільш помітний виграш від зберігання (GIF або progressiv JPG) спостерігається при виведенні великої за площею картинки. На жаль, це негативно позначається на деяких браузерах (наприклад, Netscape Navigator може просто підвиснути ). Тому доцільно організувати попередній перегляд: спочатку завантажується картинка такого ж розміру, але з меншою розподільною здатністю або чорно-біла, а потім, поверх неї оригінал, збережений без чергування рядків (GIF) або з покроковим поліпшенням зображення (progressiv JPG). Цей спосіб здійснюється вказанням у тегі HTML <img src=«... »> параметра lowsrc=«... » із вказанням імені файлу гіршої якості.

16. Зображення з обмеженою кількістю кольорів, із чіткими краями, такі як текст, креслення тощо бажано зберігати саме у форматі GIF. При збереженні у форматі GIF текст залишиться чітким, а у форматі JPEG – текст “розмивається”, робиться менш чітким. Алгоритм стиснення JPEG працює таким чином, що частина даних у зображенні просто відкидається, особливо це стосується тонких деталей. Текст, особливо дрібний, а також лінії будуть спотворюватися в першу чергу. Чим більше ступінь стиснення зображення, тим гірше буде читатися текст. Звичайно можна збільшити якість зображення, але при цьому обов'язково зросте розмір файлу.

17. Формат PNG може бути створений із використанням режиму прозорості, однак не всі браузери підтримують режим прозорості для цього формату.

18. Формат GIF – не єдиний, за допомогою якого можна створити анімоване зображення. Однак, анімовані зображення у форматі GIF гарантовано відображаються в усіх сучасних браузерах, на відміну від інших форматів.

19. При виборі формату даних для оформлення свого веб-сайту, веб-майстер сам повинен обрати саме той формат, який найбільш якісно дозволить відобразити його творчий задум та підкреслити своїм оформленням текстовий контент. При цьому він не повинен забувати про якість каналів зв’язку між сервером, де розміщена веб-сторінка та клієнтом, який подав запит на отримання цієї інформації. А це значить, що графічні зображення повинні мати не тільки гарну якість, але й компактні розміри.

20. Формат JPEG не підтримує прозорість ні в якому вигляді. Її можна лише імітувати, задавши колір «прозорих» ділянок таким же, як фон веб-сторінки.

21. Формат PNG, як і формат GIF, найбільш ефективний для передачі мальованих зображень з однотонними областями, однак, поки що, не здатний повністю замінити формат GIF і використовується, в основному для подання графіків та діаграм

У таблиці 9.3 приведені різни типи графічних файлів для різних застосувань.

Таблиця. 9.3 - Застосування графічних файлів

Тип зображення	GIF	JPEG	PNG
1. Фотографії (великого розміру)	-	так	-
2. Фотографії (малого розміру)	так	так	-
3. Векторні зображення	так	-	так
4. Діаграми і графіки	так	-	так
5. Текст у вигляді зображення	так	-	так
6. Скриншоти системних вікон Windows	так	-	так