Idag håller vi på att kollapsa Hur man lägger till bilder i WordPress och minska din filstorlek (så att dina sidor och inlägg laddas så snabbt som möjligt).
När du lär dig grunderna i hur man startar en blogg finns det mycket att ta reda på, jag förstår. Vi har pratat om hur du ändrar teckenstorlek, ändrar teckenfärg, gör en länk klickbar och mycket mer här.
Den goda nyheten är att 2020 är det nu väldigt enkelt att lära sig hur man lägger till bilder i WordPress med alla uppdateringar och användbarhetsförbättringar de har sett under det senaste decenniet.
I den här snabba handledningen visar jag hur du lägger till bilder i WordPress-inlägg, både i Classic Editor (som jag föredrar att använda) och genom din nya Gutenberg Editor.
Låt oss nu dyka ner i att lägga till bilder i dina WordPress-inlägg, samtidigt som du minskar dina filstorlekar så mycket som möjligt, för att hålla oss i linje med SEO bästa praxis och hålla dina sidor laddas så snabbt som möjligt.
Hur man lägger till WordPress-bilder (och minskar filstorleken) 2020
- Lägg till bilder till inlägg i den klassiska WordPress-redigeraren
- Lägga till bilder till inlägg i WordPress Gutenberg Editor
- Lägg till en utvald bild till ett inlägg i WordPress
Nu snabbt, innan vi dyker in i den här handledningen om hur man lägger till bilder till WordPress, ska jag visa dig hur du minskar filstorleken på en bild (hjälper dina inlägg laddas snabbare) i två enkla steg.
Installera (gratis) Compress JPEG & PNG Images plugin från Tiny PNG
Du kan ladda ner den kostnadsfria Compress JPEG & PNG Images-plugin för WordPress här från WordPress-plugin-biblioteket.
Alternativt kan du också söka efter plugin-programmet och installera det direkt från din plugin-meny, tillgänglig på vänster sida av din bloggadminsektion här, eller kolla in den här snabba handledningen om hur du installerar ett WordPress-plugin:
När du har installerat plugin-programmet Compress JPEG & PNG Images kommer varje ny bild du laddar upp till din WordPress-blogg att vara automatiskt optimerad och filstorleken minskades så mycket som möjligt utan att kompromissa med kvaliteten på din bild.
Obs: Detta är den överlägset bästa bildkomprimeringsplugin på marknaden. Det tillåter upp till 500 gratis bildkomprimeringar per månad (vilket är mycket mer än du förmodligen behöver) innan du måste uppgradera till en betald plan för $.009/bild utöver dina första 500 varje månad. Det är ett seriöst fynd och du kommer inte hitta ett bättre kompressionsplugin som ger dig fler gratiskrediter.
Men om du vill göra bildkomprimering direkt på din egen dator (obegränsat gratis) rekommenderar jag ImageOptim-appen.
Ladda upp dina bilder
Det är! Seriöst, det är så enkelt.
När du har installerat komprimeringsplugin på din blogg, eller först har komprimerat de enskilda bilderna på din dator, är du redo att ladda upp dem till dina inlägg eller sidor i WordPress.
Låt oss nu diskutera exakt hur man lägger till bilder till WordPress.
1. Lägg till bilder i inlägg i den klassiska WordPress-redigeraren
Om du är som jag och fortfarande föredrar den klassiska WordPress Editor-layouten för att lägga till/redigera dina inlägg, fortsätt sedan här.
Å andra sidan, om du använder den nyare Gutenberg-redigeraren för ditt inläggsinnehåll, hoppa till nästa avsnitt för den handledningen. Om du inte är säker på vilken editor du använder, ta en titt på skärmdumparna av bilderna nedan och jämför dem med hur din editor ser ut. Vill du använda Classic Editor, men är inte säker på hur du skaffar den? Ta 2 minuter att följa Yoasts enkla handledning om hur du installerar Classic Editor på din WordPress-blogg.
1. Öppna inlägget du lägger till bilder till (och hitta rätt plats)
Först måste du se till att du är inom det inlägg du vill lägga till en bild till.
Därefter vill du flytta markören till den exakta plats i inlägget där du vill lägga till bilden.
2. Klicka på knappen “Lägg till media” högst upp i redigeraren
Den knappen kommer att se ut så här:
När du klickar på knappen “Lägg till media” visas skärmen där du kan ladda upp din bildfil.
3. Klicka på “Ladda upp filer”
Klicka på fliken “Ladda upp filer” så kommer du till skärmen där du kan använda valverktyget för att välja en bildfil där den finns på din dator.
Alternativt, om du ska dra en bildfil från skrivbordet och ladda upp den, kan du hoppa över skärmen “Ladda upp filer” och bara hoppa direkt till att dra bilden och släppa den (det finns en demo av detta i nästa steg).
4. Ladda upp din bildfil
Jag föredrar att dra bildfiler från mitt skrivbord och släppa dem i filuppladdningen (istället för att använda väljaren för att placera dem på min dator), eftersom det går mycket snabbare.
Här är en snabb video/GIF-demo av hur du lägger till en bild från ditt skrivbord till WordPress:
När du har laddat upp din bild kommer komprimeringspluginet att fungera som magi för att minska filstorleken (bakom kulisserna).
Obs: Innan du avslutar dina bildalternativ och klickar på “Infoga i inlägg”, vill du skriva lite SEO-vänlig alt-text för din bild, något som beskriver vad som händer i din bild, helst väva in en av rikta in sökord som du hoppas att artikeln i slutändan kommer att rankas för (i organiska sökresultat).
5. Välj dina bildalternativ och klicka på “Infoga i inlägg”
Slutligen kommer du att ha några alternativ att definiera för din bild. Detta inkluderar:
- Styr justeringen av hur din bild visas i ditt inlägg (jag väljer alltid Center Alignment)
- Låt din bild länka till en annan sida eller inlägg på din blogg (eller en extern länk som du vill hänvisa läsarna till)
- Skärmstorlek (jag rekommenderar alltid att ladda upp i full storlek för att undvika förlust av bildkvalitet)
När du har valt dessa alternativ är du redo att klicka på “Infoga i inlägg” och du är klar!
Den knappen kommer att finnas här i det nedre högra hörnet av skärmen:
Nu kommer du att återgå till ditt redigeringsfönster och se bilden du precis lade till där du laddade upp den.
Observera att du fortfarande har några snabba och enkla redigeringsalternativ om du bestämmer dig för att ändra något med din nya bildskärm:
- Du kan ändra storlek på den manuellt genom att ta tag i ett av hörnen och dra den uppåt eller nedåt.
- Du kan klicka i mitten av bilden och dra den inuti ditt inlägg för att flytta den
- Du kan alltid ta bort bilden genom att klicka på “backsteg” eller “radera” på ditt tangentbord och börja om
Och det är! Du har lärt dig hur du lägger till en bild i WordPress med Classic Editor.
2. Lägg till bilder i inlägg i Gutenberg WordPress Editor
I Gutenberg WordPress Editor kommer dina inläggsredigeringsalternativ att skilja sig mycket från vad du kommer att se i Classic Editor.
Gutenberg tar ett tillvägagångssätt för att lägga till/redigera innehåll genom ett system av “block” såsom textblock, rubrikblock, bildblock, etc. Så låt oss dyka ner i att lägga till bilder i Gutenberg.
1. Välj ikonen “Lägg till bild”.
När du har sett till att du lägger till en bild på rätt plats i ditt inlägg, välj ikonen “Lägg till bild”. Det kommer att se ut så här här:
När du klickar på ikonen “Lägg till bild” har du några alternativ för att lägga till en bild till ditt inlägg.
2. Välj hur du vill lägga till bilden
I Gutenberg har du några snabba alternativ för hur du lägger till en bild i WordPress. Detta inkluderar:
- Ladda upp (vilket öppnar en urvalsskärm där du kan välja bildfilen från din dator)
- Mediebibliotek (som tar dig till ditt befintliga bildbibliotek, från vilket du också kan dra och släppa en bild)
- Bädda in från URL (om det finns en bild någonstans på nätet som du vill importera kan du klistra in den länken här)
Här är en ögonblicksbild av dessa alternativ (personligen klickar jag bara på “Ladda upp” och tar snabbt tag i bilden jag vill ha från mitt skrivbord):
3. Ladda upp din bild
När du har valt den bild du vill ladda upp klickar du helt enkelt på knappen “Öppna” så läggs den till i ditt inlägg.
Nu när du har lagt till bilden kommer en mindre miniatyrbild att visas som ett nytt block i ditt inlägg.
Här är en skärmdump av hur det kommer att se ut:
4. Bildinställningar och snabbredigeringsalternativ
Innan du fortsätter bör du kontrollera dina bildinställningar (enligt SEO bästa praxis).
Och precis som med Classic Editor kommer du att kunna definiera många olika inställningar och egenskaper för en bild. Med Gutenberg är det gjort lite annorlunda. Dina bildinställningar finns i det högra sidofältet (efter att ha klickat en gång på bilden).
Så här ser inställningarna ut:
Se till att du definierar dina bildinställningar för åtminstone dessa två egenskaper:
- Skriver SEO-vänlig alt-text som beskriver bilden och väver in en nyckelfras
- Bildstorlek (jag visar alltid bilder i full storlek för att undvika kvalitetsförlust)
Du kan också klicka på “Stil”-inställningarna för att lägga till några fler stiliserings- och beskärningsfunktioner inbyggda med Gutenberg.
5. Rörliga bilder i ett inlägg via Gutenberg
En mycket intressant bieffekt av Gutenberg-redaktörens tillvägagångssätt för att använda “block” av innehåll är den lätthet med vilken du kan flytta dina bilder (eller något innehållsblock) inom ett inlägg.
Efter att ha klickat en gång på bilden du vill ordna om i ditt inlägg, kommer du att se “upp” och “ner” pilar precis bredvid bilden.
Klicka på dessa pilar för att flytta bilden uppåt eller nedåt i ditt inlägg, så här:
Och det är! Du är bra att gå.
Nu har du också lärt dig hur du lägger till en bild i WordPress i Gutenberg Editor 🙂
3. Lägg till en utvald bild till ett inlägg i WordPress
Utvalda bilder är viktiga på en WordPress-blogg, eftersom de är bilderna som visas högst upp i dina blogginlägg (och i sökresultat och på sociala medieplattformar när ditt innehåll delas).
Sist men inte minst, så här lägger du till en utvald bild till ett inlägg (eller sida) i WordPress.
Nära det nedre högra hörnet av WordPress Editor-fönstret ser du ett avsnitt för att lägga till en utvald bild. Klicka på “Ange utvald bild” så kommer du till standardbilden för uppladdning av bilder där du kan lägga till bilden du vill ska visas överst i ditt inlägg (även i sökresultat och på sociala plattformar).
När du har laddat upp bilden du vill använda och klickat på “Ange utvald bild”, kommer du tillbaka till din redigeringsskärm och du kommer att se en liten miniatyrbild av bilden längst ner till höger (för att bekräfta att du lagt till rätt bild) Så :
Ganska enkelt, eller hur?
Om du valde fel bild (eller vill göra ändringar senare), kan du helt enkelt klicka på texten “Ta bort utvald bild” så får du möjlighet att välja eller ladda upp en annan bild som ska visas i ditt inlägg.
Sista tankar om hur man lägger till en bild i WordPress
Att lägga till bilder till dina inlägg i WordPress behöver inte vara svårt.
Oavsett om du använder Classic Editor eller Gutenberg för din blogg, har teamet bakom WordPress arbetat hårt för att göra det mycket enkelt att lägga till bilder.
Om du fortfarande har problem, skicka mig en kommentar längst ner i det här inlägget så hjälper jag dig gärna att lösa eventuella problem du har.
Det är allt för idag!
Vi har precis tagit upp hur man lägger till bilder i WordPress 👏
Du gillar vad du ser? Registrera dig för fler blogginstruktioner och tips.
Vill du ha fler blogginstruktioner levererade direkt till din inkorg?
Registrera dig idag så går du med 122 843 andra smarta bloggare som får mina bästa bloggråd.
