Nybörjarguide till WordPress bildstorlekar (+ bästa praxis)

Varje WordPress-nybörjare förstår detta bilddilemma: ladda upp foton som är för små och de ser suddiga ut, ladda upp dem för stora och din webbplats blir smärtsamt långsam.

På WPBeginner har vi arbetat med att perfektionera bildstorlekar på vår egen blogg, och ser till att de alltid ser bra ut och inte saktar ner vår sidladdningstid.

Under resans gång har vi lärt oss några enkla sätt att välja de bästa bildstorlekarna för ett rent, professionellt utseende och en bra användarupplevelse.

Att få detta rätt har varit en spelväxlare för vår webbplats övergripande utseende. 🎨

I den här nybörjarguide delar vi med oss av allt om WordPress bildstorlekar. Du kommer att lära dig standarddimensionerna som fungerar bäst, hur du optimerar bilder för olika skärmstorlekar och de enkla teknikerna som gör din webbplats både vacker och blixtsnabb.

Vad är en bildstorlek?

Bildstorlek avser vanligtvis bredden och höjden på en bild mätt i pixlar. Till exempel betyder 1600×900 pixlar att en bild är 1600 pixlar bred och 900 pixlar hög. Dessa mått kallas även bilddimensioner.

I grund och botten har en bild med större dimensioner fler pixlar, vilket ökar bildfilens storlek.

Bildfilstorlek är det utrymme en bildfil upptar på en dator, och det mäts i byte. Till exempel, 100 KB (kilobyte).

Om en bild har en stor filstorlek, kommer det att ta längre tid för användare att ladda ner den och kan påverka din webbplats hastighet och prestanda. Därför är det viktigt att hålla bildfilstorleken så liten som möjligt samtidigt som bilden behåller rätt dimensioner.

Det är här bildfilformaten kommer in i bilden.

Bildfilformat definierar hur bilddata lagras och komprimeras. JPEG och PNG är de vanligaste du kommer att se online.

Bilder som fotografier som innehåller fler färger kan komprimeras bättre med filformatet JPEG. Å andra sidan kan bilder som illustrationer med färre färgdeta­ljer använda PNG för bästa resultat.

För mer information kan du kolla in vår artikel om WebP vs PNG vs JPEG: de bästa bildfilformaten för WordPress.

Med det i åtanke, här är en snabb översikt över de saker vi kommer att gå igenom i den här artikeln:

• Vilken storlek ska mina bilder ha för min WordPress-webbplats?
• Vilka bildstorlekar ska jag använda i blogginlägg?
• Vilka bildstorlekar ska jag använda för utvalda bilder?
• Vilka bildstorlekar ska jag använda för sociala medier?
• Vilken bildstorlek ska jag använda för min webbplatslogotyp i WordPress?
• Bonustips: Redigera bilder för din WordPress-webbplats
• Vanliga frågor om WordPress bildstorlekar
• Ytterligare resurser om WordPress-bilder

Redo? Låt oss börja.

Vilken storlek ska mina bilder ha för min WordPress-webbplats?

För en genomsnittlig WordPress-webbplats kommer du att använda bilder på flera områden på din webbplats. Du behöver bilder för dina blogginlägg, miniatyrer, sidhuvuden, omslagsbilder och mer.

WordPress hanterar automatiskt vissa av bildfilstorlekarna som standard. När du laddar upp en bild, skapar WordPress automatiskt flera kopior i olika storlekar.

Du kan visa och till och med justera standard WordPress-bildstorlekar genom att besöka sidan Inställningar » Media i WordPress-administrationsområdet.

Här ser du tre bildstorlekar: miniatyr, medium och stor.

Ditt WordPress-tema kan dock skapa sina egna ytterligare bildstorlekar och använda dem för olika delar av din webbplats.

Dessa storlekar kommer inte att synas på skärmen ‘Media’, och det enda sättet att se dessa ytterligare storlekar är genom att gå till ‘Filhanteraren’ på ditt WordPress-värdkonto.

Navigera sedan till mappen /wp-content/uploads/ och välj en årsmapp där för att bläddra. Detta hjälper dig att se alla olika bildstorlekar som din WordPress-webbplats genererar.

Nu ska vi titta på olika områden på din webbplats och vilka bildstorlekar du bör använda i dessa områden.

Vilka bildstorlekar ska jag använda i blogginlägg?

Du bör välja bildstorlek för dina blogginlägg baserat på ditt WordPress-tema.

Till exempel kommer vissa WordPress-teman med en layout med en kolumn, vilket gör att du kan använda bredare bilder.

Vissa andra WordPress-teman använder flerkolumnslayouter, som vanligtvis består av ett innehållsområde och en sidopanel.

Om du använder den här typen av tema måste du justera bildbredden därefter.

För de flesta bloggar kan du använda följande bildstorlekar:

• Enkolumnslayout: 1200×675 pixlar
• Tvåkolumnslayout: 680×382 pixlar

Nu kanske du märker att många populära WordPress-webbplatser använder samma bildbredd för alla sina bilder inuti en artikel. Observera att detta inte är en strikt regel.

Om du till exempel behöver lägga till ett block för 'Media och text', kan du justera bildstorleken därefter. I exemplet nedan använder vi en porträttbild bredvid lite text.

På samma sätt kanske du vill använda fyrkantiga bilder för vissa situationer.

Glöm dock inte att se till att bilddimensionerna har samma bredd och höjd, till exempel 300 x 300 pixlar. Här är till exempel ett exempel på fyrkantiga bilder som används i en layout med flera kolumner.

Vilka bildstorlekar ska jag använda för utvalda bilder?

Det finns ingen universell lösning, men en bra utgångspunkt är 1200×628 pixlar eller 680×382 pixlar för ett 16:9-format.

Med det sagt, utvalda bilder (även kallade miniatyrbilder för inlägg) styrs av ditt tema. Vissa teman kan beskära eller sträcka bilder. Så det är bäst att kontrollera din temadokumentation eller experimentera med några storlekar för att se vad som fungerar bäst.

Utvalda bilder är viktiga eftersom ditt WordPress-tema kan använda dem i olika delar av din webbplats. De är ofta det första dina besökare ser, så du vill göra ett gott första intryck.

Vi rekommenderar att använda större bilder, som kan se vackra ut oavsett om de skalas ner eller används i bredare lägen.

På samma sätt, om ditt WordPress-tema använder fyrkantiga bilder för utvalda bilder, rekommenderar vi att du använder bilder som är minst 600×600 pixlar.

• För teman som använder rektangulära utvalda bilder: 1200×687 pixlar
• För teman som använder fyrkantiga framhävda bilder: 600×600 pixlar

Ditt WordPress-tema kommer att generera ytterligare storlekar för utvalda bilder att använda på olika platser, som hemsidan, bloggsidan eller arkivsidor.

Vilka bildstorlekar ska jag använda för sociala medier?

Nu, om ditt WordPress-tema använder utvalda bilder som har ett bildförhållande på 16:9, då kan du också använda dem som bilder för sociala medier för X (tidigare Twitter) och Facebook.

Du måste dock explicit tala om för dessa plattformar vilken bild du vill visa när någon delar en artikel från din webbplats.

För att göra det behöver du All in One SEO-pluginet för WordPress. Det är det bästa WordPress SEO-pluginet på marknaden och används av över 3 miljoner webbplatser. Detta plugin kan hjälpa dig att optimera din webbplats för sökmotorer och sociala medieplattformar.

På WPBeginner är vi stora fans av AIOSEO själva och använder det för många uppgifter. De inkluderar hantering av våra XML-webbkartor, metadeskriptioner, titeltaggar och OpenGraph-inställningar för Facebook och X. För mer information om pluginet, se vår kompletta AIOSEO-recension.

För att komma igång behöver du installera och aktivera All in One SEO-pluginet. För mer information kan du se vår steg-för-steg-guide om hur man installerar ett WordPress-plugin.

Vid aktivering startar pluginet installationsguiden. Följ helt enkelt instruktionerna på skärmen för att slutföra processen. Du kan också se vår guide om hur du ställer in All in One SEO för mer detaljerade instruktioner.

Därefter måste du besöka sidan All in One SEO » Sociala nätverk och växla till fliken Facebook. Härifrån kan du ställa in ‘Utvald bild’ som din standardkälla för Open Graph-bild.

Du kan sedan växla till X(Twitter)-fliken och göra detsamma.

Glöm inte att klicka på knappen ‘Spara ändringar’ för att spara dina inställningar.

Nu, om ditt WordPress-tema använder bilder i en annan storlek, kan Facebook och Twitter kanske inte visa dessa bilder korrekt.

I så fall kan du förse sociala medieplattformar med en anpassad bild.

Skapa helt enkelt en bild med ett bildförhållande på 16:9, vilket kan vara 1200×675 pixlar eller 680×382 pixlar. Redigera sedan inlägget eller sidan och rulla ner till avsnittet 'AIOSEO-inställningar' under innehållsredigeraren.

Härifrån måste du växla till fliken 'Social' och skrolla ner till fältet 'Bildkälla'. Från rullgardinsmenyn väljer du 'Anpassad bild' och laddar sedan upp din Facebook-bild.

När du är klar kan du upprepa processen även i fliken 'Twitter'.

Notera att du måste göra detta för alla artiklar du publicerar för att säkerställa att sociala medier använder den bild du vill att de ska använda. För fler bildstorlekar för sociala medier, se vårt fuskblad för sociala medier i WordPress för nybörjare.

Vilken bildstorlek ska jag använda för min webbplatslogotyp i WordPress?

En bra startstorlek för en WordPress-logotyp är 300×200 pixlar. Den ideala storleken kan dock variera beroende på ditt tema.

Många WordPress-teman rekommenderar en specifik logotypstorlek under uppladdning. Till exempel kan vissa visa ett meddelande som föreslår de optimala dimensionerna.

Om du däremot använder ett nyare WordPress-tema med funktion för fullständig webbplatsredigering, kanske du inte får en rekommendation för logotypbildens storlek.

I så fall rekommenderar vi att du laddar upp olika stilar och storlekar för att se vad som ser bäst ut för ditt varumärke. En logotypbildstorlek på 300×200 pixlar kan vara en bra utgångspunkt.

Bonustips: Redigera bilder för din WordPress-webbplats

Vi förstår att de flesta WordPress-användare inte är professionella grafiska designers. Att lära sig använda bildredigeringsprogram för att skala bildstorlekar för din webbplats är dock en bra färdighet att ha, och det är väldigt enkelt att göra.

WordPress i sig levereras med några grundläggande verktyg för bildredigering. För att använda dem, gå helt enkelt till sidan Media » Bibliotek och klicka på en bild.

Detta öppnar bilden i ett popup-fönster, där du ser en knapp för att redigera bilden.

När du har gjort det bör du se redigeringsalternativen.

Redigeringsverktygen inkluderar grundläggande storleksändring, beskärning, rotation och spegelvändning av bilder.

Den här grundläggande bildredigeringen är användbar om du snabbt behöver åtgärda ett bildproblem. Det är dock inte det bästa sättet att redigera dina bilder dagligen.

Lyckligtvis finns det flera gratis och billiga alternativ som du kan använda:

• Canva – En gratis webbaserad bildredigeringsprogramvara. Den innehåller också färdiga mallar för webbplatsbilder, logotyper, bilder för sociala medier och mer.
• Pixlr – En freemium webbaserad bildredigeringsprogramvara. Den kan användas för att enkelt ändra storlek på bilder för dina blogginlägg.
• Gimp – Gratis och öppen källkods bildredigeringsprogramvara. Detta verktyg fungerar som en inbyggd skrivbordsapp på Windows, Mac och Linux. Det kan användas för att ändra storlek på bilder, lägga till textlager, redigera foton och mer.

För mer om detta ämne kan du se vår guide om hur man gör grundläggande bildredigering i WordPress.

Vanliga frågor om WordPress bildstorlekar

Efter att ha hjälpt tusentals användare att få sina webbplatser att fungera smidigt har vi besvarat vår beskärda del av frågor om bilder. Här är några av de vanligaste vi hör.

Vilket är det bästa bildformatet: JPEG, PNG eller WebP?

Det bästa formatet beror på bildtypen. JPEG är utmärkta för fotografier med många färger eftersom de erbjuder bra komprimering utan stor kvalitetsförlust.

PNG är idealiska för grafik, logotyper och illustrationer med enfärgade eller transparenta bakgrunder. WebP är ett modernt format som ger utmärkt komprimering för båda typerna av bilder, men du kan behöva ett plugin för att visa dem på din webbplats.

Behöver jag ett plugin för bildoptimering?

Även om du kan optimera bilder manuellt innan du laddar upp dem, kan användning av ett plugin spara dig mycket tid. Bildoptimeringsplugins komprimerar automatiskt dina bilder för att minska filstorleken utan att förlora visuell kvalitet.

Många populära cachningsplugins, som WP Rocket, inkluderar funktioner för bildoptimering. Detta hjälper dina sidor att laddas snabbare, vilket är bra för både användarupplevelsen och SEO.

Vad är skillnaden mellan bilddimensioner och filstorlek?

Bilddimensioner är bredden och höjden på en bild, mätt i pixlar (t.ex. 1200 x 675 pixlar). Dessa avgör hur stor bilden visas på skärmen.

Filstorlek är mängden lagringsutrymme som bilden tar upp, mätt i kilobyte (KB) eller megabyte (MB). Större dimensioner leder vanligtvis till en större filstorlek, vilket kan sakta ner din webbplats.

Hur hittar jag rätt bilddimensioner för mitt tema?

Det enklaste sättet är att kontrollera ditt temas dokumentation, som ofta anger rekommenderade bildstorlekar.

Om du inte hittar det där kan du använda webbläsarens utvecklarverktyg. Högerklicka helt enkelt på ett bildområde på din webbplats (som innehållsområdet) och välj 'Inspektera'. Detta visar dig de exakta måtten på behållaren, vilket ger dig en målstorlek att sikta på.

Ytterligare resurser om WordPress-bilder

Vi hoppas att den här guiden hjälpte dig att bemästra WordPress bildstorlekar. Om du vill lära dig mer, här är några andra artiklar som du kan finna hjälpsamma:

• Hur man lägger till förstoringsglas för bilder i WordPress
• Hur man lägger till bildtexter till utvalda bilder i WordPress
• Hur man använder AI för att generera bilder i WordPress
• Hur man lägger till SVG-bildfiler i WordPress
• Bild Alt-text vs Bildtitel i WordPress
• Hur man optimerar bilder för webbprestanda utan att förlora kvalitet
• Bästa platserna att hitta gratis bilder i public domain för din blogg
• Hur man fixar att utvalda bilder inte visas i WordPress
• Hur man åtgärdar problem med bilduppladdning i WordPress

Om du gillade den här artikeln, prenumerera då på vår YouTube-kanal för WordPress-videoguider. Du kan också hitta oss på Twitter och Facebook.