На цій посаді Ми збираємося перерахувати типи зображень для веб-сайтів. Це проблема, на яку слід звернути увагу, оскільки вона впливає на час завантаження сторінок і дисковий простір на сервері. Це пролог до іншого, у якому ми згадаємо інструменти Linux для підготовки зображень.
Кілька днів тому я сказав вам, що на прохання старого друга я тимчасово відновив веб-розробку (діяльність, яку я покинув, оскільки терпіти не міг клієнтів), і я використовую це, щоб розповісти вам про різні рішення з відкритим кодом.
Типи зображень для сайтів
Сайт має два типи основного вмісту: текстовий і мультимедійний. Інформація про цей вміст передається мережею в бітовому форматі, і браузер реконструює її відокремлення слів від зображень, відео чи звуку.
У випадку із зображеннями, Використовуються різні формати, які містять інформацію про розташування пікселів, кольори, розміри та алгоритм стиснення.
Найбільш використовувані формати зображень на веб-сайтах:
- APNG: Він був розроблений компанією Mozilla для надання можливостей анімації у форматі PNG. Ідеально підходить для анімації, яка не синхронізована з іншими ресурсами, наприклад звуком. Він працює з набагато ширшою палітрою кольорів, ніж GIF.
- AVIF: Його не слід плутати з відеоформатом AVI. Його назва є абревіатурою формату зображення AV1, і він кодує потоки бітів AV1 у контейнер HEIF (високоефективний формат файлу зображення). Він має краще стиснення з втратами, ніж JPG і PNG, і краще стиснення без втрат, ніж WebP. Підтримує анімацію та прозорість. Як негативний момент слід зазначити, що для перегляду зображення потрібно повністю завантажити, хоча це компенсується меншим часом завантаження.
- BMP: Я згадав класичний формат зображення Windows, щоб сказати вам, що ви ніколи не повинні його використовувати. Хоча є деякі способи зменшити їх розмір, вони, як правило, досить важкі зображення.
- GIF: це формат, створений для стиснення 8-бітної графіки без втрат. Він ідеально підходить для простих анімацій і зображень на веб-сайтах, призначених для місць із повільним з’єднанням, оскільки дозволяє відображати повне зображення, але в нижчій якості, коли воно не закінчилося.
- JPEG: Це формат стиснення з втратами даних, який широко використовується для фотографій, хоча він не рекомендований для графіків чи діаграм.
- PNG: Також широко використовується, він пропонує стиснення без втрат, чудове керування прозорістю та ширшу палітру кольорів, ніж GIF.
- svg: Замість пікселів цей формат визначає зображення за допомогою ряду команд, які їх створюють. Він ідеально підходить для графіків і діаграм, які вимагають точного представлення.
- TIFF: Цей формат не є широко використовуваним, оскільки він створює дуже важкі зображення. Хоча це може бути корисно, якщо ви хочете вставити на сайт відскановані зображення. Ви можете зберігати кілька зображень в одному файлі.
- WebP: Цей формат для нерухомих зображень і анімації створює менші файли зі стисненням або без нього, ніж JPEG і PNF. Його також можна використовувати для створення анімацій. Хоча він підтримується всіма сучасними браузерами, старіші несумісні.
Яке зображення використовувати для кожного випадку
- Фотографія: ідеально використовувати JPEG або WebP. Якщо розмір критичний, краще використовувати другий, якщо ви хочете забезпечити сумісність зі старими браузерами, перший.
- Значки: найкращу сумісність і співвідношення розмірів пропонує PNG. Також можна використовувати WebP (зважаючи на те, що його підтримують лише сучасні браузери) АБО SVG, якщо ми хочемо використовувати векторне зображення, яке буде показано збільшеним на іншому місці сайту.
- Знімки екрана: беручи до уваги, що в цьому типі зображень нам потрібно, щоб текст було видно, найкраще використовувати зображення зі стисненням без втрат, наприклад PNG або WebP. Ви можете перевірити, як це виглядає, використовуючи JPEG.
- Діаграми та графіки: тут, без сумніву, найкращий варіант – SVG, хоча ми можемо розмістити зображення у форматі PNG як резервну копію.