Billedoptimering i WordPress: Formater, størrelser og værktøjer

Billedoptimering i WordPress handler om at vise dine billeder i det rigtige format (WebP eller AVIF), i den rigtige størrelse og med de rigtige attributter, så siden loader hurtigt uden at billederne ser dårligere ud.

Billeder er ofte den tungeste del af en side. Det er derfor også her, de nemmeste gevinster ligger. Her er formaterne, størrelserne, de tekniske detaljer og de værktøjer, der virker i dag.

Hvorfor er billedoptimering vigtig?

Et stort billede øverst på siden er ofte det element, Google bruger til at måle Largest Contentful Paint (LCP), altså hvor hurtigt sidens hovedindhold vises. Målet er 2,5 sekunder eller mindre. Billeder uden faste dimensioner kan også få layoutet til at hoppe, når de dukker op, og det måles som Cumulative Layout Shift (CLS), hvor målet er højst 0,1.

Det handler ikke kun om Google. En kunde på mobilen med dårlig forbindelse venter ikke på et billede på flere megabyte. Hurtigere billeder giver en bedre oplevelse, og de giver mindre data at hoste og sende.

Hvilket billedformat skal du bruge?

Du behøver ikke selv gemme alle billeder som WebP eller AVIF. Det nemmeste er at uploade JPEG eller PNG i god kvalitet og lade et plugin lave de moderne versioner automatisk. Så har du stadig originalen, hvis der kommer et endnu bedre format.

Hvor store skal billederne være?

Et billede fra en moderne telefon eller et kamera er ofte flere tusinde pixels bredt og flere megabyte stort. På en hjemmeside vises det næsten aldrig i den bredde. Resten er spild.

• Find den største visning: Hvor bredt vises billedet maksimalt? Et billede i fuld bredde er bredere end et billede i en tekstspalte.
• Gang med cirka to: Så er billedet skarpt på skærme med høj opløsning.
• Beskær før upload: Det, der ikke skal ses, skal heller ikke hentes.
• Lad WordPress lave resten: WordPress laver selv mindre udgaver af hvert billede og vælger den rigtige størrelse til skærmen via srcset.

WordPress har et indbygget sikkerhedsnet: Uploader du et meget stort billede, skalerer WordPress det automatisk ned til højst 2.560 pixels og bruger den udgave på siden. Det er en god nødbælte, men ikke en erstatning for at uploade i en fornuftig størrelse fra start.

De tekniske detaljer, der gør forskellen

srcset: rigtig størrelse til hver skærm

WordPress tilføjer automatisk srcset og sizes til billeder fra mediebiblioteket. Browseren vælger så den mindste udgave, der stadig er skarp. Det virker kun, hvis du indsætter billedet via mediebiblioteket. Billeder, der er hard-codet med en direkte URL, får det ikke.

width og height: ingen hoppende layout

Når et billede har width og height i koden, kan browseren reservere pladsen, før billedet er hentet. Uden dem hopper teksten ned, når billedet dukker op. WordPress tilføjer dimensionerne på billeder fra mediebiblioteket. Tjek især billeder i sidebyggere, slidere og temaets header.

Lazy load og fetchpriority: rigtig rækkefølge

Billeder længere nede på siden skal have lazy load, så de først hentes, når brugeren scroller derned. Billedet øverst, typisk dit LCP-billede, skal have det modsatte: fetchpriority="high", så browseren henter det først. WordPress forsøger selv at gøre det rigtigt siden version 6.3, og et godt performance-plugin lader dig finjustere det.

Filnavn og ALT-tekst

Omdøb filen, før du uploader. roed-ladcykel-to-boern.jpg fortæller Google mere end IMG_4471.jpg. Brug små bogstaver og bindestreger, og undgå æ, ø og å i filnavne. Giv også hvert billede en god ALT-tekst, som beskriver, hvad billedet viser, for skærmlæsere og søgemaskiner.

Hvilke værktøjer skal du bruge?

FlyingPress: automatisk på hele siden

Vi bruger FlyingPress på vores egne og kundernes WordPress-sider. Ud over cache håndterer det billedoptimering: komprimering og moderne formater, lazy load, manglende dimensioner og prioritering af billederne øverst. Du behøver derfor ikke et separat billedplugin oven i. Flere plugins, der optimerer de samme billeder, giver bare dobbeltarbejde og fejl, der er svære at finde.

Squoosh: gratis til enkeltbilleder

Skal du lige gøre et enkelt billede klar, før du uploader det, så brug Squoosh. Det er et gratis værktøj fra Google, der kører i browseren. Du kan skalere billedet, vælge WebP eller AVIF og se kvaliteten side om side med originalen, før du gemmer. Billedet forlader ikke din computer.

Billedredigering på computeren

Til beskæring og skalering kan du bruge Fotos-appen i Windows eller Forhåndsvisning på Mac. Paint 3D, som mange vejledninger anbefaler, er udfaset af Microsoft. Arbejder du med mange billeder, er et rigtigt billedprogram hurtigere, men til de fleste virksomheder rækker det indbyggede plus Squoosh og et plugin.

Tjekliste: billedoptimering i WordPress

• Billederne er skaleret og beskåret før upload.
• Filnavnene er beskrivende, med små bogstaver og bindestreger.
• Siden viser WebP eller AVIF, ikke store JPEG- og PNG-filer.
• Alle billeder har width og height.
• Billedet øverst lazy loades ikke og har fetchpriority=”high”.
• Alle informative billeder har en ALT-tekst. Pynt har tom ALT-tekst.
• Der er kun ét plugin, der optimerer billeder.
• Du har testet siden i PageSpeed Insights på mobil og har ingen advarsler om billeder.

Bygger vi din WordPress-hjemmeside, er billedoptimeringen sat op fra start, så du kan uploade billeder uden at tænke over det.

Ofte stillede spørgsmål

Kilder: Make WordPress Core: WordPress 6.5 adds AVIF support · Google Search Central: Bedste praksis for billed-SEO · web.dev: Web Vitals

“Det hurtigste billede er det, der aldrig var større end nødvendigt.”

Du er velkommen til at læse mere i nogle af vores andre blogindlæg