Hur man lägger till bilder korrekt i WordPress (steg för steg)

Att hitta den perfekta bilden för ditt WordPress-inlägg är en fantastisk känsla, men det kommer ofta med en gnagande oro för att sakta ner din webbplats eller skada din SEO.

Det är en giltig oro, eftersom fel tillvägagångssätt kan leda till frustrerade besökare och lägre sökrankningar. Vi vet hur avgörande det är att få denna balans rätt för en framgångsrik webbplats.

Genom vår erfarenhet av att hantera tusentals artiklar har vi utvecklat en enkel process som gör att sidorna laddas snabbt samtidigt som bilder fungerar för din SEO. Det är metoden vi litar på varje dag.

I den här guiden går vi igenom dessa exakta steg. Du kommer att lära dig hur du lägger till bilder på ett sätt som hjälper din webbplats att växa.

Vikten av att ladda upp bilder korrekt i WordPress

Ibland kopierar användare en bild direkt från källan och klistrar in den i sitt webbplatsinnehåll. Tyvärr kan detta orsaka problem som långsamma sidor, dålig användarupplevelse och dålig SEO.

När du lägger till bilder på din WordPress-webbplats är det viktigt att göra det på rätt sätt. Det innebär att använda rätt filformat, filnamn och alternativ text.

Du bör också använda beskrivande filnamn för bilder. Till exempel, istället för att ladda upp en generell fil som IMG_9021.jpg, bör du byta namn på den till något beskrivande som chocolate-chip-cookie-recipe.jpg innan du laddar upp den.

Detta enkla steg ger sökmotorer en ledtråd om vad bilden är, vilket kan hjälpa din SEO.

Att lägga till bilder på rätt sätt innebär också att ändra storlek på dina bilder så att de laddas snabbt och ser bra ut på alla enheter. Till exempel är vissa bildformat som JPEG mer komprimerade än andra. Det betyder att JPEG-bilder tar upp mindre utrymme på din server och tar mindre tid att ladda.

Genom att använda dessa format, tillsammans med ett plugin för bildkomprimering, kan du förbättra användarupplevelsen på din webbplats.

WordPress bildblock låter dig manuellt lägga till viktig SEO-information som alt-text till varje bild. Detta kan öka din webbplats ranking och förbättra tillgängligheten på dina webbsidor för personer med funktionsnedsättningar.

Med det sagt, låt oss se hur man lägger till bilder korrekt i WordPress. Vi kommer att täcka flera metoder, och du kan använda snabblänkarna nedan för att hoppa till de olika avsnitten i vår handledning:

• Hur man lägger till bilder i blockredigeraren (Gutenberg)
• Hur man lägger till bilder i den klassiska redigeraren
• Lägg till bilder i WordPress mediebibliotek
• Hur man optimerar en bild för WordPress SEO
• Bonus: Låt användare ladda upp bilder i WordPress
• Vanliga frågor om att lägga till bilder i WordPress

Hur man lägger till bilder i blockredigeraren (Gutenberg)

Du kan enkelt lägga till bilder i WordPress blockredigerare genom att använda Bildblocket.

Först måste du öppna den befintliga eller nya sidan/inlägget där du vill lägga till en bild.

När du är där, klicka på knappen 'Lägg till block' (+) längst upp till vänster på skärmen för att öppna blockmenyn. Härifrån behöver du hitta blocket 'Bild' och lägga till det i inlägget eller sidan.

När du har gjort det klickar du på knappen 'Mediebibliotek' för att öppna prompten 'Välj eller ladda upp media' på skärmen.

Här kan du växla till fliken ‘Ladda upp filer’ om du vill ladda upp en bild från din dator.

Om du däremot vill lägga till en bild från mediebiblioteket kan du också göra det genom att växla till fliken 'Mediebibliotek'.

I panelen ‘Bilduppgifter’ till höger kan du lägga till viktig information. Se till att fylla i fältet ‘Alt-text‘ med en kort beskrivning av vad bilden visar. Detta är avgörande för SEO och för besökare som använder skärmläsare.

Du kan också lägga till en 'Titel', som visas när någon hovrar över bilden, och en 'Bildtext', som är en synlig beskrivning som visas direkt under bilden.

För mer information kan du se vår nybörjarguide om hur man lägger till bildtexter till bilder i WordPress.

Klicka sedan bara på knappen 'Välj' för att lägga till bilden på din sida eller ditt inlägg.

Nu när du har laddat upp den kan du ytterligare anpassa bildstorlek, dimensioner, kantlinje och stil från blockpanelen till höger.

För mer information, kolla in vår handledning om hur man lägger till och justerar bilder i WordPress.

Klicka slutligen på knappen ‘Uppdatera’ eller ‘Publicera’ för att spara dina inställningar.

Du har nu korrekt lagt till en bild i Gutenberg-redigeraren.

Hur man lägger till bilder i den klassiska redigeraren

Om du fortfarande använder den gamla klassiska redigeraren i WordPress, kan du använda den här metoden.

Först måste du besöka sidan eller inlägget där du vill lägga till bilden från WordPress-instrumentpanelen. När du är där klickar du bara på knappen 'Lägg till media' för att starta mediebiblioteket.

Därefter kan du växla till fliken 'Ladda upp filer' för att ladda upp en bild från din dator.

Alternativt, för att lägga till en bild från mediebiblioteket, byt bara till fliken 'Mediebibliotek'.

När du lägger till en bild måste du lägga till alt-text och en titel för den. Du kan också lägga till en beskrivning och bildtext om du vill.

För bästa resultat, använd varje fält för sitt specifika syfte. Alt-texten bör tydligt beskriva bilden för sökmotorer och synskadade användare.

Bildtexten är en synlig beskrivning för dina läsare, och titeln kan ge extra information när någon hovrar över bilden på en stationär dator.

Klicka sedan på knappen 'Infoga i inlägg'.

Nu kommer bilden att läggas till ditt WordPress-inlägg eller din sida.

Härifrån kan du ändra dess justering genom att använda justeringsikonerna ovanför bilden. Du kan redigera en bild ytterligare genom att klicka på pennikonen.

Detta öppnar prompten ‘Bilddetaljer’ på din skärm, där du kan ändra storlek och lägga till bildtitelattribut, CSS-klasser, justering och mer.

När du är klar, klicka bara på knappen 'Uppdatera' för att spara ändringarna du har gjort.

Klicka sedan helt enkelt på knappen 'Publicera' eller 'Uppdatera' för att spara ditt inlägg.

Lägg till bilder i WordPress mediebibliotek

En annan metod är att ladda upp bilder direkt till ditt mediabibliotek först. Detta är ett utmärkt sätt att förbereda och organisera dina bilder innan du lägger till dem i ett inlägg eller en sida.

För att lägga till en bild från mediebiblioteket måste du besöka sidan Media » Lägg till ny från WordPress-administrationsområdet.

När du är där, klicka på knappen 'Välj filer' för att ladda upp en bild från din dator. Klicka sedan på länken 'Redigera' bredvid bilden.

Detta tar dig till sidan ‘Redigera media’, där du kan börja med att ändra titeln för bilden. Därefter kan du scrolla ner för att lägga till alt-text, en bildtext och en beskrivning.

När du har gjort det kan du också klicka på knappen 'Redigera bild'.

Detta tar dig till en annan sida, där du kan beskära, skala, rotera eller vända bilden enligt dina önskemål. För detaljerade instruktioner, se vår nybörjarguide om hur man gör grundläggande bildredigering i WordPress.

När du är nöjd klickar du bara på knappen 'Uppdatera' för att spara dina ändringar.

Detta tar dig tillbaka till sidan 'Redigera media', där du måste klicka på knappen 'Uppdatera' igen för att spara dina inställningar.

Du har nu framgångsrikt lagt till en bild i mediebiblioteket.

Besök sedan inlägget där du vill lägga till den här bilden från WordPress admin-sidofältet. När du är där klickar du på knappen 'Lägg till block' (+) för att lägga till ett 'Bild'-block i inlägget.

Därefter måste du välja knappen 'Mediebibliotek'.

Detta kommer att starta prompten 'Välj eller ladda upp media' på din skärm, där du kommer att märka bilden som du laddade upp i mediebiblioteket högst upp.

När du väljer den ser du att dess titel, alternativtext, bildtext och beskrivning redan har lagts till från sidan för mediebiblioteket.

Klicka nu bara på knappen 'Välj' för att ladda upp bilden till blockredigeraren.

Klicka slutligen på knappen 'Publicera' eller 'Uppdatera' för att spara dina inställningar.

Hur man optimerar en bild för WordPress SEO

När du har lagt till en bild i ett inlägg/en sida är det också avgörande att optimera den för sökmotorer. Tyvärr erbjuder WordPress inga inbyggda avancerade SEO-funktioner för bilder.

Det är här All in One SEO för WordPress (AIOSEO) kommer in.

Det är det bästa WordPress SEO-pluginet på marknaden eftersom det gör det superenkelt att optimera ditt innehåll, inklusive bilder, för sökmotorer.

På WPBeginner har vi använt det för att förbättra våra sökrankningar och har sett fantastiska resultat. För att få veta mer om vår erfarenhet, se vår AIOSEO-recension.

Först måste du installera och aktivera AIOSEO-pluginet. För fler instruktioner, se vår steg-för-steg-guide om hur man installerar ett WordPress-plugin.

Vid aktivering måste du konfigurera installationsguiden.

För mer information, se vår guide om hur du ställer in All in One SEO för WordPress korrekt.

Gå sedan till sidan All in One SEO » Sökutseende från sidofältet i WordPress-administrationen och växla till fliken 'Bild-SEO'.

Efter det, scrolla ner och klicka på knappen 'Aktivera bild-SEO' för att låsa upp funktionen.

Du kommer nu att kunna se inställningarna för bild-SEO. Här kommer du att märka olika flikar för titel, alt-text, bildtext, beskrivning och filnamn.

Konfigurera automatiska bildtitlar

När du växlar till fliken 'Titel' på sidan Bild-SEO kan du börja med att skapa ett titelformat för dina bilder med hjälp av smarta taggar.

Dessa smarta taggar kommer sedan automatiskt att generera titelattribut för dina bilder. Detta är vad en besökare kommer att se när de för muspekaren över dina bilder.

Om du till exempel vill att varje bilds titelattribut ska använda bildtiteln och webbplatsens titel, kan du lägga till dessa smarta taggar i fältet 'Titelformat'.

Detta innebär att en bild med titeln 'Chocolate Chip Cookie' på en webbplats som heter 'My Awesome Blog' automatiskt skulle få ett bildtitelattribut på 'Chocolate Chip Cookie – My Awesome Blog.'

Därefter kan du också aktivera alternativet Ta bort skiljetecken om du vill att AIOSEO automatiskt ska ta bort vissa tecken när du skapar en bildtitel från filnamnet.

Till exempel, om du använder bindestreck när du sparar en bildfil som 'ett-exempel-bild', kan du välja alternativet 'Bindestreck (-)' i avsnittet 'Tecken att konvertera till mellanslag'.

När du har gjort det kommer AIOSEO automatiskt att ta bort dessa bindestreck och omvandla dem till mellanslag. Detta är användbart eftersom det automatiskt konverterar ett filnamn som 'en-exempelbild.jpg' till en ren, läsbar titel som 'en exempelbild', vilket är bättre för både användare och sökmotorer.

Skrolla sedan ner till avsnittet 'Casing'.

Härifrån kan du välja ett formateringsalternativ för din titel. Vi rekommenderar att du väljer meningformatering eller rubrikformatering för att göra dina titlar mer läsbara.

Konfigurera automatiska alt-taggar

Efter att ha konfigurerat titelinställningarna, byt till fliken 'Alt-text' högst upp.

Härifrån kan du använda de smarta taggarna bredvid alternativet 'Alt-taggformat' för att automatiskt generera alt-text för alla dina bilder.

Därefter kan du även aktivera inställningen 'Ta bort skiljetecken' om du vill att tecken som bindestreck (-) eller understreck (_) ska konverteras till mellanslag.

På samma sätt, om det finns tecken som siffror eller plustecken (+) som du inte vill att AIOSEO ska ta bort när alt-text skapas, kan du markera rutorna för dessa alternativ i avsnittet ‘Tecken att exkludera från att tas bort’.

Du kan också välja en versalisering för din alt-text.

Konfigurera automatiska bildtexter och beskrivningar

För att generera automatiska bildtexter för dina bilder, växla till fliken 'Bildtexter'.

Se här till att alternativet 'Autogenerera bildtext vid uppladdning' är aktiverat. Du kan sedan välja de smarta taggar som kommer att användas för att generera bildtexter för dina bilder.

Därefter kan du också använda funktionen Ta bort skiljetecken för att utesluta eller inkludera tecken i bildtexterna och välja ett skiftläge för dem.

När du är klar måste du växla till fliken ‘Beskrivning’ högst upp.

Se här till att alternativet 'Autogenerera beskrivning vid uppladdning' är aktiverat. Du måste också välja smarta taggar du vill använda för att generera automatiska bildbeskrivningar.

Därefter kan du också använda funktionen 'Ta bort skiljetecken' för att inkludera/exkludera tecken som understreck, apostrofer eller siffror i beskrivningen.

Därefter väljer du helt enkelt en formatering för dina bildbeskrivningar.

Konfigurera automatiska filnamn

Som vi nämnde tidigare rekommenderar vi att ge dina bildfiler SEO-vänliga filnamn. Du kan göra detta innan du laddar upp dina bilder, eller AIOSEO kan göra det åt dig automatiskt.

När du växlar till fliken 'Filnamn' ser du att AIOSEO tillhandahåller standardinställningar för 'Ta bort skiljetecken' som hjälper dig att komma igång.

Om det dock finns fler tecken som du vill att AIOSEO ska ta bort från dina bildfilnamn när du skapar titlar eller alt-text, kan du skriva in dessa tecken i rutan 'Ord att ta bort'.

Därefter kan du också välja ett skiftläge för dina filnamn.

När du är klar, glöm inte att klicka på knappen 'Save Changes' för att spara dina inställningar.

Du har nu optimerat dina bilder framgångsrikt för SEO, och AIOSEO kommer automatiskt att generera titlar, alt-texter, bildtexter och beskrivningar för alla dina bilder.

För mer detaljerade instruktioner, se vår nybörjarguide om hur man optimerar bilder för sökmotorer.

Bonus: Låt användare ladda upp bilder i WordPress

Du kanske också vill tillåta dina användare att ladda upp sina egna bilder till din WordPress-blogg. Detta kan vara användbart om du anordnar en tävling eller driver en fotowebbplats som accepterar användargenererade bilder.

För detta kan du använda WPForms, som är det bästa kontaktformulärpluginet på marknaden. Det levereras med en dra-och-släpp-byggare som gör det superenkelt att skapa alla typer av formulär, inklusive ett formulär för bilduppladdning.

Vi har använt pluginet för att skapa kontaktformulär och årliga undersökningar för vår webbplats, och vi älskar hur det låter oss se formulärinlägg direkt i WordPress-instrumentpanelen.

För att lära dig mer, se vår WPForms-recension.

Först måste du installera och aktivera pluginet WPForms. För detaljer, se våra instruktioner om hur man installerar ett WordPress-plugin.

Efter aktivering, gå till skärmen WPForms » Lägg till ny från WordPress-instrumentpanelen för att starta formulärbyggaren.

Härifrån behöver du skriva ett namn för ditt formulär och sedan klicka på knappen 'Använd mall' under mallen 'Enkelt kontaktformulär'.

Detta laddar mallen i formulärbyggaren, där du kommer att märka dess förhandsgranskning till höger och de tillgängliga fälten i den vänstra kolumnen.

Härifrån, dra och släpp fältet ‘Filuppladdning’ till formuläret och klicka på det för att ytterligare anpassa dess inställningar.

Du kan ändra etiketten och beskrivningen för fältet och till och med ange vilka filändelser som är tillåtna.

Om du till exempel bara vill tillåta JPEG- och PNG-filer måste du skriva dessa alternativ i fältet 'Tillåtna filändelser'. Tänk på att du måste separera varje ändelse med ett kommatecken.

Därefter kan du även konfigurera maximal bildfilstorlek och antal uppladdningar i den vänstra kolumnen.

För mer detaljerade instruktioner kan du titta på vår handledning om hur man tillåter användare att ladda upp bilder i WordPress.

När du är klar klickar du bara på knappen 'Spara' för att lagra dina inställningar.

Öppna sedan sidan/inlägget där du vill lägga till formuläret för bilduppladdning. När du är där, klicka på ‘+’-knappen i det övre vänstra hörnet av skärmen för att öppna blockmenyn.

Härifrån behöver du lägga till WPForms-blocket på sidan/inlägget.

Välj bara formuläret för uppladdning av bildfiler som du skapade från rullgardinsmenyn.

Slutligen, klicka på knappen ‘Uppdatera’ eller ‘Publicera’ för att spara dina inställningar. Nu kan du besöka din WordPress-webbplats för att se formuläret i aktion, och besökare kommer att kunna skicka in sina bilder med hjälp av formuläret.

Vanliga frågor om att lägga till bilder i WordPress

Vårt expertteam får ofta frågor om det bästa sättet att hantera bilder. Nedan finns svar på några av de vanligaste frågorna vi hör.

1. Vilket är det bästa bildfilformatet för WordPress?

Det bästa formatet beror på bilden. JPEG är utmärkt för fotografier med många färger eftersom de balanserar kvalitet och filstorlek väl. PNG är perfekt för grafik som behöver en transparent bakgrund, som logotyper. WebP är ett nyare format som erbjuder utmärkt komprimering men kanske inte stöds av mycket gamla webbläsare. Som en enkel regel: använd JPEG för foton och använd PNG för logotyper eller bilder som behöver transparens.

2. Hur kan jag få mina bilder att laddas snabbare på min webbplats?

De två viktigaste stegen är att ändra storlek och komprimera dina bilder. Ändra alltid storlek på bilder till rätt dimensioner med ett redigeringsverktyg innan uppladdning.

Använd därefter ett dedikerat plugin för bildkomprimering, som automatiskt minskar filstorleken ytterligare utan märkbar kvalitetsförlust, vilket gör att dina sidor laddas mycket snabbare.

3. Vad är skillnaden mellan bildens alt-text och en bildtext?

Alt-text (alternativ text) är ett HTML-attribut som beskriver bilden för sökmotorer och för skärmläsare som används av synskadade besökare. Det är inte synligt på själva sidan. En bildtext är en beskrivning som visas direkt under bilden för alla besökare att se.

4. Kan jag ladda upp flera bilder till WordPress samtidigt?

Ja. I WordPress mediebibliotek kan du helt enkelt dra och släppa flera bildfiler från din dator samtidigt. Du kan också klicka på knappen 'Välj filer' och välja flera bilder att ladda upp tillsammans, vilket sparar mycket tid.

5. Hur skapar jag ett bildgalleri i WordPress?

WordPress har ett inbyggt Galleri-block. Lägg helt enkelt till blocket i ditt inlägg eller din sida, så kan du sedan ladda upp nya bilder eller välja befintliga från ditt mediebibliotek.

Detta kommer att skapa ett vackert, organiserat galleri, och du kan anpassa antalet kolumner direkt i blockinställningarna.

Vi hoppas att den här artikeln hjälpte dig att lära dig hur du lägger till bilder i WordPress på rätt sätt. Du kanske också vill se vår nybörjarguide om hur du hittar vackra bakgrundsbilder för din WordPress-webbplats och vår lista över bra källor för bilder i public domain och med CC0-licens.

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.