zeromoment

швидкість завантаження веб-сайту є одним з найважливіших факторів оптимізації нашого веб-сайту. Від Google вони неодноразово відкрито показували, що вони приділяють дедалі більше уваги цьому фактору і що, отже, це один із багатьох факторів SEO On Page, які впливають на позиціонування наших веб-сайтів. У цьому сенсі оптимізація зображень має багато що сказати, оскільки ці елементи, разом із відео, є найважчими ресурсами і, отже, тими, що можуть найбільше вплинути на ефективність нашого онлайн-проекту.

  • 1 Оптимізація зображення: розміри
  • 2 Оптимізація зображення: вага
  • 3 Оптимізація зображень: формати
    • 3.1 PNG проти JPG: стиснення
      • 3.1.1 .JPG
      • 3.1.2 .PNG
    • 3.2 PNG проти JPG: прозорість
      • 3.2.1 .JPG
      • 3.2.2 .PNG
  • 4 Компресори зображень: оптимізація зображень для Інтернету
    • 4.1 TinyJPG + TinyPNG
    • 4.2 Кракен
    • 4.3 Компресор.io
  • 5 Список компресорів зображень
  • 6 Проблеми з оптимізацією зображень або швидкості завантаження?

Оптимізація зображення: розміри

Коли ми говоримо про оптимальну роздільну здатність зображення, важливо зазначити, що однією з основних проблем, яку ми зустрічаємо на багатьох веб-сайтах, є те, що зображення відображаються з меншим розміром, ніж «фактичні розміри»Самого зображення. Це означає, що, якщо, наприклад, ми показуємо зображення на екрані зі 100 * 100 пікселів, але зображення насправді становить 200 * 200 пікселів (і важить, який розмір займає), ми втратимо значну можливість зменшення ваги.

Давайте краще розглянемо графічний приклад:

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

Якщо ми копаємось у вихідному коді через інспектор елементів браузера, ми бачимо таке:

Зображення має 600 * 499 пікселів "фактичний розмір або розмір". Але чи потрібно мати такі розміри, щоб зайняти весь контейнер, в який він вставлений? Давайте розберемося ще трохи:

Червоним кольором ми бачимо, що зображення має реальний розмір, згаданий вище. Зеленим кольором ми позначили стиль CSS, пов’язаний із зображенням, де чітко видно, що розміри можуть змінюватися залежно від пристрою, з якого ми отримуємо доступ до цього веб-сайту.

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

У нас є останній пункт для перевірки.
Скільки місця займає «контейнер зображень«?

Користуючись інспектором елементів браузера ще раз, ми виявили наступне:

"Розмір контейнера" ​​менше, ніж "фактичний розмір зображення":

Контейнер = 467 * 388 пікселів
VS.
Фактичний вимір = 600 * 499 пікселів

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

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

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

Оптимізація зображення: вага

Що стосується ваги: ​​важливий вибір правильного формату зображень. У цьому сенсі Google рекомендує формати, які він називає "наступним поколінням" у самому інструменті. PageSpeed ​​Insights

Формати JPEG 2000, JPEG XR та WebP стискають зображення краще, ніж формати PNG або JPEG, завдяки чому вони швидше завантажуються та споживають менше даних.

Google PageSpeed ​​Insights

Як зазначає Google, ці формати пропонують чудове стиснення зображень, але ми повинні пам’ятати, що вони можуть бути не найкращим варіантом залежно від того, які браузери. Нижче ми залишаємо вам прямий доступ до таблиць сумісності кожної з них:

  • JPEG 2000
  • JPEG XR
  • WebP

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

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

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

Оптимізація зображень: формати

Одним з головних факторів, який слід враховувати, є формат. На сьогоднішній день формати .jpg та .png широко відомі, але як ми можемо розрізнити, який формат найбільш підходить для кожного зображення? Давайте побачимо порівняння цих двох форматів, настільки широко використовуваних на рівні стиснення та прозорості.

PNG проти JPG: стиснення

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

  • Формат JPG є хорошим варіантом для оптимізації наших веб-зображень, оскільки дозволяє стискати до 10 разів більше ваги зображення.
  • Формат JPG допомагає зберігати зображення з багатьма кольоровими відтінками при дуже світлому розмірі файлу, що робить його ідеальним для веб-сайтів з високим візуальним вмістом.
  • Знаючи, що це стислий формат, необхідно припустити більшу чи меншу втрату якості при перетворенні зображення у зазначений формат. Залежно від ступеня стиснення, який ми використовуємо, ми зазнаємо більших або менших втрат.
  • Звичайна рекомендація - не використовувати оптимізацію нижче 70% якості. Ми будемо прагнути отримати зображення вагою менше 150 КБ і достатньої якості для перегляду з будь-якого пристрою, з якого доступ до Інтернету.
  • У свою чергу, PNG - це формат зображення без втрат. Оскільки ми зберігаємо зображення знову і знову, воно зберігає кількість оригінальних кольорів, тому воно не втрачає якості, якщо не видалити кількість згаданих кольорових пікселів.
  • Це найбільш широко використовуваний формат нестиснутої кольорової інформації у веб-розробці. Це дуже корисно для рівних кольорових фонів, піктограм або графіки.
  • Зазвичай його не рекомендують для показу фотографій, оскільки його метод оптимізації без зменшення інформації про кольори змушує зображення важити більше в цьому форматі.

PNG проти JPG: прозорість

  • Формат JPG не підтримує прозорі плівки. Фон зображення у форматі .JPG завжди буде мати колір.
  • Формат PNG найкраще підходить для зображень із прозорістю. Він здатний містити 8 додаткових бітів інформації в кожному пікселі, що є оптимальним для створення графіки без певного кольорового фону.
  • Пам'ятайте, що прозорі зображення займають більше КБ, оскільки вони завжди будуть зображеннями з більшою вагою в бітах. Зі свого боку, формат JPG не підтримує прозорість.
  • Це оптимальний формат для зображень, що містять текстові символи. Його метод стиснення без втрат змушує його поважати краї шрифтів, не змішуючи кольори з сусідніми пікселями. Крім того, у цьому форматі зображення з текстом важать набагато менше, ніж у форматі .JPG.

Компресори зображень: оптимізація зображень для Інтернету

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

TinyJPG + TinyPNG

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

На додаток до веб-інтерфейсу, вони мають платний плагін, який дозволяє оптимізувати зображення у Photoshop, і плагін WordPress, який дозволяє робити те ж саме в найбільш використовуваній CMS у світі.

  • Оригінальне зображення: 55,57 КБ (56 907 байт)
  • Оптимізоване зображення 15,03 КБ (15 391 байт)

Кракен

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

  • Втрата: Інтелектуальна оптимізація зображення, яка зазвичай зменшує вагу зображення на 60%. Він розроблений для створення зображень дуже доброї якості без помітної втрати якості. Саме такий режим вони рекомендують для переважної більшості користувачів.
  • Без втрат: Цей режим дозволяє зменшити якомога більше ваги файлу, не торкаючись жодного пікселя. Тобто це дозволяє дещо менше зменшити вагу, ніж режим з втратами, але зображення не втратить жодної якості.
  • Експерт: Цей режим для більш досвідчених користувачів дозволить встановити різні рівні якості для оптимізації зображення, зберігаючи дані EXIF ​​однаковими.
  • Оригінальне зображення: 55,57 КБ (56 907 байт)
  • Оптимізоване зображення: 15,15 КБ (15512 байт)

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

Компресор.io

Цей інструмент дозволяє нам оптимізувати наші зображення та підтримує 4 різні типи файлів: JPEG, PNG, GIF та SVG. З двома типами стиснення: без втрат або втрат

  • Оригінальне зображення: 55,57 КБ (56 907 байт)
  • Оптимізоване зображення: 16,18 КБ (16 573 байт)

Список компресорів зображень

Незважаючи на те, що в цій публікації ми говорили про 3 інструменти, ми залишаємо вам більш широкий список компресорів нижче, щоб ви могли протестувати та порівняти.

    1. Squoosh: https://squoosh.app/
    2. SVG: https://vecta.io/nano
    3. Компресор SVG: https://vecta.io/nano
    4. Стиснути JPEG: https://compressjpeg.com/
    5. Стиснути PNG: https://compresspng.com/
    6. Compress Studio: https://compress.studio/
    7. Compressor.io: https://compressor.io/
    8. ILoveImg: https://www.iloveimg.com/compress-image
    9. Компресор зображень: https://imagecompressor.com/
    10. Компресор зображень: https://smallseotools.com/image-compression/
    11. Розмір зображення: https://imageresizer.com/image-compressor
    12. JPEG Optimizer: http://jpeg-optimizer.com/
    13. Кракен: https://kraken.io/
    14. Крихітний JPG: https://tinyjpg.com/
    15. Крихітний PNG: https://tinypng.com/
    16. Toolur: https://compressimage.toolur.com/

Проблеми з оптимізацією зображень або швидкістю завантаження?

Якщо у вас є проблеми з оптимізацією, ви боїтеся або не знаєте, як це зробити, не соромтеся звертатися до нас.

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

Якщо вам потрібна допомога, чи у вас є сумніви ...