Kortfattat: Rätt pixelmått och filstorlek gör sidan snabbare utan att bilderna blir suddiga på stora skärmar.
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. Prioritera särskilt hero- och produktbilder.
Optimera bilden före uppladdning
Välj rimliga pixelmått utifrån var bilden ska visas, komprimera filen och använd ett modernt format när stödet är tillräckligt. Ett fotografi behöver normalt inte samma behandling som en logotyp eller illustration. Beskrivande filnamn och ALT-text hjälper både tillgänglighet och administration.
Rekommenderat arbetsflöde för bilder
Beskär bilden till rätt proportion, skala ned den till en rimlig maximal bredd och jämför kvalitet vid olika komprimeringsnivåer. Ange en ALT-text som beskriver bildens funktion i sammanhanget. Kontrollera därefter vilken fil webbläsaren faktiskt hämtar och att huvudbilden inte lazy-loadas om den är sidans LCP-element.
Kontrollera visningen på olika skärmar
Granska skärpa, beskärning och filstorlek på mobil och dator. WordPress kan skapa flera bildstorlekar och webbläsaren kan välja mellan dem med srcset. Undvik att ladda en mycket stor originalbild när den endast visas som en liten miniatyr.
Fördjupa dig i relaterade guider
Ämnet hänger ihop med flera delar av en modern företagshemsida. Läs vidare om Vad är WebP?, Vad är AVIF?, Hur komprimerar man bilder?. Genom att kontrollera helheten minskar risken att en isolerad ändring skapar problem för indexering, säkerhet, e-post eller prestanda.
Sammanfattning
Rätt pixelmått och filstorlek gör sidan snabbare utan att bilderna blir suddiga på stora skärmar. Arbeta stegvis, dokumentera nuläget och kontrollera resultatet efter varje förändring. För företag är en hållbar lösning en som både fungerar för besökaren i dag och är enkel att underhålla när webbplatsen utvecklas vidare.
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.
Frågor och svar
Vanliga frågor om hur stora ska bilder vara på en hemsida?
Vad bör jag kontrollera först?
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.
Hur vet jag att det fungerar?
Testa den berörda funktionen i ett privat webbläsarfönster, på mobil och dator, och kontrollera relevanta loggar eller verifieringsverktyg.
När bör jag ta hjälp?
Ta hjälp när ändringen påverkar försäljning, e-post, indexering, säkerhet eller hela webbplatsens tillgänglighet och du saknar en verifierad backup.