Webp, перспективний формат, але багато браузерів; Жук Сео; SEO блог та SEO
Webp, перспективний формат, але багато браузерів
Під час останнього SEO-табору в Ліоні я почув про формат, який мені був незнайомий, .webp. Oncrawl сказав, що Google просуває це, але перед тим, як кидатися на нього, як багато хто з guetzli, я хотів перевірити це на собі.
Як і SEO, я справді цим займався з 2009/2010 рр., Образ, яким я займався з самого першого Photoshop, а це означає, що я народився:). І одна з речей, яка мене дратує, - це перегляд сайтів з неоптимізованими зображеннями, особливо якщо цей сайт відомий! Я також був здивований, побачивши, що це не те, що, здається, панікує маніаків webperfs, які воліють проводити час, неможливий для .js, кешування та всього іншого, тоді як вага зображення, яке він також відтворює на досвіді користувача.
Звичайно, ви не можете знати всього, і я розумію, що ви можете пройти плагіни, сайти стиснення та інструменти, виконуючи те саме, щоб покращити продуктивність. Але, як я вже пояснював тут, ми не ставимось до різних стилів зображень, таких як логотипи, фотографії чи ілюстрації, однаково. Ось чому я сам використовую різні сценарії PScript (Photoshop) для обробки партій зображень одного типу, інакше я вважаю за краще робити це вручну, якщо обсяг прийнятний.
Тож я хотів розглянути випадок .webp, піддавши його моєму власному тесту на збій, чи буде він сильнішим за скрипт PS? 😀
Перш за все, що таке формат .wepb ?
WebP - це формат зображення, в якому використовується стиснення як з втратами, так і без втрат. В даний час він розробляється Google на основі технології, придбаної внаслідок придбання On2 Technologies .
Формат був вперше оголошений 30 вересня 2010 року як новий відкритий стандарт для стиснутої графіки True-Color в Інтернеті, що призвело до отримання менших файлів із якістю зображення, порівнянною зі старою схемою JPEG. 3 жовтня 2011 року Google оголосив про підтримку WebP для анімації, профілю ICC, метаданих XMP та викладання плиток (дуже велика композиція зображень до 16384 × 16384).
18 листопада 2011 року Google розпочав експерименти зі стисненням без втрат та підтримкою прозорості (альфа-канал) як в режимах без втрат, так і в режимі схуднення; Підтримка була ввімкнена за замовчуванням у libwebp 0.2.0 (16 серпня 2012 р.). Згідно з вимірами Google, перетворення з PNG на WebP призводить до зменшення розміру файлу на 45%, починаючи з PNG, знайдених в Інтернеті, і на 28% порівняно з PNG, рекомпресованими за допомогою pngcrush та PNGOUT
Як зберігати у форматі .wepb ?
Щоб експортувати зображення у форматі .webp, у вас є кілька рішень:
Зі свого боку, я, очевидно, віддаю перевагу рішенню через Photoshop, але для більш голодних потреб плагінове рішення в браузері непогане.
Перейдемо до перевірки цього .Wepb і ось результати
Отже, ми озброєні, щоб протестувати іграшку, я пройшов 4 тести:
* Тест на вже оптимізованій сторінці
Якби ми могли перейти безпосередньо до суті справи, Webp зберігаючи апріорі якість вихідного зображення незмінним, я подав його на сторінку одного з моїх сайтів електронної комерції, яка вже добре оптимізована. Я розмив зображення, вибачте мене 😉
Тож я обробив усі зображення на сторінці: .jpeg, .gif та інші .png, і я бачу значний приріст майже на 46% з однаковою якістю! Я застряг! Але я продовжую тести, щоб усвідомити це.
* Тест на неоптимізованій сторінці
Класична сторінка категорії електронної комерції з великою кількістю продуктів ... зображення не мають особливого стиснення, оскільки команди не вважають це стратегічним. Раптом це було ідеально для демонстрації цього тесту webp 😀
Там різниця колосальна, вага знижується на 79%! Я вважаю, що це відображає більшість існуючих сайтів.
* Тест на відомому сайті
Давай, я добровільно візьму дуже відомий сайт, який уже має хороші показники: Amazon:). Я пішов до будинку книг - щось, що гігант продає самостійно, і ось результати:
Роздумує, чи не так? 🙂 Ми можемо бути “GAFA” і мати погану компресію.
* Тест на конкретному зображенні
Цей тест особливо допомагає вам побачити стиснення "великим", це скріншот, щоб ми могли порівняти. Я взяв останній фурункул від @romualdparis для вправ 😉
Виконайте рейтинг зображень .webp ?
Ми є небагато, хто був здивований тим, що, зокрема, не бачив зображень .web на зображеннях Google. Якщо відсутність знань цього формату може пояснити це на даний момент, чому б не побачити більше цього? ?
Однією з причин є те, що ми, звичайно, не обов’язково дивимось на кінець файлу на вкладці зображень, але ми повинні визнати, що з цього боку це швидше пустеля. @Jessyseonoob надіслав мені приклад, який я розмістив нижче, але присутність webp в даний момент голодує. У будь-якому випадку ми можемо просто сказати, що зображення .wepb можуть ранжувати. Пам’ятайте, що семантичний контекст вашої сторінки та хороший alt - це 2 ОСНОВНІ фактори позиціонування зображення в google.
Але якщо у вас є приклади, я зацікавлений виконати ці тести.
Які браузери сумісні ?
Якщо webp такий дивовижний, то чому це просто не сталося само по собі? Відповідь тут:
Сайт “Caniuse” (Біблія на цю тему) показує, що більшість найбільших браузерів ще не сумісні. Не страшно, наприклад, коли ви є електронною комерцією.
Інший момент - найбільша система управління вмістом у світі (WordPress) теж не їсть рідну .webp.
Якщо до цього додати недостатнє знання цього формату широкою громадськістю, можна сказати, що масове використання webp поки що не.
Чому стандарт .webb все ж переважає ?
Що всі забувають, це те, що за цим форматом стоїть Google. А коли справа стосується покращення часу завантаження сайту та утримання користувача вдома, він не соромиться просувати технології (адаптивний дизайн, https ...), навіть якщо це означає непристойно висвітлювати свої продукти (наприклад, AMP).
Як правило, коли фірма, що займається дослідженням гори, спілкується з рішенням, багато сайтів схиляються перед святим словом і переходять до запропонованого техно (іноді сліпо, але привіт ...). Все це для того, щоб сказати, ви розумієте, що стандарт .webp через деякий час цілком може стати важливим. Залишайтеся з нами !
Щоб дізнатись більше, я запрошую вас поглянути на (стару) конф. Google з цього питання: