Leverera bilder i nästa generations format

Varningen i Lighthouse innebär att du ska konvertera dina JPEG- och PNG-filer till WebP eller AVIF och sedan leverera dem via ett picture-element med originalet som reservalternativ. Den här granskningen är en av de enklare att åtgärda, eftersom lösningen är mekanisk snarare än strukturell.

Lighthouse utfärdar varningen när den hittar bilder som den anser skulle bli avsevärt mindre i ett modernt format. Uppskattningen baseras på filen som laddades ned, vilket gör att den rapporterade besparingen oftast är nåbar och ibland i underkant.

Vad Lighthouse faktiskt mäter

Lighthouse kodar om varje bild till WebP internt och rapporterar skillnaden när besparingen överstiger en viss tröskel. Siffran i rapporten är en verklig uppskattning snarare än en generell rekommendation.

Bilder under tröskelvärdet ignoreras, vilket är anledningen till att en sida med 30 bilder kanske bara visar 4 i granskningen. De listade filerna är de som är värda att åtgärda först. Att åtgärda dem tar oftast bort varningen helt, även om andra bilder på sidan ligger kvar i äldre format.

Koden som uppfyller kraven i granskningen

Använd ett picture-element med AVIF först, WebP som andra alternativ och originalets JPEG i img-taggen. Webbläsaren väljer den första källan den stödjer, vilket gör att nyare webbläsare får den lilla filen medan äldre fortfarande får en fungerande bild.

Img-taggen måste vara kvar eftersom den innehåller alt-text, dimensioner och reservbilden. Om du utelämnar width- och height-attributen uppstår layoutskiftningar när bilderna laddas, vilket försämrar ett annat Core Web Vitals-värde samtidigt som du fixar detta. Sätt båda attributen till reservbildens faktiska storlek i pixlar.

Så åtgärdar du varningen

Följ dessa 6 steg för att lösa varningen helt.

1. Öppna Lighthouse-rapporten och lista bilderna den nämner, vilket är de med mätbara besparingar.
2. Kontrollera visningsstorleken på varje bild, eftersom många är för stora utöver att ha fel format.
3. Ändra storlek på varje bild till dess faktiska visningsbredd, fördubblad för skärmar med hög pixeltäthet.
4. Konvertera till WebP med kvalitet 80, och till AVIF med kvalitet 65 för de största bilderna på sidan.
5. Leverera resultatet via ett picture-element med originalet som img-reserv.
6. Kör Lighthouse igen för att bekräfta att varningen är borta och att inga layoutskiftningar har uppstått.

Steg 3 spelar större roll än steg 4. Dimensionerna styr den största delen av filstorleken, och en för stor WebP-bild är fortfarande en för stor bild. Att masskonvertera tar ett par minuter, medan det oftast tar längre tid att skriva koden.

Vilket format för vilken bild

Gör din plattform redan detta

Många publiceringssystem och webbhotell konverterar bilder automatiskt, så kontrollera detta innan du bygger något för hand. Att göra jobbet dubbelt är vanligt och onödigt.

Testa på 2 minuter. Öppna den publicerade sidan, högerklicka på en bild och öppna den i en ny flik, och läs sedan filändelsen i adressfältet. Filändelsen .webp på en fil du laddade upp som JPEG innebär att plattformen redan konverterar. Shopify, de flesta hanterade WordPress-värdar och flera hemsidesbyggare gör detta som standard.

Varför varningen ibland kommer tillbaka

Nya uppladdningar återinför problemet om konverteringssteget är manuellt istället för automatiskt. En webbplats som åtgärdades i januari visar varningen igen i juni om redaktörer laddar upp direkt från en kamera.

Åtgärda processen snarare än bara filerna. Aktivera entingen automatisk konvertering på plattformsnivå eller kom överens om en enkel regel att bilder ändras i storlek och konverteras före uppladdning. Att skriva ned regeln är viktigt på alla webbplatser där mer än en person publicerar, eftersom granskningen mäter den sämsta bilden snarare än genomsnittet.

Bör du använda AVIF, WebP eller båda

Använd enbart WebP på de flesta webbplatser och lägg bara till AVIF för de största bilderna på sidan. Att stödja båda fördubblar antalet filer som måste genereras, lagras och synkroniseras för en besparing som är liten på vanliga bilder.

Kalkylen ändras på tunga fotowebbplatser där AVIF sparar ytterligare 20 till 30 procent på filer som redan mäts i hundratals kilobyte. På en sida med en hero-bild på 600 KB är det en stor minskning. På en sida med tummenaglar på 40 KB kräver det extra arbetet mer än vad det ger tillbaka, och WebP ensamt räcker för att klara granskningen.

Så kontrollerar du resultatet ordentligt

Kör Lighthouse igen i ett privat fönster med tillägg inaktiverade, eftersom webbläsartillägg snedvrider mätningen. Poängen varierar också mellan körningar, så jämför 3 körningar istället för att lita på en enskild siffra.

Verifiera att webbläsaren faktiskt tar emot det nya formatet istället för att ta det för givet. Öppna utvecklarverktygen, gå till fliken Nätverk, filtrera på bilder och läs in sidan igen. Kolumnen Typ visar vad som faktiskt levererades. En sida som fortfarande levererar JPEG efter en konvertering innebär oftast att picture-koden är felaktig eller att ett cachelager håller kvar den tidigare versionen.

Relaterade granskningar som visas samtidigt

• Properly size images. Bilden är större än ytan den visas på. Ändra storleken istället för att komprimera.
• Efficiently encode images. Komprimeringen är för lätt. Sänk kvalitetsinställningen.
• Defer offscreen images. Lägg till lazy loading på bilder längre ned på sidan.
• Largest Contentful Paint element. Oftast din hero-bild, som förtjänar uppmärksamhet först.
• Image elements do not have explicit width and height. Lägg till båda attributen för att förhindra layoutskiftningar.

Dessa 5 granskningar visas ofta tillsammans, och att ändra storlek samt konvertera bilderna som nämns i rapporten åtgärdar de flesta av dem i ett enda svep.

Hur mycket detta faktiskt förbättrar en sida

Konvertering till moderna format minskar vanligtvis bildvikten med 25 till 35 procent, och att ändra storlek först minskar ofta långt mer. På en bildtung sida är den sammanlagda effekten ofta 70 till 80 procent.

Förbättringen syns i Largest Contentful Paint, som mäter hur snabbt det huvudsakliga innehållet visas. Den mätningen avgörs oftast av en enda bild, så att minska hero-filen har en effekt som är oproportionerligt stor jämfört med dess andel av sidan. Att minska 20 små bilder spelar mindre roll än att minska 1 stor.

Vad du inte ska göra

Ta inte bort JPEG-reserven, och konvertera inte bilder som besökare ska ladda ned. Båda misstagen byter ut en verklig funktion mot en liten förbättring av poängen.

Presskit, utskrivbara guider, nedladdningsbara mallar och leverantörsfiler bör förbli JPEG eller PNG, eftersom WebP fungerar dåligt utanför webbläsare. Att leverera dessa i moderna format skapar supportärenden från personer som inte kan öppna dem, vilket kostar mer än bandbredden du sparar.

Konvertera bilderna som rapporten nämnde

Konvertera från originalfilerna snarare än från de versioner som redan publicerats, eftersom en komprimerad JPEG för över artefakter till den nya filen. Kodaren kan inte skilja befintliga komprimeringsfel från verkliga detaljer och lägger datamängd på att bevara dem.

Släpp in upp till 500 filer samtidigt, eller dra in ett ZIP-arkiv direkt, så konverteras hela uppsättningen i ett enda svep. Allt körs i din webbläsare på din egen processor, så kundwebbplatser, testfiler och opublicerade sidor når aldrig en server. En hel webbplatskonvertering blir klar på några minuter utan att en enda fil skickas över nätverket.

Behåll de konverterade filerna tillsammans med originalen med matchande namn, så att picture-koden kan genereras med ett förutsägbart mönster istället för att redigeras för hand för varje bild. En mapp med hero.jpg, hero.webp och hero.avif är enkel att bygga mallar för, och det gör nästa formatmigrering till en masskonvertering istället för en omskrivning av varje sida.