Зображення для Інтернету, який формат вибрати Genious Interactive
Автор
Категорії
Резюме
Ніщо інше, як додавання візуальних матеріалів на ваш веб-сайт залучити більше користувачів Інтернету і зробити його зміст більш привабливим. Однак зображення можуть зважувати сторінки і стати джерелом повільності. Щоб зменшити їх вагу, насамперед потрібно вибрати правильний формат. Genious Interactive розповідає вам все про різне веб-формати зображень.
JPEG, GIF та PNG: 3 розпізнані формати
В Інтернеті є 3 формати зображень, які всі браузери розпізнають і відображають правильно: GIF, JPEG (або JPG) та PNG.
Формат GIF
GIF (Graphics Interchange Format) був розроблений в 1987 році американською компанією CompuServe. Його мета: швидка передача зображень за допомогою низькошвидкісного доступу до Інтернету.
Переваги GIF:
• Стиснення без втрат
• Керує прозорістю
• Може бути анімованим
Недоліки GIF:
• Відображає лише 256 кольорів (макс.)
• Не відновлює нюанси (світло, тіні, градієнти)
Коли використовувати GIF ?
GIF в основному використовується для кнопок, логотипів, піктограм та анімації. Зверніть увагу, що цей формат досі застарів для багатьох програм, оскільки ми віддаємо перевагу використанню CSS для кнопок, наприклад, або інших форматів зображень, таких як SVG для логотипів.
Формат JPEG
Прийнятий у 1990-х роках формат Об’єднаної фотографічної експертної групи (JPEG) отримав свою назву від комітету професійних фотографів, який його створив. В даний час кожен виробник камер має різне співвідношення сторін, і перетворення з одного на інший є обмежувальним. JPEG вважали універсальним вихідним форматом.
Переваги JPEG:
• Стандартне формування цифрових фотографій
• Відображає 16,7 мільйона кольорів
• Відновлює складні зображення (відтінки, градієнти)
• Можливе поступове завантаження зображень
Недоліки JPEG:
• Стиснення з втратою якості, але регульоване
• Не керує прозорістю
• Неможливо анімувати
Коли використовувати JPEG ?
JPEG в основному використовується для цифрових фотографій та складних зображень (відтінки, градієнти). Добре стиснуте та оптимізоване зображення зображення статті буде важити лише кілька десятків КБ (кілобайт).
Формат PNG
Формат PNG (портативна мережева графіка) був створений в 1995 році, щоб забезпечити безкоштовну альтернативу GIF. Він поставляється в декількох версіях, найбільш використовуваними є:
• 8 PNG (біт) схожий на GIF (256 кольорів, управління прозорістю), але світліший,
• PNG 24 (біти), схожий на JPEG (16,7 мільйона кольорів), але зі стисненням без втрат та більшим розміром файлу.
Переваги PNG:
• Стиснення без втрат
• Легше, ніж GIF (PNG 8)
• Обробляє прозорість краще, ніж GIF (PNG 8)
• Відображає до 16,7 млн кольорів (PNG 24)
Недоліки PNG:
• Неможливо анімувати
• Відображає лише 256 кольорів (PNG 8)
• Файл важчий за JPEG (PNG 24)
Коли використовувати PNG ?
Формат PNG в основному рекомендується використовувати для логотипів із прозорістю (PNG 8) та складних зображень, якщо розмір зображення не є проблемою (PNG 24). Загалом, якщо ваше зображення не потребує прозорості, завжди волійте використовувати формат JPEG, який буде світлішим.
SVG, векторний формат у прогресії
SVG - це формат векторного зображення, заснований на мові XML. Він був створений в 1998 році робочою групою, що складається з IBM, Apple, Microsoft та Xerox. Він пропонує невеликий розмір файлу, оскільки він зберігає лише інформацію, що описує фігури, а не кожен піксель, як для растрового зображення. SVG обробляється великою частиною браузерів.
Переваги SVG:
• Розтягується без втрати якості
• Легко модифікується (наприклад, змініть колір)
• Зменшений розмір файлу
• Можна стилізувати за допомогою CSS
• Можна анімувати за допомогою JavaScript (альтернатива Flash)
Недоліки SVG:
• Підтримує лише прості фігури (не фотографії)
• Знижує код, коли він безпосередньо інтегрується в HTML
• Потрібен спеціальний графічний редактор (Inkscape, Illustrator)
• Може представляти ризики для безпеки (пов’язані з XML, який він містить)
Коли використовувати SVG ?
SVG найкраще підходить для простих зображень, таких як піктограми, графіка та логотипи.
Формати зображень гігантів
Google і Apple також спробували свої сили у створенні форматів зображень.
WebP та Pik від Google
Формат Webp (веб-зображення) був представлений компанією Google у 2010 році, щоб запропонувати альтернативу «застарілим» форматам зображень (JPEG, GIF). Це може зменшити вагу зображень на 39%, щоб забезпечити суттєво покращену швидкість завантаження та кращий досвід користування. На сьогодні Webp все ще не став веб-стандартом і офіційно визнаний лише Google Chrome та Opera.
Переваги Webp:
• Легший формат
• Краща якість, ніж JPEG
• Покращено завантаження сторінки
Недоліки Webp:
• Відсутність сумісності
• Множення зображень на сервері
A новий формат стисненого зображення для Інтернету під назвою Pik буде працювати в Google, завжди з метою покращення комфорту перегляду. Ми поки не знаємо, що відрізнятиме його від формату Webp.
HEIF від Apple
Apple скористалася випуском мобільної операційної служби iOS 11, щоб замінити JPEG на новий формат зображення: HEIF (Високоефективний формат зображення). Його мета: заощадити місце для зберігання на iPhone.
HEIF може зменшити вагу зображень на 50%, а також може містити текст, аудіофайли та забезпечувати прозорість. Він присутній у всіх iOS 11 і може використовуватися на всіх пристроях завдяки режиму сумісності.
Переваги HEIF:
• Може містити текстові та аудіофайли
• Керує прозорістю
Недоліки HEIF:
• Власна версія лише на iOS 11
• Не сумісний у деяких системах (наприклад, телевізорах)
• Отже, за умови сплати роялті не підтримується вільним програмним забезпеченням
Формат - лише один із критеріїв оптимізації зображень для Інтернету. Щоб отримати додаткові поради, прочитайте нашу статтю "Швидкість завантаження: чому і як її покращити?"