Як дізнатись який формат має ваше зображення?
Ця інформація зберігається в даних файлу та зачасту знаходиться у назві файлу. Наприклад файл з назвою my-pic.png має формат PNG, файл з назвою my-pic-2.svg має формат PNG.
Які формати зображень використовуються на сайтах?
На сайті найчастіше використовують такі формати зображень, як PNG, JPEG, WebP та SVG. Іноді зустрічається формат GIF. Але перед тим як розглянути кожний ми поділимо їх на види.
Перший вид - растрові зображення це зображення, які складається з "мозаїки", має осередки, які своєю чергою мають яскравість та колір. До растрових зображень відносяться PNG, JPEG формати.
Другий вид - векторні зображення, або зображення яке складається з опорних точок та ліній (векторів) які їх з'єднують. До векторних зображень відноситься SVG формат.
Ось наочний приклад растрових та векторних зображень:
Для того, щоб обрати оптимальний формат зображення нам потрібно звернути увагу на якість зображення, вагу та кількість кольорів.
Растрові зображення
Всі реалістичні зображення, які мають багато відтінків, кольорів, великі зображення будемо завантажувати саме в форматах PNG або JPEG. JPEG воліють для фотографій.
Приклад зображення, яке краще завантажити в PNG форматі (хоч воно може бути і векторним, але воно велике:
Приклад зображень, які краще завантажити в PNG або JPEG форматі:
Векторні зображення
Це невеликі графічні картинки та іконки, логотипи. Як було сказано вище вони складаються з векторів, тому не будуть втрачати якість при масштабуванні. До того їх можна редагувати за допомогою CSS, що дуже зручно для веброзробників.
Приклад зображень, які краще завантажити у SVG форматі:
Що трапиться, якщо завантажити щось в неправильному форматі?
Ось декілька важливих прикладів
1. Завантажити велике зображення, яке може бути векторним у svg. Дуже великі картинки у такій ситуації будуть дуже довго завантажуватись, поки будуть прибудовувати свої вектори і таким чином гальмувати сайт.
2. Завантажити маленьке зображення, яке може бути векторним у png форматі. Таке зображення може втратити якість, а також буде важити більше ніж у SVG форматі.
Прозорість зображень
Також важливим фактором у виборі формату для зображень є прозорість. Якщо фон або деякі елементи на зображені мають прозорість, то підійдуть тільки PNG або SVG формат. JPEG прозорість не підтримує.
WebP формат
Цей формат був створений спеціально для зображень, які будуть використовуватись в браузері. Якщо перевести JPEG або PNG картинку у цей формат вона зменшить свою вагу не втрачаючи при цьому якість.
