L; мистецтво d; оптимізувати зображення для вибору формату, стиснення та найкращих практик в Інтернеті

Зображення - це елементи, які найбільше важать на веб-сторінках. Однак зображення необхідні для демонстрації ваших статей або продуктів (якщо ви є електронним продавцем). Якщо ви хочете покращити продуктивність та швидкість завантаження веб-сайту, у вас повинен бути пріоритет: зменшити вагу ваших зображень та кількість пов’язаних із ними запитів HTTP. Сюди входять як зображення, інтегровані у ваш вміст, так і зображення, які є частиною дизайну вашого веб-сайту (логотип, піктограми тощо).

мистецтво

Ця стаття присвячена оптимізації зображень для Інтернету. Ми розділили його на кілька частин. Спочатку ми повернемось до трьох основних форматів зображень в Інтернеті: JPEG, GIF та PNG. Які характеристики кожного з цих форматів? Коли віддавати перевагу одному над іншим? Які обмеження пов’язані з кожним форматом? Ми відповідаємо на всі ці запитання.

Потім ми даємо три поради щодо збереження ваших зображень в Інтернеті та зменшення їх ваги та оптимізації роботи вашого веб-сайту (з точки зору швидкості завантаження). Нарешті, ми коротко обговоримо деякі методи зменшення кількості HTTP-запитів, пов’язаних із зображеннями при завантаженні ваших веб-сторінок (спрайти, CSS3, URI даних).

Готовий оптимізувати ваші зображення для Інтернету ?

Ви шукаєте нові банки зображень, щоб покращити візуальний дизайн вашого веб-сайту? Запрошуємо ознайомитись із нашими 10 найкращими банками зображень та фотосайтами.

Виберіть правильний формат для ваших зображень: JPEG, GIF чи PNG ?

В Інтернеті є три основні формати зображень: формат JPEG, формат GIF та формат PNG. Це єдині три формати, які відображаються правильно у всіх браузерах. Ми представимо вам основні сильні та слабкі сторони кожного з цих форматів, контекст їх використання, поради щодо їх правильного використання та способи оптимізації ваших зображень у цих різних форматах.

Формат JPEG (висока якість, низька стисливість)

Формат JPEG був створений у 1986 році, що робить його найстарішим форматом. Цей формат ідеально підходить для фотографій (саме такий формат використовується більшістю цифрових фотокамер) і, загальніше, для зображень, що використовують дуже широкий спектр кольорів та контрастів (керовано понад 16 мільйонів кольорів). З іншого боку, стиснення JPEG призводить до втрати інформації (на відміну від формату PNG). Коли зображення JPEG низької якості, оскільки воно занадто стиснене, воно відображається (нерівне та розмите зображення). Формат JPEG досить швидко втрачає свою якість при стисненні. Більше того, алгоритм, що використовується для визначення інформації, яку слід видалити у разі стиснення, є не дуже ефективним. Пригнічену інформацію часто вибирають у зонах із низьким контрастом зображення. Якщо ваше зображення містить великі різниці контрастності між пікселями, візуалізація буде поганою: деякі області залишаться цілими при стисненні, а інші спричинять дуже помітну втрату інформації. Які раптом створюють контраст і небажані ефекти. Чим більше чітких кольорів та кольорів містять ваші зображення, тим менше стискається вага JPEG.

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

Оптимізація зображень вашого веб-сайту - одна з основних методик зменшення часу завантаження сторінок вашого веб-сайту. Щоб пройти далі, і якщо ваш сайт перебуває під WordPress, відкрийте 9 методів для покращення швидкості завантаження вашого сайту WordPress.

Ми рекомендуємо використовувати функцію Photoshop "Зберегти для Інтернету", щоб перевірити різницю в якості зображень JPEG залежно від вибраного розміру та рівня стиснення. Дійсно, коли ви зберігаєте зображення у Photoshop, у вас є вибір між "Зберегти як" та "Зберегти в Інтернеті". Якщо натиснути "Зберегти для Інтернету", Photoshop надасть вам функції для оптимізації вашого зображення та налаштування якості. Функція попереднього перегляду дозволяє негайно побачити результат ваших оптимізацій. Метою функції "Зберегти для Інтернету" є досягнення успіху в поєднанні хорошої якості та зниженої ваги.

Ви також повинні знати, що більшість JPEG в Інтернеті є прогресивними JPEG. Це означає, що зображення починає відображатися на сторінці з низькою якістю до того, як воно з’являється у своєму нормальному стані. Це дозволяє швидше завантажувати сторінку. Усі браузери підтримують прогресивні JPEG, але деякі відображають зображення довго. Візуалізація прогресивного JPEG чи ні також залежить від пристроїв відтворення (та їх процесора). Наприклад, прогресивні JPEG (поки що) не працюють у Mobile Safari, браузері за замовчуванням, який використовується для iPhone та iPad. Незважаючи на ці кілька проблем з підтримкою, прогресивний JPEG все ще є хорошим способом оптимізувати взаємодію з користувачами та стиснути JPEG без втрати інформації.

Ви можете перетворити свої класичні JPEG на прогресивні JPEG безпосередньо за допомогою функції Photoshop "Зберегти для Інтернету". Ви також можете використовувати інструмент Imgopt (для встановлення) або веб-інструмент Imgonline.

GIF (анімовані зображення, низька якість)

Формат GIF дозволяє об'єднати кілька зображень в один файл. Формат GIF був створений у 1987 році, через рік після формату JPEG, щоб пришвидшити передачу зображень за дуже повільних з'єднань. Після того, як формат GIF вийшов з ужитку, у 2000-х повернувся в моду завдяки можливості створювати рухомі зображення. Формат GIF підтримує прозорість, але управляє лише 256 кольорами, що значно обмежує якість зображень. Однак, на відміну від формату JPEG, GIF не втрачає інформацію під час стиснення. За яких обставин слід вибрати формат GIF? Якщо для одного і того ж зображення розмір файлу у GIF менший, ніж у PNG-8. Або коли анімацію неможливо замінити на CSS3.

Коли ви створюєте GIF, у вашому розпорядженні є кілька варіантів поєднання якості зображень та ваги файлу
файл. Спочатку можна скористатися алгоритмом стирання, який додає більше кольорів та контрасту GIF. Алгоритм аналізує сусідні пікселі різних кольорів і вибирає новий колір, який він інтегрує між цими сусідніми пікселями. Ви можете налаштувати рівень затухання у Photoshop (Зберегти для Інтернету). Скринінг впливає на вагу GIF-файлів. У середньому GIF, що становить 5 кб при екранізації 0, подвоює його при екранізації 100. Тут знову ж таки, ви повинні поєднувати якість (зображення) та легкість (файлу). Крім того, якщо ви зменшите кількість кольорів GIF, ваш файл стане світлішим.

Ви також повинні знати, що GIF використовують алгоритм стиснення, який усуває горизонтальні надмірності, а не вертикальні надмірності. З тієї простої причини, що він читає пікселі горизонтально, рядок за рядком. Отже, файли GIF, які використовують вертикальний градієнт, набагато менш важкі, ніж ті, що використовують горизонтальний градієнт (приблизно в 4 рази легший). Ми рекомендуємо обертати ваш GIF, якщо це можливо, щоб покращити стиснення та зменшити розмір файлу.

Якщо зображення містить дуже мало кольорів і чітко визначені межі, формат PNG-8 є кращим перед форматом GIF. Це пов’язано з тим, що PNG використовують інший метод стиснення. Проведіть тести для арбітражу між двома форматами.

Нарешті, про GIF: якщо анімація надзвичайно елементарна, замініть GIF на CSS3 (див. Нижче). Анімація CSS3 менш важка, ніж анімація GIF, а отже, краща з точки зору продуктивності. Знову тестуйте обидва формати, щоб зробити найкращий вибір.

На закінчення, GIF-файли, хоча і менш популярні, ніж на початку 2000-х років, все ж є привабливим варіантом для невеликих зображень, які потребують лише дуже обмеженого спектру кольорів. В іншому випадку естетичний візуалізація буде поганою, і перш за все розмір файлу буде дуже великим. Якщо GIF-файли загалом легкі, це тому, що вони містять дуже мало інформації. Але насправді співвідношення вага/кількість інформації набагато менш цікаве, ніж співвідношення JPEG.

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

Ви хочете запропонувати свій веб-сайт кількома мовами, але у вас є багато запитань про те, як? Запрошуємо прочитати нашу статтю "Переклад веб-сайту: вартість, вибір постачальників та організація проекту" .

PNG (хороша якість, стиснення без втрат)

Формат PNG є найновішим. Він з’явився в середині 1990-х з метою усунення недоліків формату GIF та поєднання переваг GIF та JPEG. Формат PNG, на відміну від JPEG, дозволяє стискати зображення без втрати якості/інформації. У Photoshop ви можете створювати два типи зображень PNG: PNG-8 та PNG-24. Кожен із цих двох форматів має переваги та недоліки, які необхідно враховувати.

Формат PNG ідеально підходить, якщо ви хочете додати своїм зображенням прозорості. Прозорість відповідає непрозорості зображення і, зокрема, дозволяє чітко розрізнити фонові елементи ваших зображень. Прозорість важлива, коли, наприклад, ви вставляєте текст на свої зображення. Формат GIF також підтримує прозорість, але ціною збільшення файлу. На відміну від GIF, алгоритм формату PNG розпізнає горизонтальні шаблони на додаток до вертикальних - це призводить до вищої якості стиснення.

У чому різниця між PNG-8 і PNG-24? PNG-8 є найближчим до формату GIF. Як і він, він пропонує палітру з 256 кольорів. Тому його слід використовувати для зображень, що містять кілька кольорів. Для того самого зображення версія PNG-8 буде світлішою, ніж версія GIF. Якщо вам не потрібна анімація, вам слід віддати перевагу PNG-8 перед GIF. Формат PNG-8 ідеально підходить для зображень типу логотипу. Файли PNG-8 все ще дуже легкі. PNG-24 багато в чому схожий на формат JPEG. Як і він, він може підтримувати понад 16 мільйонів відтінків кольору. З суворо естетичної точки зору, візуалізація буде однаковою, незалежно від того, чи ви виберете JPEG або PNG (до стиснення). Однак, як ми вже говорили раніше, PNG не втрачає ніякої інформації при стисненні. Що означає дві речі: якість зображення після стиснення буде кращою у форматі PNG. З іншого боку, вага файлу буде важчим (у 5-10 разів важчим). Щоб зменшити вагу PNG-24, потрібно зменшити кількість кольорів і зменшити шум. Якщо вам не потрібна прозорість ваших зображень, має сенс вибрати JPEG, а не PNG-24.

Тепер ви знаєте більшість того, що вам потрібно знати про різницю між трьома форматами веб-зображень в Інтернеті: JEPG, GIF та PNG.

Ви хочете створити або вдосконалити логотип своєї компанії, не розбиваючи банк? Відкрийте для себе нашу статтю "Вартість створення логотипу - зосередьтеся на 4 варіантах" .

Створіть свій веб-сайт безкоштовно за допомогою Wix, однієї з довідкових CMS