Зображення є основною частиною будь-якого веб-сайту. Але під час роботи з ними необхідно враховувати необхідний баланс між їх якістю та розміром завантаження. Веб-сайт із високоякісними зображеннями буде споживати велику пропускну здатність і повільно відображатись у браузерах, що може покарати поведінку: користувачі покинуть веб-сайт, якщо відображення займе занадто багато часу.
Формати зображень, що використовуються в Інтернеті
Тому необхідно знати різні формати зображень, які можна використовувати на веб-сайті, і знати, коли обирати той чи інший. На даний момент найчастіше використовуються три формати: JPG або JPEG, GIF Y PNG. Всі три є форматами растрове зображення, тобто вони представляють зображення, кодуючи значення кольору та прозорості кожного пікселя на відміну від векторних форматів (таких як SVG), які зберігають лінії, точки та багатокутники для створення зображення.
Великою перевагою форматів растрових зображень є те, що вони забезпечують велике стиснення інформації, що призводить до легких файлів. Однак, коли ви збільшуєте їх, зображення може спотворюватися або розмиватися, відображаючи пікселі. Тому знання, як оптимізувати зображення, щоб вони виглядали якісними та мали малі байти, є завданням, яке вимагає уваги та знань.
Растрове зображення - це не що інше, як сітка з двома піксельними розмірами (висота і ширина). Наприклад, зображення розміром 200 х 200 пікселів має в цілому 40 000 пікселів, кожен з яких матиме значення RGBA (червоний, зелений, синій, альфа-канал або прозорість), і ця інформація займе загалом 4 байти (32 біт) для кожного пікселя. Отже, зображення розміром 200 х 200 без будь-якої оптимізації чи стиснення матиме розмір 160 000 байт = 156 Кбайт. Ви легко можете помітити, що на маленькому зображенні цей розмір занадто великий для веб-стандартів. Ось чому використовуються формати зображень, які стискають інформацію.
Далі будуть описані три формати зображень, а потім дано ряд вказівок щодо того, коли використовувати кожен із них. Нарешті, ми побачимо, як ми можемо оптимізувати зображення за допомогою програм для редагування зображень, таких як Adobe Photoshop або GIMP.
JPG або JPEG (Об’єднана група експертів із фотографії)
Зображення зазвичай мають розширення .jpg або .jpeg і це найбільш вживаний формат сьогодні. Це алгоритм стиснення з втратами або з втратами (який не дозволяє реконструювати оригінал із стисненого файлу), який базується на тому, що людське око фіксує зміни яскравості краще, ніж зміни кольору, і що воно краще сприймає ці зміни в області однорідного кольору, ніж на краях об'єктів на зображенні. Математичний алгоритм, на якому він базується, видаляє всю інформацію, яка не є важливою для людського ока.
JPG В принципі, він виділяє 24 біти для кожного пікселя для зберігання своєї інформації, з якою він може працювати з більш ніж 16 мільйонами різних кольорів. Але застосовуючи розуміння, ми можемо вибрати ряд параметрів для управління перетвореннями, таких як ступінь стиснення, вказується у відсотках. Як правило, вважається, що 80% - це високоякісне зображення, 50% середньої якості та 10% низької якості. В Інтернеті зазвичай працюють із значеннями від 70 до 80%.
Крім того, JPG дозволяє зберігати зображення в прогресивний режим, іншими словами, зображення завантажується у декілька фаз, що представляє інтерес при роботі з повільними з'єднаннями, хоча і створює дещо більші файли. Це також можливо пом'якшити зображення щоб уникнути надто нерівних країв, хоча це зазвичай спричиняє розмиття всього зображення.
Формат JPG Рекомендується для роботи із зображеннями з тисячами або мільйонами кольорів: фотографіями, зображеннями з градієнтами. Але він не підходить для зображень із текстом, простими фігурами або містять великі одноколірні блоки, оскільки створює заповнені шумом краї. Також зображення JPEG не може підтримувати прозорість.
GIF (графічний формат обміну)
Це був перший формат зображень, який використовувався в Інтернеті, оскільки він був створений, думаючи саме про метод стиснення зображень, які будуть передані в комп'ютерні мережі. Зображення мають розширення .gif.
На відміну від JPEG, GIF є формат стиснення без втрат, тобто дозволяє реконструювати оригінал, оскільки зберігає інформацію про колір та прозорість кожного пікселя і не спотворює зображення. Однак він працює лише з 8 бітами для кожного пікселя, що дозволяє мати лише 256 різних кольорів. Зіткнувшись із цим обмеженням кольорів, GIF використовує низку методів затухання, щоб імітувати кольори, яких немає в обмеженій палітрі кольорів, доступною у GIF.
Але GIF має функцію, яка робить його унікальним серед цих трьох форматів зображень: дозволяє анімувати. GIF може мати кілька зображень або кадрів, які малюються в різні періоди часу, імітуючи відео. З цієї причини його використання в даний час зростає в Інтернеті. Також можливо виконати зображення з прозорим фоном хоча в дещо обмеженій реалізації, оскільки він може мати лише два значення: всі пікселі прозорі або непрозорі, ви не можете вказати значення прозорості для кожного з них.
Під час створення GIF за допомогою редактора зображень можна також вибрати дві додаткові функції. Хоча було сказано, що за замовчуванням GIF використовує 256 кольорів, можна варіювати цю колірну палітру і визначте, що він використовує лише 32, 16 або 8 кольорів, досягаючи ще менших розмірів зображення. Ви також можете створити файл Переплетений GIF що дозволяє повільним пристроям завантажувати зображення, яке поступово створюється на екрані, не чекаючи почеркового малювання.
GIF ідеально підходить для створення зображень з обмеженими кольорами, таких як піктограми, кнопки, тексти на зображеннях і, перш за все, для створення простих графічних анімацій.
PNG (портативна мережева графіка)
Формат PNG з’явився в 1996 році як альтернатива GIF, коли цей формат не був вільно ліцензований. Ваші зображення мають розширення .PNG і дозволяє зберігати інформацію з більшою глибиною контрасту та вищою якістю.
Використовує алгоритм стиснення без втрат який був спеціально розроблений для використання на веб-сторінках і тому має ряд цікавих функцій у цьому контексті: він включає широкий діапазон глибин кольорів, має витончену систему прозорості, оптимальне чергування та автоматичні корекції відповідно до гамми монітора і навіть може зберігати невеликі текстові описи про зображення, яке можна сканувати веб-пошуковими системами.
PNG підтримує різну глибину кольору o канали: відтінки сірого (1 канал), відтінки сірого з прозорістю (2 канали), червоні, зелені та сині канали (RGB) або справжній колір (3 канали) та справжній колір із прозорістю (4 канали). Залежно від того, скільки каналів використовується, може бути використана кількість кольорів або ступенів прозорості. PNG-8 o Індексований PNG використовує лише 256 кольорів. PNG-24 використовує таку ж кількість кольорів, як JPEG.
Стиснення, яке використовує PNG, дозволяє використовувати палітру з мільйонами кольорів, зберігаючи високий ступінь роздільної здатності, тому зображення якісні, хоча мають більші розміри файлів, ніж ті, що створюються JPG.
З іншого боку, PNG є найбільш підходящий формат, коли потрібні якісні прозорі зображення в якому ви можете вирішити, які пікселі прозорі і до якої міри. Він також широко використовується на знімках екрана і краще представляє текстові зображення, ніж JPG. І, звичайно, це найкращий формат для логотипів або фонів сторінок завдяки його здатності керувати прозорістю.
Який формат вибрати в кожному випадку?
Коли вам потрібно створити зображення для Інтернету, рекомендується виконати наступний процес як запитання:
1. Чи потрібна анімація?
Якщо так, то формат, який слід вибрати, без обговорення - це єдиний GIF (хоча є деякі реалізації PNG, які також роблять це, наприклад APNG або MNG, але веб-браузери не настільки широко їх підтримують) . Але майте на увазі обмеження кольорів (лише 256) та прозорість (ціле зображення є чи ні). Розмір, у будь-якому випадку, завжди невеликий.
2. Чи потрібно зберігати деталі зображення точно та з найкращою роздільною здатністю?
Якщо відповідь позитивна, слід вибрати формат PNG, оскільки його алгоритм стиснення не втрачає втрат. Наступним рішенням у цьому випадку буде вибір найбільш підходящої палітри кольорів, оскільки це буде залежати від того, більший чи менший розмір файлу. Якщо потрібно менше 256 кольорів, потрібно буде вибрати PNG-8. Якщо це для фотографії, буде використано PNG-24, знаючи, що PNG-файли завжди будуть, за інших рівних умов, більші за JPG.
3. У будь-якому іншому випадку найбільш підходящим вибором є формат JPEG, хоча різні варіанти стиснення потрібно експериментувати, щоб досягти адекватного розміру без помітної втрати якості.
Розмір зображень
Формати зображень допомагають оптимізувати зображення, намагаючись мінімізувати інформацію про колір, що зберігається його пікселями: чим менше бітів потрібно, тим світліше буде зображення.
Але інший спосіб зменшити вагу зображення в кілобайтах - це контролювати його розмір. Завжди потрібно переконатися, що зображення, завантажене в Інтернет, не перевищує місця, призначеного для вашого зору. Зміна розміру зображення зменшує кількість пікселів на фотографії, а також зменшує кількість байтів, необхідних для її малювання у браузері. Для ілюстрації, якщо у вас є зображення розміром 250x250 пікселів, а простір, призначений для його відображення, становить лише 200x200, остаточна економія становить 2500 пікселів, тобто на 10 КБ менше ваги на нестиснутому зображенні.
Зміна розміру зображення - це не те саме, що модифікація або масштабування зображення в Інтернеті за допомогою HTML-коду. Таким чином він виглядає належним чином в Інтернеті, але зображення більше, ніж потрібно.
Тому завданням ще до оптимізації зображення є зменшення його до відповідної ширини та висоти для веб-сторінки, де воно буде розміщено.
Оптимізація за допомогою Photoshop та GIMP
Редакторам зображень подобається Photoshop або альтернатива у вільному програмному забезпеченні GIMP дозволяють контролювати всі аспекти оптимізації зображення.
Обидва вони можуть змінювати розмір зображення, а також гарантувати, що зображення не спотворюється в цій дії, блокуючи співвідношення сторін між висотою та шириною. GIMP в меню Image> Scale Image; у Photoshop під Зображення> Розмір зображення.
Коли зображення створюється в будь-якому з цих двох інструментів, воно працює з власними форматами так само, як можна додавати шари, ефекти тощо. Є PSD у Photoshop та XCF в GIMP. Але такі типи зображень не можна використовувати в Інтернеті, і їх потрібно перетворити в один із форматів, які раніше пояснювались: JPG, GIF або PNG.
Саме в цей момент необхідно прийняти рішення про те, який формат використовувати та які параметри перетворення хочуть контролювати або експериментувати. Якщо ви використовуєте GIMP, Ви повинні перейти до меню Файл> Експортувати як і вибрати будь-який із трьох форматів. В Adobe Photoshop Це знаходиться в меню Файл> Зберегти як. Залежно від обраного формату з'являться такі параметри:
- GIF, якщо ви хочете переплетений GIF або, якщо PSD або XCF мають кілька шарів, якщо ви хочете створити анімований GIF із зазначенням затримки в мілісекундах.
- JPG. Перше, що потрібно вибрати якість стиснення. Крім того, є кілька розширених опцій: якщо ви хочете створити прогресивне зображення, на скільки згладжуючи та навіть інші, змініть деякі параметри стиснення за допомогою підвибірок або різних варіантів математичного алгоритму.
- PNG. У цьому випадку ви можете визначити рівень стиснення, якщо ви зберігаєте інформацію про колір фону, гаму або якщо ви хочете створити чересстрочне зображення.