Съвременни формати за Lighthouse

Предупреждението на Lighthouse означава да конвертирате вашите JPEG и PNG файлове в WebP или AVIF, след което да ги предоставите чрез елемента picture с оригинала като резервен вариант (fallback). Този одит е един от най-лесните за преминаване, тъй като решението е механично, а не архитектурно.

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

Какво измерва Lighthouse

Lighthouse кодира повторно всяко изображение като WebP вътрешно и съобщава за разликата, когато спестяването надхвърли определен праг. Числото в доклада е реална оценка, а не обща препоръка.

Изображенията под прага се игнорират, поради което страница с 30 изображения може да покаже само 4 в одита. Изброените файлове са тези, които си струва да коригирате първо. Отстраняването им обикновено премахва предупреждението напълно, въпреки че други изображения на страницата остават в по-стари формати.

Маркировката, която удовлетворява одита

Използвайте елемент picture с AVIF на първо място, WebP на второ и оригиналния JPEG в тага img. Браузърът избира първия източник, който поддържа, така че по-новите браузъри получават малкия файл, а по-старите все пак показват изображение.

Тагът img трябва да остане, защото той носи alt текста, размерите и резервния вариант. Пропускането на атрибутите width и height причинява изместване на оформлението (layout shift) при зареждане, което влошава друг метрик от Core Web Vitals, докато коригирате този. Задайте и двата атрибута според реалния размер в пиксели на резервното изображение.

Как да преминете одита

За да разрешите правилно предупреждението, следвайте тези 6 стъпки.

1. Отворете доклада на Lighthouse и избройте посочените изображения, които имат измерими спестявания.
2. Проверете размера на показване на всяко изображение, тъй като много от тях са прекалено големи като размери, освен че са в грешен формат.
3. Преоразмерете всяко изображение до реалната му ширина на показване, удвоена за екрани с висока плътност (high-DPI).
4. Конвертирайте в WebP с качество 80 и в AVIF с качество 65 за най-големите изображения на страницата.
5. Предоставете резултатите чрез елемент picture с оригинала като img резервен вариант.
6. Стартирайте отново Lighthouse, за да потвърдите, че предупреждението е изчезнало и няма изместване на оформлението.

Стъпка 3 е по-важна от стъпка 4. Размерите определят по-голямата част от размера на файла, а прекалено голям WebP все още е прекалено голямо изображение. Масовото конвертиране отнема няколко минути, докато писането на маркировката обикновено отнема повече време.

Кой формат за кое изображение

Прави ли вече това вашата платформа

Много системи за управление на съдържание и хостинг провайдъри конвертират изображенията автоматично, така че проверете, преди да правите каквото и да е ръчно. Дублирането на тази работа е често срещано и излишно.

Тествайте за 2 минути. Отворете публикуваната страница, щракнете с десния бутон върху изображение и го отворете в нов раздел, след което вижте файловото разширение в адресната лента. Разширение .webp на файл, който сте качили като JPEG, означава, че платформата вече го конвертира. Shopify, повечето управлявани WordPress хостинги и редица конструктори на сайтове правят това по подразбиране.

Защо предупреждението понякога се връща

Новите качени файлове връщат проблема, когато стъпката по конвертиране е ръчна, а не автоматична. Сайт, изчистен през януари, ще покаже предупреждението отново до юни, ако редакторите качват снимки директно от камера.

Коригирайте процеса, а не само файловете. Или активирайте автоматичното конвертиране на ниво платформа, или въведете просто правило изображенията да се преоразмеряват и конвертират преди качване. Записването на правилото е важно за всеки сайт, в който публикува повече от един човек, тъй като одитът измерва най-лошото изображение, а не средното.

Трябва ли да използвате AVIF, WebP или и двете

Използвайте само WebP за повечето сайтове и добавяйте AVIF само за най-големите изображения на страницата. Поддръжката и на двете удвоява броя на файловете за генериране, съхранение и синхронизация за спестяване, което е малко при обикновените изображения.

Изчислението се променя при сайтове с голям брой фотографии, където AVIF спестява допълнителни 20 до 30 процента от файлове, които вече се измерват в стотици килобайти. На страница с hero изображение от 600 KB това е реално намаление. На страница с миниатюри от по 40 KB допълнителната поддръжка струва повече усилия, отколкото носи полза, и само WebP е достатъчен за преминаване на одита.

Правилна проверка на резултата

Стартирайте отново Lighthouse в поверителен прозорец с деактивирани разширения, тъй като разширенията на браузъра изкривяват измерването. Резултатите също варират между отделните пускания, така че сравнете 3 теста, вместо да се доверите на едно число.

Уверете се, че браузърът наистина получава новия формат, а не го предполагайте. Отворете инструментите за разработчици (Developer Tools), преминете към раздела Network, филтрирайте по изображения и презаредете страницата. Колоната Type показва какво действително е доставено. Страница, която все още сервира JPEG след конвертиране, обикновено означава, че маркировката на елемента picture е грешна или че кеширащият слой пази предишната версия.

Свързани одити, които се появяват заедно с него

• Properly size images (Правилен размер на изображенията). Изображението е по-голямо от пространството, в което се показва. Преоразмерете, вместо да компресирате.
• Efficiently encode images (Ефективно кодиране на изображенията). Компресията е твърде лека. Намалете настройката за качество.
• Defer offscreen images (Забавяне на изображенията извън екрана). Добавете мързеливо зареждане (lazy loading) за изображения под видимата част.
• Largest Contentful Paint element (Елемент на най-голямото съдържателно изчертаване). Обикновено това е вашето hero изображение, което изисква внимание първо.
• Image elements do not have explicit width and height (Елементите на изображенията нямат изрични width и height). Добавете и двата атрибута, за да предотвратите изместване на оформлението.

Тези 5 одита обикновено се появяват заедно, а преоразмеряването и конвертирането на посочените в доклада изображения изчиства повечето от тях с едно преминаване.

Колко всъщност подобрява това страницата

Конвертирането към съвременни формати обикновено премахва от 25 до 35 процента от теглото на изображението, а предварителното преоразмеряване често премахва много повече. На страница с много изображения комбинираният ефект често е 70 до 80 процента.

Подобрението се вижда в Largest Contentful Paint, което измерва колко бързо се появява основното съдържание. Това измерване обикновено се определя от едно изображение, така че намаляването на hero файла има ефект, несъразмерен с неговия дял от страницата. Намаляването на 20 малки изображения е по-малко важно от намаляването на 1 голямо.

Какво да не правите

Не премахвайте резервния JPEG вариант и не конвертирайте изображения, които посетителите ще изтеглят. И двете грешки жертват реална функционалност за малко подобрение на резултата.

Прес китове, ръководства за печат, шаблони за изтегляне и файлове от доставчици трябва да останат в JPEG или PNG, тъй като WebP се обработва трудно извън браузърите. Предоставянето им в модерни формати води до запитвания за поддръжка от хора, които не могат да ги отворят, което струва повече от спестената честотна лента.

Конвертиране на посочените в доклада изображения

Конвертирайте от оригиналните файлове, а не от вече публикуваните версии, защото компресираният JPEG пренася артефакти в новия файл. Кодиращото устройство не може да разграничи съществуващите артефакти от реалните детайли и хаби битове за тяхното запазване.

Пуснете до 500 файла наведнъж или плъзнете ZIP архив директно и целият набор се конвертира с едно минаване. Всичко се изпълнява във вашия браузър на собствения ви процесор, така че клиентски сайтове, тестови активи и непубликувани страници никога не стигат до сървър. Пълното конвертиране на сайт приключва за няколко минути, без нито един файл да преминава през мрежата.

Запазете конвертираните файлове заедно с оригиналите, като използвате съвпадащи имена, така че маркировката за елемента picture да може да се генерира по предсказуем модел, вместо да се редактира на ръка за всяко изображение. Папка, съдържаща hero.jpg, hero.webp и hero.avif, е лесна за шаблонизиране и прави следващата миграция на формати просто масово конвертиране, а не преписване на всяка страница.