Moderne WordPress medieoptimalisering: WEBP, AVIF og ytelsesstrategier (2026)

I WordPress sine tidlige dager betydde “optimalisering” å installere en plugin som Smush eller EWWW og håpe på det beste.

I 2026 har landskapet endret seg. WordPress-kjernen støtter WebP og AVIF innebygd. Nettlesere har standardisert lazy loading. Vertsmiljøer inkluderer ofte komprimering på servernivå.

Denne guiden er for utviklere som ønsker å forstå den innebygde mekanikken for mediehåndtering i WordPress og optimalisere den uten å fylle opp stacken med tunge plugins.

1. Innebygd bildestøtte: WEBP & AVIF

Borte er dagene da du trengte en plugin for å omskrive HTML-en din for å levere .webp.

WEBP (støttet siden wp 5.8)

WordPress lager WebP-understørrelser som standard hvis serverens ImageMagick-bibliotek støtter det.

AVIF (støttet siden wp 6.5)

AVIF tilbyr enda bedre komprimering enn WebP. For å prioritere AVIF, trenger du bare å bekrefte at servermiljøet ditt støtter det.

[!TIP] Sjekk nettstedshelsen din: Gå til Verktøy > Nettstedshelse (Site Health) for å bekrefte om din PHP-installasjon støtter AVIF-generering.

Kontrollere utdatakvalitet

Standard komprimeringskvalitet i WordPress er 82. Dette er ofte for høyt for miniatyrbilder. Du kan justere dette med et enkelt filter i functions.php:

// Juster JPEG-kvalitet
add_filter('jpeg_quality', function($arg) { return 80; });

// Juster WebP-kvalitet
add_filter('wp_editor_set_quality', function($quality, $mime_type) {
    if ('image/webp' === $mime_type) return 75;
    return $quality;
}, 10, 2);

2. Forhindre “thumbnail bloat”

Som standard registrerer en ny WordPress-installasjon flere bildestørrelser:

• Thumbnail (Miniatyrbilde)
• Medium
• Medium Large
• Large (Stor)
• 1536x1536
• 2048x2048

Hvis du legger til et tema som registrerer 5 størrelser til (portfolio-grid, slider-large, osv.), genererer hver eneste opplasting 10+ filer. Dette kaster bort inode-grenser og diskplass.

Løsningen: Deaktiver ubrukte størrelser

function wppoland_disable_image_sizes($sizes) {
    unset($sizes['medium_large']); // 768px
    unset($sizes['1536x1536']);    // 2x Medium Large
    unset($sizes['2048x2048']);    // 2x Large
    return $sizes;
}
add_filter('intermediate_image_sizes_advanced', 'wppoland_disable_image_sizes');

Proff-tips: Gå til Innstillinger > Media og sett dimensjonene til 0 for alle standardstørrelser (som Medium) du ikke bruker.

3. Responsive bilder (srcset)

WordPress håndterer srcset automatisk, og leverer riktig størrelse basert på brukerens visningsport (viewport). Du kan imidlertid hjelpe nettleseren ved å definere sizes-attributtet manuelt når du rendrer bilder i egne løkker.

echo wp_get_attachment_image(
    $image_id,
    'large',
    false,
    ['sizes' => '(max-width: 600px) 100vw, 800px']
);

Dette forteller nettleseren: “Hvis skjermen er under 600px, vil bildet ta opp full bredde. Ellers vil det være 800px bredt.”

4. Moderne lazy loading

Siden WP 5.5 legges attributtet loading="lazy" til automatisk. Ytelsesfelle: IKKE bruk lazy loading på LCP (Largest Contentful Paint) bildet – vanligvis hovedbildet (Hero) eller det fremhevede innlegget. Det forsinker visningen.

Deaktiver lazy load for det første bildet

add_filter('wp_get_attachment_image_attributes', function($attr, $attachment) {
    // Logikk for å oppdage om det er det første bildet i løkken, eller Hero
    // For manuell kontroll kan vi sjekke for en klasse
    if (isset($attr['class']) && strpos($attr['class'], 'hero-image') !== false) {
        $attr['loading'] = 'eager';
        $attr['fetchpriority'] = 'high';
    }
    return $attr;
}, 10, 2);

5. Skalering: Objektlagring (s3/GCS)

Hvis mediebiblioteket ditt vokser utover 10 GB, slutt å lagre filer på webserveren din. Bruk Objektlagring (AWS S3, Google Cloud Storage, DigitalOcean Spaces).

Plugins som WP Offload Media eller Media Cloud er standarder her.

• Fordel: Tilstandsløse servere (enkel å skalere).
• CDN: Lever filer direkte fra et globalt CDN, utenom serveren din.

Oppsummering

1. Bruk jpeg_quality og WebP-filtre for innebygd komprimeringskontroll.
2. Fjern ubrukte bildestørrelser for å spare diskplass.
3. Håndter loading="lazy" forsiktig – aldri på Hero-bildet.
4. Last over til S3 når du skalerer opp.

Optimalisering handler ikke om å legge til plugins; det handler om å konfigurere kjernen til å være effektiv.