WebP зображення в Magento 2

Скільки часу ви зазвичай чекаєте, поки веб-сайт завантажиться?

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

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

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

Ніколи не чули про цей формат?

У цій статті ви дізнаєтеся, що таке WebP, чому він відрізняється від формату PNG і як він може вплинути на ваш магазин Magento 2.

Давайте розберемось.

Що таке WebP?

Формат WebP був розроблений Google у вересні 2010 року як формат файлів нового покоління, менший за розміром і швидший у завантаженні, ніж стандартні PNG та JPG. Зараз це формат файлів, який підтримують і використовують майже всі браузери.

WebP забезпечує розмір файлу, який є на 26% меншим, ніж PNG, і на 25 - 34% меншим, ніж JPEG, зберігаючи при цьому якість зображення.

Крім того, WebP — це суміш двох типів стиснення зображень lossless та lossy:

• Стиснення зображень без втрат (Lossless compression) - файли великого розміру відновлюються до початкової форми без втрати даних.
• Стиснення з втратою (Lossy compression) - файли великого розміру відновлюються до початкової форми з втратою даних.

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

Чи можете ви побачити різницю у якості цих зображень?

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

Чим швидше завантажується ваш сайт, тим більше користувачів приходить, тим надійнішим він здається для Google та інших пошукових систем. Схема доволі проста.

WebP проти JPG, PNG, GIF.

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

Магазини Magento 2 зокрема, продають сотні чи тисячі товарів. Це десятки тисяч зображень самих товарів, а також зображень на домашній сторінці, в блозі, на CMS сторінках та блоках.

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

Ось також таблиця порівняння, де WebP порівнюється з PNG, JPG та GIF:

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

Хіба це не те, що ви шукаєте?

Більше того, використання застарілих форматів зображень не рекомендується пошуковими системами. Навіть GooglePageSpeed Insights рекомендує вам використовувати зображення у форматі нового покоління.

Причини використовувати WebP в Magento 2

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

Якщо ви все ще не впевнені, що вам потрібен цей формат зображень, ось декілька причин використання WebP у Magento 2:

Зменшення часу завантаження

Ви спитаєте чи не втомилися ми повторювати це знову і знову?

Ні, оскільки покращена швидкість веб-сайту — це вся суть WebP. Якщо сайт завантажується більше 3-ох секунд користувачі, швидше за все, покинуть його. І ці 3 секунди можуть стати вирішальними для будь-якого малого або великого бізнесу на Magento 2.

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

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

Покращене SEO

SEO — це складне поняття, на яке впливає багато речей. Швидкість веб-сайту не є винятком. Використання WebP зображень у магазині Magento 2 робить ваш веб-сайт легшим та швидшим.

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

Оптимізований досвід користувачів

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

Зображення WebP зберігають однакову прозорість (transparency) та якість, навіть при зміні розміру зображення. Таким чином, ви не лише забезпечите якісні зображення для відвідувачів вашого магазину. Ви забезпечите їх швидко.

Кращі конверсії

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

Обидва варіанти не надто привабливі, правда ж?

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

Зменшення bounce rates

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

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

Чи завантажувати зображення у WebP у Magento?

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

Але з чого вам слід почати?

Перш за все, Magento 2 підтримує лише PNG та JPG файли. Тож, якщо ви спробуєте завантажити зображення у WebP форматі в Magento, ви отримаєте повідомлення про те, що файл WebP не підтримується.

Не засмучуйтесь заздалегідь. Це, насправді, "працює на вас".

Формат WebP підтримується багатьма браузерами, але не всіма. Отже, якщо ви завантажуєте вже конвертовані WebP зображення в Magento 2, люди з цих браузерів побачать поламані зображення:

Тому вам потрібно знайти альтернативні способи оптимізації зображень у Magento 2 шляхом перетворення їх у формат WebP.

Як оптимізувати зображення у Magento 2 з WebP?

В Інтернеті є багато WebP конвертерів. Однак, як ми вже домовились, краще не завантажувати зображення у форматі WebP безпосередньо в Magento.

Натомість ви можете використовувати розширення, яке автоматично конвертує зображення з PNG, JPG та GIF у WebP.

Ми рекомендуємо використовувати розширення Magento 2 WebP Images, оскільки воно має всі необхідні опції, які допоможуть вам оптимізувати зображення та підвищити продуктивність сайту без складних налаштувань або редагування коду.

За допомогою цього розширення ви отримуєте комплексне рішення для оптимізації зображення у Magento 2, оскільки воно пропонує вам наступні функції:

• Можливість редагування якості зображень

Наш модуль Magento 2 WebP Images дозволяє задавати рівень якості зображень. Щоб отримати найкращу якість, потрібно задати показник не менше 90-100%. Однак, чим нижчий показник якості, тим швидше завантажуються зображення.

Ви можете спробувати позадавати різні показники якості, щоб вибрати найкращу для зображень вашого магазину Magento 2. Тільки не забудьте очищати WebP кеш.

• 4 способи конвертації

Ви можете вибрати спосіб конвертації ваших зображень. Розширення WebP Images пропонує вам 4 способи, тому ви можете конвертувати зображення автоматично або вручну.

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

• Можливість пропускати окремі папки із зображеннями

У вашому магазині багато зображень із різних місць: сторінок продукту, блогу, CMS блоків та сторінкок. Всі вони можуть бути в різних папках. Отже, цей модуль WebP Images у Magento 2 дозволяє пропускати певні медіа або статичні папки.

Вам не потрібно перетворювати всі зображення в WebP, а лише ті, які ви хочете.

• Окрема папка з кешем

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

• Конвертація зображень в фоновому CSS та тегу <picture>

Якщо у вас є якісь зображення у фоновому режимі або у <picture> тезі, наше розширення також конвертує їх.

Вам не потрібно нічого змінювати в коді. Просто увімкніть відповідні опції, і ці зображення також будуть перетворені.

• REST API та GraphQL Endpoints

У вас є третьо-сторонній додаток і ви хочете забезпечити кращий досвід для користувачів цього додатку? Підвищіть продуктивності та отримуйте WebP зображення в третьосторонньому додатку за допомогою нашого розширення WebP Images.

• Можливість конвертувати зображення з зовнішніх папок

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

Просто вставте базові URL-адреси сайтів, чиї зображення ви використовуєте, у відповідне поле і вуаля — розширення Magento 2 WebP Images все зробить.

Щоб дізнатись більше про ці опції, перегляньте налаштування модуля WebP Images або спробуйте налаштувати модуль на нашому онлайн демо.

Ви також можете переглянути це коротке відео, щоб дізнатись, як завантажуються зображення WebP у магазині Magento 2:

Чому потрібно використовувати WebP в Magento 2?

Швидкість веб-сайту — один із надзвичайно важливих факторів, що впливає на багато речей на вашому веб-сайті: від досвіду користувачів до показника виходу з сайту та SEO.

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

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

Якщо ви вже втомились шукати способи покращення рейтингу сайту та залучення нових клієнтів, WebP може бути саме тим, що вам потрібно. Конвертуйте зображення у WebP на вашому магазині Magento 2 та покращуйте загальну продуктивність сайту легко.