Utgå från visad bredd
En fullbreddsbild behöver vara tillräcklig för stora skärmar, ofta 1600–2000 pixlar, medan innehållsbilder sällan behöver samma dimension.
Ladda inte original från kameran direkt.
Använd responsiva bilder
WordPress skapar flera storlekar och srcset låter webbläsaren välja rätt fil. Ange korrekta sizes-värden så att mobilen inte hämtar desktopbilden.
Sätt bredd och höjd
HTML-attribut eller CSS aspect-ratio reserverar plats och minskar layoutförskjutningar, vilket förbättrar CLS.
Filstorlek är lika viktig
En rimlig pixelstorlek kan fortfarande ge en tung fil. Komprimera och använd WebP eller AVIF.
En 1200-pixels innehållsbild och en 1200-pixels thumbnail är inte samma sak
Om artikelkolumnen aldrig blir bredare än 800 pixlar är en 1200-pixels källa ofta tillräcklig för hög pixeldensitet, beroende på design och motiv. Samma fil är däremot onödigt stor om den bara visas 240 pixlar bred i ett kort. Med WordPress bildstorlekar och `srcset` kan samma original ge flera leveransvarianter. Därför bör frågan om ”hur stor bilden ska vara” delas upp i original för redigering, genererade webbvarianter och den fil som webbläsaren faktiskt väljer. Det är den sista som påverkar besökarens nedladdning. Bildoptimering är också redaktionellt arbete.
Utgå från hur stor bilden faktiskt visas i layouten
Det finns ingen universell pixelstorlek för alla webbplatsbilder. En fullbred hero på en stor skärm behöver en större källa än en liten artikelthumbnail.
Kontrollera den största realistiska visningsbredden och ta hänsyn till hög pixeldensitet när det behövs. Ladda inte upp 6000-pixels original bara för att ”vara säker”. Ett genomtänkt bildsystem genererar flera storlekar och låter webbläsaren välja den som passar enheten.
Beskärning är lika viktig som upplösning
Två bilder kan ha samma bredd men fungera helt olika om proportionerna inte passar komponenten.
Bestäm därför fasta bildförhållanden för exempelvis hero, artikelkort och porträtt. Med `object-fit: cover` kan layouten hålla formen, men viktig information nära kanten kan beskäras bort. Redaktören bör veta vilket utsnitt komponenten använder och placera motivet därefter. Det ger jämnare design och minskar behovet av extrema CSS-lösningar.
Mät filstorleken efter export, inte bara dimensionerna
En 1600-pixels bild kan väga 150 kB eller flera megabyte beroende på format, motiv och kvalitet. Pixelmått säger därför inte allt om prestandan. Komprimera och kontrollera den faktiska filen. För stora bilder som ligger i första skärmen är laddningsprioritering särskilt viktig. Testa sidan på mobilnät och se vilken variant som hämtas. Målet är att bilden ska vara tillräckligt skarp där den visas utan att skicka data som aldrig används.
Behöver företaget en bättre hemsida?
Få ett tydligt förslag och fast pris
Vi bygger och förbättrar WordPress-hemsidor med fokus på tydlighet, prestanda, SEO och enkel förvaltning.
Snabb återkoppling
Hjälpte den här artikeln dig?
Din röst sparas anonymt och hjälper oss att förbättra guiderna.