Формати зображень для сайту.
Сьогодні ми з Вами поговоримо про різні формати зображень, що використовуються на web-сторінках. На перший погляд може здатися: “А що тут думати? Взяв будь-яке фото і розмістив на сайті…” . Так дійсно, взяв і розмістив, але це тільки на перший погляд. Від того, як і в якому форматі підготовлено зображення (фотографія, малюнок, креслення, анімована картинка і т. д.), багато що залежить. Наприклад: як довго вантажиться Ваша web-сторінка, якої якості буде цей малюнок (фото) і т. д.
Тому питання вибору формату зображення – досить серйозна, від нього залежить в першу чергу зовнішній вигляд Вашого сайту і, як наслідок, складається думка відвідувача про автора і власника ресурсу. Отже….
Найбільш широке поширення для веб-графіки отримали два формати — GIF і JPEG. Їх багатофункціональність, універсальність, невеликий обсяг вихідних файлів при достатньому для сайту якості, співслужили їм позитивну службу, фактично визначивши їх як стандарт web-зображень. Є ще формат PNG використовується також про створення сайтів і існує в двох іпостасях — PNG-8 і PNG-24. Проте популярність PNG сильно поступається визнанням форматів GIF і JPEG.
Додавання зображення відбувається в два етапи: спочатку готується графічний файл бажаного розміру, потім він додається на сторінку через тег . Сам HTML призначений тільки для того, щоб відобразити необхідну картинку, при цьому ніяк її не змінюючи. Про підготовці зображень для web-сторінок ми з Вами розмовляли в статті: “Підготовка зображення для вашого сайту.” Тому тут будемо розглядати тільки формати зображень.
Формат GIF
GIF (Graphics Interchange Format) — формат графічних файлів, широко застосовуваний при створенні сайтів. GIF використовує 8-бітовий колір і ефективно стискає суцільні кольорові області, при цьому зберігаючи деталі зображення.
Особливості:
Кількість кольорів у зображенні може бути від 2 до 256, але це можуть бути будь-які кольори з 24-бітної палітри.
Файл у форматі GIF може містити прозорі ділянки. Якщо використовується відмінний від білого кольору фон, він буде проглядатися крізь «дірки» в зображенні.
Підтримує покадрову зміну зображень, що робить формат популярним для створення банерів і простий анімації.
Використовує вільний від втрат метод стиснення
Область застосування: Логотипи, ілюстрації з чіткими краями, анімовані малюнки, зображення з прозорими ділянками, банери.
Формат JPEG
JPEG (Joint Photographic Experts Group) — популярний формат графічних файлів, широко применямый при створенні сайтів і зберігання зображень. JPEG підтримує 24-бітовий колір і зберігає яскравість і відтінки кольорів у фотографіях незмінними. Даний формат називають стиснення з втратами, оскільки алгоритм JPEG вибірково відкидає дані. Метод стиснення може внести спотворення в малюнок, особливо що містить текст, дрібні деталі або чіткі краї. Формат JPEG не підтримує прозорість. Коли ви зберігаєте фотографію в цьому форматі, прозорі пікселі заповнюються певним кольором.
Особливості:
Кількість кольорів у зображенні — близько 16 мільйонів, що цілком достатньо для збереження фотографічної якості зображення.
Основна характеристика формату — якість, що дозволяє управляти кінцевим розміром файлу.
Підтримує технологію, так званий прогресивний JPEG, у якому версія зображення з низьким дозволом з’являється у вікні перегляду повного завантаження самого зображення.
Область застосування: Використовується переважно для фотографій. Не дуже підходить для зображень, що містять прозорі ділянки, дрібні деталі або текст.
Формат PNG-8
PNG-8 (Portable Network Graphics) — формат по своїй дії аналогічний GIF. За запевненням розробників використовує покращений формат стиснення даних, але як показує практика, це не завжди так.
Особливості:
Використовує 8-бітову палітру (256 кольорів у зображенні, за що і отримав в своїй назві цифру вісім. При цьому можна вибирати, скільки квітів зберігатиметься у файлі — від 2 до 256.
На відміну від GIF не відображає анімацію ні в якому вигляді.
Область застосування: Текст, логотипи, ілюстрації з чіткими краями, зображення з градієнтним прозорістю.
Формат PNG-24
PNG-24 — формат, аналогічний PNG-8, але використовує 24-бітову палітру кольору Подібно формату JPEG, зберігає яскравість і відтінки кольорів у фотографіях. Подібно формату GIF і PNG-8, зберігає деталі зображення, як, наприклад, в лінійних малюнках, логотипах, або ілюстраціях
Особливості:
Використовує приблизно 16,7 млн. кольорів у файлі, з-за чого цей формат застосовується для повнокольорових зображень.
Підтримує багаторівневу прозорість, це дозволяє створювати плавний перехід від прозорої області зображення до кольорового, так званий градієнт.
З-за того, що використовується алгоритм стиснення зберігає всі кольори і пікселі на зображенні незмінними, якщо порівнювати з іншими форматами, то у PNG-24 кінцевий обсяг графічного файлу виходить найбільшим.
Область застосування: Фотографії, малюнки, що містять прозорі ділянки, малюнки з великою кількістю квітів і чіткими краями зображень
Дотримуючись рекомендацій цій статті, Ви зможете без праці домогтися найкращої якості відображення графічних файлів на web-сторінках.
Автор: Андрій Краснокутський