Bildoptimering för SEO: WebP i praktiken

Bildoptimering med WebP är den enklaste hastighetsvinsten på de flesta sajter jag granskar. Bilder står ofta för större delen av en sidas vikt, och en enda bild rakt ur mobilkameran kan väga mer än resten av sidan tillsammans. Det här inlägget handlar om formatet, dimensionerna, laddningen och alt-texterna.

Varför är bilder den vanligaste hastighetsboven?

För att de laddas upp som de är. En bild från en modern mobil är flera tusen pixlar bred och väger flera megabyte, och temat visar den sedan i en spalt på några hundra pixlar. Besökaren laddar ner hela originalet i onödan, gånger antalet bilder på sidan. Det är därför bilderna ligger högt i min prioritering när en sajt är seg, direkt efter webbhotellet; hela ordningen finns i snabbare WordPress. Var hastigheten hör hemma i det större arbetet beskriver jag i vad är teknisk SEO.

Vad är WebP och behövs AVIF?

WebP är ett bildformat som ger klart mindre filer än JPEG och PNG vid samma synliga kvalitet, och det stöds av alla moderna webbläsare. Googles egen dokumentation om formatet går igenom skillnaderna mot JPEG och PNG. AVIF är nästa steg med ofta ännu mindre filer, och stödet har hunnit bli brett. Min hållning: WebP är det trygga standardvalet, AVIF en bonus om dina verktyg hanterar det utan krångel. Själv konverterar jag så mycket bilder att jag tröttnade på onlineverktygen och byggde en egen WebP-konverterare i Python som vi använder på jobbet; den skalar om och konverterar hela mappar i ett svep. Du behöver inte gå så långt: WordPress tar emot WebP-uppladdningar, och det finns både plugin och webbhotell som konverterar automatiskt.

Vilka dimensioner ska bilderna ha?

Ungefär lika stora som de visas. Visas bilden som mest 800 pixlar bred behöver du inte ladda upp 3000. Exportera i den största storlek bilden faktiskt visas i, gärna med lite marginal för skarpa skärmar, och låt WordPress generera sina mindre varianter som temat sedan väljer bland. De värsta syndarna är toppbilder över hela ytan: de är störst, syns först och drar ner mätvärdena mest. Börja alltid där.

Hur tar jag hand om bilderna som redan ligger uppe?

Som ett massbyte, inte en bild i taget. I WordPress finns plugin som konverterar hela mediebiblioteket och sedan levererar WebP-varianten till webbläsare som klarar den. Det fungerar bra, med ett förbehåll värt att känna till: en del av dem levererar den nya filen via omskrivningsregler i stället för att byta ut själva bilden, så avaktiverar du pluginet är du tillbaka på ursprungsfilerna. Läs vad det du väljer faktiskt gör innan du kör igång på tusen bilder.

Behåll originalen någonstans utanför sajten. Komprimering är enkelriktad, och den dagen du vill beskära om en bild eller exportera den i en annan storlek vill du inte utgå från en komprimerad kopia. Själv kör jag mapparna genom konverteraren före uppladdning, så att det som hamnar på sajten redan är rätt från början; då behövs inget plugin alls.

Hur fungerar lazy loading?

Lazy loading betyder att bilder längre ner på sidan hämtas först när besökaren närmar sig dem. WordPress sköter det automatiskt sedan flera versioner tillbaka via attributet loading=“lazy”, så oftast behöver du inte göra något alls. En regel bara: den stora bilden högst upp ska aldrig lazy-laddas, för då dröjer det viktigaste synliga innehållet i onödan. De flesta teman hanterar det rätt, men det är värt en snabb kontroll i källkoden på startsidan.

Vad ska stå i alt-texten?

En beskrivning av vad bilden föreställer, skriven för en människa som inte ser den. Alt-texten används av skärmläsare och av Googles bildsök, så den gör dubbel nytta. Skriv konkret: “svart smidesräcke monterat på ektrappa” slår “bild-final-2” i båda sammanhangen. Stoppa inte in sökord som inte hör dit, och lämna alt-texten tom på rent dekorativa bilder. Beskrivande filnamn före uppladdning är en fin bonus, för filnamnet går inte att ändra i efterhand i WordPress utan omvägar.

När passar SVG bättre än WebP?

För logotyper, ikoner och enkel grafik. SVG är vektor, alltså matematik i stället för pixlar, så filen blir liten och kanterna skarpa i alla storlekar. Foton ska aldrig vara SVG, och skärmdumpar mår bäst av WebP.

En säkerhetsdetalj hör till. En SVG-fil kan innehålla skript, och därför tillåter WordPress inte uppladdning av dem som standard. Slår du på det via ett plugin ska du bara ladda upp filer du själv skapat eller fått från en känd leverantör, helst efter en sanering. För ikoner räcker det ofta att lägga koden direkt i temat i stället för att ladda upp filer alls.

Var börjar jag i praktiken?

Bilderna är en egen punkt i min tekniska SEO-checklista just för att de så ofta är den största enskilda vinsten. Vill du ha hjälp med hela hastighetsarbetet tar jag det som SEO-konsult. Annars börjar du konkret: ta de tre tyngsta bilderna på startsidan, konvertera dem till WebP i rätt storlek och ladda upp dem igen. Skillnaden brukar synas redan vid nästa mätning.