Bilder är ofta den tyngsta delen av en sida. Gör fel här och webbplatsen känns seg innan någon hunnit läsa en rad. Gör rätt och prestanda, tillgänglighet och visuell kvalitet förbättras samtidigt.

Välj rätt format

JPEG fungerar fortfarande bra för fotografier, men moderna format som WebP och AVIF ger ofta samma visuella kvalitet med betydligt mindre filstorlek. Vi exporterar bilder i rimliga dimensioner och låter webbläsaren välja rätt variant för varje skärm.

Anpassa storleken efter hur bilden faktiskt visas

Ett vanligt misstag är att ladda upp ett foto på 4000 pixlar i bredd och låta CMS:et krympa det i layouten. Webbläsaren laddar ändå ner mer data än som behövs. Beskär och skala innan uppladdning, eller generera responsiva varianter via CDN eller build pipeline.

Lazy loading och prioritet

Alla bilder ska inte laddas direkt. Innehåll under fold kan lazy loadas medan hero-bilder och logotyper ovanför fold bör laddas med prioritet. Balansen håller första renderingen snabb utan att sidan känns tom.

Alt-text och sammanhang

Alt-text är inte en SEO-kryssruta. Den beskriver bilden för personer som inte kan se den och ger sökmotorer sammanhang. Skriv den som en kort bildtext: vad som är viktigt i bilden och varför den finns på sidan.

Headless och bildleverans

I headless-upplägg ligger bilderna ofta i WordPress medan frontend körs i Nuxt eller annat ramverk. Frontend behöver publika URL:er, vettig cache och en tydlig optimeringsstrategi. När media ligger bakom inloggning eller proxy:as fel går alla bilder sönder samtidigt. Därför behandlar vi bildleverans som en del av arkitekturen, inte som en eftertanke.

Känns sidan seg? Börja med bilderna. I de flesta projekt ger ett fokuserat pass på format, storlek och leverans tydligare effekt än ännu ett plugin.