Moderne WordPress medieoptimalisering med WebP og AVIF

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.

Explore os nossos otimização de velocidade WordPress para levar o seu projeto mais longe.