Які формати d; зображення, які можна вибрати для своїх проектів в Інтернеті

Оновлено: 22 березня 2020 р

У сьогоднішньому підручнику ми поговоримо про основні формати зображень та про те, коли їх використовувати, щоб отримати найкраще співвідношення якості/ваги.

Зміст статті

JPEG: найбільш часто використовуваний формат зображення

Різниця між JPEG та JPG

існує без різниці між зображеннями у форматі JPG та JPEG (вони використовують розширення .jpg і .jpeg відповідно). Це точно те саме.

Для запису Об’єднана група експертів з питань фотографії (JPEG) спочатку хотіла, щоб формат їх зображення був збережений із розширенням .jpeg. Однак старіші версії Windows приймали максимум 3 символи. Тому потрібно було змінити розширення зображень Росії .jpeg в .jpg так що ці версії Windows можуть підтримувати формат JPEG. Сьогодні стандартним є збереження фотографій цього типу з розширенням .jpg, навіть якщо назва формату залишилася JPEG.

Ви можете зберегти зображення JPEG, використовуючи розширення .jpg або .jpeg

Формат JPEG

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

Технічні міркування щодо зображень JPEG

Зображення JPEG:

може мати максимальний розмір 65 535 пікселів на 65 535 пікселів.
містять близько 16 мільйонів кольорів.
збережіть за допомогою розширень .jpg або .jpeg.

Стиснення JPEG

Ви можете стиснути свої JPEG, щоб зменшити їх розмір у байтах. Під час стиснення зображення ви вирішили втратити частину інформації (пікселів), вбудованої в оригінальне зображення. Тому під час процесу стиснення ви повинні вибрати якість кінцевого зображення.

100% - це високоякісне зображення, щоб ви не втратили багато інформації. У цьому випадку стиск низький.
0% - зображення низької якості, на якому ви втрачаєте багато інформації. Ми говоримо, що компресія висока.

На зображенні праворуч у деяких місцях видно пікселізацію. Це явище, яке виникає, коли стиск занадто високий.

Щоразу, коли ви експортуєте або зберігаєте зображення JPEG, воно втрачає певну інформацію. Тому чим більше ви експортуєте або зберігаєте JPEG, тим гіршою буде якість. Це трохи схоже на те, коли ви робите фотокопію фотокопії. З цього моменту фотокопію вже не можна прочитати.
JPEG не може представляти прозорі елементи. Ці елементи за замовчуванням будуть білими.

Переваги використання JPEG

Оскільки JPEG втрачають інформацію під час процесу стиснення, вони, як правило, (але не завжди) легші, ніж PNG. Тому вони швидше завантажуватимуться на веб-сторінку і займуть менше місця на вашому диску та на ваших серверах.
Оскільки JPEG може містити мільйони кольорів, це найкращий формат для фотографій або зображень зі складною кольоровою палітрою.

Коли використовувати формат JPEG ?

JPEG, як правило, рекомендується для запису фотографій, оскільки він може краще відображати багатство кольорів.

GIF: Формат графічного обміну

Цей формат зображення зберігається за допомогою розширення .gif. Довгий час це був найпопулярніший формат в Інтернеті, оскільки він відповідав продуктивності сучасних комп’ютерів. GIF-файли можуть представляти максимум 256 кольорів. Вони також підтримують прозорі елементи. Сьогодні ми в основному використовуємо формат GIF для створення анімованих зображень.

Переваги формату GIF

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

Коли використовувати GIF-файли ?

Для подання зображень за допомогою простої кольорової палітри (малюнки, маленькі піктограми, текст тощо)
Для зображень, які бачитимуть користувачі Інтернету з низькою швидкістю Інтернету.
GIF - єдиний формат, який дозволяє створювати рухомі зображення.

Приклад анімованого GIF

PNG: Портативна мережева графіка

Цей формат був створений для Інтернету для виправлення дефектів GIF. Він зберігається з розширенням .png і поєднує в собі переваги GIF та JPEG:

PNG підтримує прозорі елементи.
Це дозволяє стискати зображення, не втрачаючи їх якості.
Він представляє зображення зі складною кольоровою палітрою.

Два типи PNG: PNG-8 та PNG-24

PNG-8, найближчий до GIF

PNG-8 та GIF є взаємозамінними. Він може представляти до 256 кольорів. При однакових розмірах він буде легший, ніж його версія GIF. Тож PNG-8 завантажиться навіть швидше, ніж його версія GIF. Тому краще віддати перевагу PNG-8 перед GIF. З іншого боку, якщо ваше зображення анімоване, ви повинен збережіть його у форматі GIF. PNG-8 ідеально підходить для простих логотипів та піктограм, наприклад.

PNG-24, дуже схожий на JPEG

Як і JPEG, PNG-24 може представляти мільйони кольорів. Отже, немає різниці в якості зображення PNG-24 та зображення JPEG перед стисненням. Однак, оскільки PNG не втрачають інформацію, вони, як правило, важче JPEG після стиснення. Крім того, PNG будуть чіткішими, ніж JPEG, який був занадто стиснутий.

Важливі примітки

PNG не дозволяє створювати анімацію. Однак ви можете комбінувати кілька PNG, щоб зробити анімацію GIF.
PNG-24 зазвичай більші за JPEG. Щоб зменшити розмір PNG-24, потрібно:
- зменшити кількість кольорів
- виріжте (обріжте) зображення, щоб підкреслити важливі елементи,
- або змінити розміри зображення.
PNG-24 не такий популярний, як JPEG. Деякі програми та веб-сайти ще не підтримують це.

Коли використовувати PNG ?

PNG-24 - чудова альтернатива для фотографій, якщо ваші фотографії містять прозорі пікселі.

PNG з прозорим фоном Джерело: Вікіпедія

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

SVG: масштабована векторна графіка

На відміну від попередніх форматів, які є растровими зображеннями, SVG представляє векторні зображення.

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

SVG дуже схожий на вектори, які ми створюємо в Adobe Illustrator, тоді як PNG, JPEG та GIF - це растрові зображення, які ми використовуємо в Photoshop. Ви можете змінити SVG в Illustrator, а також у редакторі коду, наприклад, дужки або Atom.

SVG став дуже популярним серед веб-розробників, оскільки дозволяє відображати зображення правильно, незалежно від розміру екрана.

Переваги SVG

Немає пікселізації незалежно від розміру зображення або рівня масштабування.
SVG, як правило, легкі і тому швидко завантажуються.
Вони підтримують прозорі елементи.
Ви можете кодувати SVG безпосередньо в HTML5 і змінювати зображення за допомогою CSS.
Використання SVG безпосередньо в коді може мати позитивний вплив на швидкість завантаження веб-сторінок, оскільки зображення не завантажується з вашого сервера.

Приклад

Наступне зображення було векторизовано та збережено у форматі SVG. Зрештою, він на 6 Мб набагато важчий, ніж його матричні версії. Завантажуватиметься багато часу, коли його відкриватимуть із Інтернет-браузером, таким як Google Chrome.

Демонстрація складного SVG, який довго завантажується в Google Chrome

Коли використовувати SVG ?

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

Порівняння зображень різних форматів

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

Зображення JPEG - низька якість (0%)
Зображення JPEG - середньої якості. 50% стиснення
Зображення JPEG - висока якість - 100%
PNG-8 збережено лише у 16 кольорах.
PNG-8, збережений з максимум 256 кольорами.
Зображення збережено як PNG-24. Без обмеження кольорів.
Зображення GIF, збережене у 16 кольорах
Зображення GIF, збережене з максимальною кількістю кольорів (256)