Hur man enkelt serverar skalade bilder i WordPress (steg för steg)

Om du har kört ett hastighetstest på din WordPress-webbplats har du förmodligen sett en varning om "servering av skalade bilder". Verktyg som Google PageSpeed och GTmetrix flaggar det ofta, men de förklarar det inte tydligt.

Allt det innebär är att dina bilder är större än utrymmet de visas i. Det kan sakta ner dina sidor, skada SEO och frustrera mobilanvändare.

Vi har hjälpt WordPress-användare att åtgärda detta utan att redigera varje bild manuellt eller gräva igenom kod. Med rätt metod kan du lösa det snabbt och förhindra att det händer igen.

I den här guiden visar vi dig hur du serverar skalade bilder i WordPress steg för steg, inga tekniska kunskaper krävs.

Varför servera skalade bilder i WordPress?

På din WordPress-webbplats kommer du troligen att använda bilder för blogginlägg, miniatyrer, sidhuvuden, omslagsbilder och mer. Varje bild fyller ett syfte och hjälper till att skapa en visuell upplevelse för dina besökare.

Beroende på ditt tema visas dessa bilder med specifika pixeldimensioner. Till exempel kan din framhävda bild visas med 680×382 pixlar, medan en miniatyrbild kan vara 100×100 pixlar.

Det är viktigt att spara bilder i de exakta dimensioner som behövs för din webbplats. Till exempel, om ditt utrymme för frontbild är 680×382 pixlar, bör bildfilen matcha dessa dimensioner.

Att inte ändra storlek på bilder kan leda till långsammare laddningstider eller en sämre användarupplevelse. Här är några anledningar till varför:

• Filer som är större än nödvändigt saktar ner laddningstider eftersom besökare måste ladda ner extra data.
• Att använda bilder med färre pixlar än nödvändigt kan göra att de ser suddiga eller pixliga ut vid större visningsstorlekar.
• Din webbplats måste ändra storlek på bilder i farten, vilket kräver mer bearbetningstid innan innehållet visas för användarna.

Allt detta kan leda till en mindre tillfredsställande upplevelse för dina besökare och kan till och med skada din bild-SEO.

Det är därför som när du testar din webbplats prestanda med verktyg som GTMetrix, kommer du ofta att se rekommendationer om att servera skalade bilder för bättre hastighet.

Nu ska vi gå igenom hur man levererar skalade bilder i WordPress. Vi kommer att täcka två enkla metoder för att optimera dina bilder för prestanda.

• Metod 1: Leverera skalade bilder med ett plugin (enklare)
• Metod 2: Servera skalade bilder manuellt
• Vanliga frågor om skalning av bilder i WordPress
• Bonusresurser

Metod 1: Leverera skalade bilder med ett plugin (enklare)

Det enklaste sättet att leverera skalade bilder i WordPress är att använda ett plugin som automatiskt ändrar storlek på och levererar bilder i rätt dimensioner för varje besökares enhet.

Vi rekommenderar denna metod för de flesta nybörjare eftersom den tar hand om allt bakom kulisserna. Den är snabb att installera och fungerar bra för typiska webbplatser.

Gratispluginet Optimole är ett av de bästa WordPress-plugins för bildkomprimering vi har testat. Det skalar automatiskt bilder åt dig. Notera bara att om din webbplats får över 5 000 besökare per månad behöver du premiumversionen.

För att komma igång, installera och aktivera Optimole-pluginet. Du kan följa vår guide om hur man installerar ett WordPress-plugin om du behöver hjälp.

När den är aktiverad, gå till Media » Optimole. Du kommer att uppmanas att registrera dig för en API-nyckel eller ange din befintliga. Processen är enkel.

Bekräfta bara din e-post och klicka på knappen ‘Skapa & Anslut ditt konto’. Optimole kommer att ansluta din webbplats automatiskt, utan att behöva klistra in några nycklar eller lämna instrumentpanelen.

Optimole kommer nu att börja optimera dina bilder i bakgrunden. Den väljer rätt storlek baserat på varje besökares skärm och serverar bilder via sitt globala CDN, så att din webbplats förblir snabb.

Under fliken ‘Inställningar’ ser du att dina bilder nu ersätts med optimerade och skalade versioner. Detta sker automatiskt och saktar inte ner din server, tack vare CDN:et.

Optimole aktiverar också lat laddning som standard. Det innebär att bilder som inte är synliga på skärmen inte laddas förrän de behövs – vilket hjälper till att minska sidladdningstiden och förbättra prestandan.

Standardinställningarna fungerar bra för de flesta webbplatser, men du kan finjustera saker under menyn 'Avancerat'. Se bara till att klicka på knappen 'Spara ändringar' om du gör några uppdateringar.

Den här metoden är idealisk om du vill ha en lösning som du kan ställa in och glömma. Den är snabb, nybörjarvänlig och kräver inte att du redigerar varje bild manuellt.

Med det sagt är det inte det mest flexibla alternativet. Om du behöver full kontroll över bilddimensioner eller vill hantera optimeringen själv, kan det vara ett bättre alternativ att servera skalade bilder manuellt.

Metod 2: Servera skalade bilder manuellt

Manuell bildskalning ger dig full kontroll över hur dina bilder ser ut och presterar. Det kräver lite mer ansträngning, men resultaten kan bli mer exakta och konsekventa över hela din webbplats.

Här är varför detta tillvägagångssätt erbjuder mer flexibilitet:

• Du kan välja exakta dimensioner och bildformat innan uppladdning.
• Du kan minska filstorlekar utan att förlita dig på tredjepartsverktyg.
• Du undviker pluginbegränsningar eller månatliga besöksgränser.
• Du får mer konsekventa resultat över teman och layouter.

Därför är denna metod idealisk för designers, fotografer och alla som vill ha finjusterad kontroll. Det finns tre sätt att göra det på:

1. Genom att använda en bildredigeringsprogramvara (rekommenderas)
2. WordPress mediebibliotek
3. I dina WordPress medieinställningar.

Låt oss börja med metoden med bildredigeringsprogram.

1. Skala bilder med bildredigeringsprogram

Detta är metoden vi använder på alla våra webbplatser. Med verktyg som Adobe Photoshop eller Affinity Photo kan du ändra storlek på dina bilder innan du laddar upp dem.

Du kan välja rätt pixeldimensioner, välja det format du behöver och spara filen med en mindre storlek – allt i ett steg.

Här är ett exempel på Affinity Photos beskärningsverktyg i aktion:

Tillsammans med att välja rätt dimensioner finns det andra sätt att hålla bilder lätta och snabbladdade före uppladdning.

För fler tips, kolla in vår guide om hur man optimerar bilder för webbprestanda.

2. Skalning av bilder i WordPress mediebibliotek

Du kan också ändra storlek på bilder direkt i WordPress. Den inbyggda bildredigeraren låter dig beskära, rotera, vända och skala uppladdade bilder.

För att göra detta, öppna inlägget eller sidan där bilden visas. Klicka på bilden, klicka sedan på knappen ‘Ersätt’ och välj ‘Öppna mediebiblioteket’.

Detta öppnar mediebiblioteket med din bild vald.

Till höger ser du fält för alt-text, titel, bildtext och beskrivning. Nedanför det, klicka på länken 'Redigera bild'.

Det tar dig till skärmen för bildredigering.

Härifrån kan du förhandsgranska bilden och använda grundläggande redigeringsverktyg. För att ändra storlek på bilden, leta efter alternativet ‘Skala bild’ på höger sida.

Ange önskad bredd, så uppdateras höjden automatiskt för att behålla bildförhållandet.

Till exempel kan en bild med en storlek på 2560×1637 skalas ner till 1200 pixlar bred med bara ett klick.

Efter att ha angett den nya bredden, klicka på knappen 'Skala' för att spara ändringen.

Tänk på att du bara kan skala ner bilder i WordPress, inte upp. Att öka storleken kan minska kvaliteten eller misslyckas helt.

Behöver du hjälp med bildredigering i WordPress? Se våra handledningar om grundläggande bildredigering och beskärning av miniatyrbilder.

Justera bildstorlekar i medieinställningar

Som standard skapar WordPress flera versioner av varje bild i olika storlekar. Du kan ändra dessa standardstorlekar genom att gå till Inställningar » Media i din instrumentpanel.

Här kan du justera dimensionerna för miniatyrbild, medium och stora storlekar. Detta påverkar hur bilder skalas och visas på hela din webbplats.

Om du behöver fler bildstorlekar kan du skapa ytterligare sådana med några kodrader eller ett plugin.

Efter att ha ändrat dina bildstorlekar måste du regenerera miniatyrer för befintliga bilder så att de använder de nya inställningarna.

När du infogar en bild i ett inlägg eller en sida kan du också välja vilken storlek som ska visas i inställningspanelen för blocket.

Vanliga frågor om skalning av bilder i WordPress

Nedan följer några vanliga frågor som användare har om skalning och hantering av bilder i WordPress.

update_option( 'medium_size_w', 0 );
update_option( 'medium_size_h', 0 );
update_option( 'large_size_w', 0 );
update_option( 'large_size_h', 0 );

Bonusresurser

Media och bilder gör en WordPress-webbplats engagerande. Följande är några ytterligare resurser som hjälper dig att fullt ut utnyttja WordPress mediekapacitet.

• Hur man lägger till en hjältebild i WordPress
• Omslagsbild vs. utvald bild i WordPress blockredigerare (nybörjarguide)
• Varför du aldrig ska ladda upp en video till WordPress
• Hur man skapar ett bildgalleri i WordPress (steg för steg)
• Hur man lägger till dina sociala medier-flöden till WordPress (steg för steg)

Vi hoppas att den här handledningen hjälpte dig att lära dig hur du serverar skalade bilder i WordPress. Du kanske också vill se vår guide om optimering av WordPress bild-SEO eller vår artikel om att använda AI för att generera bilder för blogginlägg.

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.