Таких питань я отримую досить багато, багато хто з моїх учнів запитують чи можна їм використовувати нові формати SVG і WebP, і де краще застосувати ці зображення. Зрозуміло, можна використовувати і нові формати, тільки потрібно розуміти який формат і для чого підходить краще.
Чи не оптимізовані зображення є одним з чинників уповільнення сайту, на що вказують сервіси перевірки.
Тому ви будете завжди перед вибором, який формат вибрати для зображення. Від цього буде залежати його розмір і якість. А щоб використовувати зображення меншого розміру і без втрати якості, ви повинні знати деякі речі.
Які зображення для сайтів використовую сьогодні
Всі зображення для сайтів, поділяються:
- растрові (приклад - JPG, JPEG, GIF, PNG),
- векторні (приклад - SVG).
Тобто при збільшенні розміру картинки, йде втрата якості.
Векторні зображення складаються з ліній і точок маршрутів. Інформація про зображення зберігається в математичних інструкціях по відображенні, що дозволяє масштабувати такі зображення скільки завгодно без втрати якості.
Всі ці зображення можуть і використовуються на сучасних сайтах. Тільки потрібно розуміти, що перед завантаженням на сайт, зображення потрібно оптимізувати!
З опису цих форматів ви зрозумієте, де і який формат застосовувати найкраще на сайті.
JPEG або JPG - один з найбільш популярних форматів зображень для сайтів. Формат підтримує мільйони кольорів, що і дає йому лідируючу позицію в поданні фотографій і картинок на сайті.
Зображення в цьому форматі досить добре оптимізуються практично без втрати якості, що дозволяє отримати файл меншого розміру без візуальної втрати якості. Слід пам'ятати, що кожна наступна оптимізація знижує якість.
Файли цього формату підтримуються всім пристроями та браузерами, що ще раз підтверджує його популярність і дозволяє не турбуватися за проблеми з відображенням на сайтах.
Великим недоліком цього формату є відсутність прозорості. Тобто, комбінувати зображення в такому форматі не вийде. Для таких задач краще використовувати наступний формат.
Цей формат використовує алгоритм стиснення без втрати якості. За кількістю квітів і рівню прозорості доступний в двох видах 8 і 24-біт. Обидва підтримують прозорість.
8-бітний користується малою популярністю, а ось 24-бітний широко використовується для різних зображень на сайті. За рахунок прозорості дозволяє створювати комбіновані зображення. Часто використовується для створення анімованих кнопок, іконок, css-спрайтів. де є потреба у ефект прозорості.
Зображення в форматі PNG можна багато разів оптимізувати, редагувати - воно збереже первинну якість.
Формат також підтримується всіма браузерами і пристроями, що гарантує його відображення на будь-якому екрані.
За якістю зображення виглядають краще, ніж JPG, але вага файлу буде більше. Це потрібно враховувати при розміщенні файлів на сайті.
Це 8-бітний формат, що підтримує 256 квітів, прозорість і анімацію. За рахунок підтримки малого кількості квітів, вага файлу теж мінімальний.
Формат не підходить для фотографій і зображень з широким діапазоном кольорів.
Зате широко використовується при створенні GIF-анімацій. банерів, кнопок, іконок і так далі.
В сучасних сайтах цей формат використовується все рідше.
Далі поговоримо про відносно свіжих форматах SVG і WebP, які не так популярні, але набирають популярність і підтримку, і як не можна краще підходять під вимоги швидкості завантаження і адаптивності сайтів.
Це формат векторних файлів на основі XML. Формат став набирати популярність зовсім недавно, так як раніше він слабо підтримувався в браузерах. І через проблеми відображення ніхто не поспішав його використовувати.
На сьогоднішній день SVG підтримується всіма сучасними браузерами. Але, проблеми з відображенням все, таки зустрічаються.
Найбільш часто використовують цей формат для простих зображень, таких як логотипи, елементи дизайну і так далі. Непридатний для фотографій.
Формат SVG має малу вагу, відмінно масштабуються, забезпечуючи чіткість зображення на будь-якому дозволі екрану, підтримує анімацію, можна управляти через CSS і розміщувати в HTML, скорочуючи кількість запитів.
Формат забезпечує чудову стиснення і підтримує прозорість. Він поєднує в собі переваги JPG і PNG форматів без збільшення розміру файлу.
Але, незважаючи на переваги формату, він підтримується не всім браузерами, наприклад, IE, Edge, Firefox і Safari.
Існують способи обходу цих обмежень, але вони не дають використовувати формат повсюдно.
висновок
Друзі, сподіваюся, пояснив все зрозуміло, і ви тепер знаєте, який формат зображень краще використовувати на сайті, і чому я не наполягаю на використанні одного якогось формату, а рекомендую комплексний підхід.
Можливо, коли WebP отримає широку підтримку, ми все перейдемо на нього і замінимо jpg і png на своїх сайтах.
З повагою, Максим Зайцев.
Максим, зараз перевіряв ваш сайт і у вас також як і у мене з дати йде редирект на загальну сторінку з записами. Через це безліч сторінок з 301 перенаправленням. Скажіть ви плануєте жто виправляти або так залишите. Просто я поямал фільтр від гугла і підозри падають на цей фактор. Буду вдячний за відповідь
Привіт, Максим. Ні, я нічого з цим не планую робити. У моїй темі немає помилки з цього приводу. Дата веде на архів записів за цей день. Це не є множинним перенаправленням.
Привіт Максим. Вірно зазначив у своїй статті, що потрібно звертати увагу на швидкість завантаження зображень.
Думаю, потрібно дотримуватися класичних форматів, щоб була порядна швидкість завантаження сайту і відображення «Не кульгало».
Вань, привіт. Так, тут потрібно дотримуватися балансу, щоб і красиво виглядали зображення, і швидкість не кульгала.
Максим, встановив тему за вашим курсу: Lightning, однак на іншому комп'ютері некоректно відображається текст, як можна виправити і на якому з двох комп'ютерів установки правильні.
Максим, на додаток. у мене два сайти з темою. Lightning. так ось некоректне зображення тексту йде на іншому компі на обох сайтах з цією темою, а на компі, що створював ці сайти текст відображається нормально ....
Віталій, перевірте налаштування браузерів на цих двох ПК, за відображення сайтів відповідає саме браузер. Мабуть на одному з ПК у вас не встановлені шрифти або інші настройки браузера. Тут можна гадати скільки завгодно. Потрібно звірити налаштування.