Trusted WordPress tutorials, when you need them most.
Beginner’s Guide to WordPress
WPB Cup
25 Million+
Websites using our plugins
16+
Years of WordPress experience
3000+
WordPress tutorials
by experts

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

Vill du visa skalade images på din WordPress site?

Beginers gör ofta sina websites långsammare genom att uppladda images utan att tänka på storleken.

Om du utför bilder med korrekta dimensioner kommer din WordPress att prestera bättre utan att kvaliteten försämras.

I den här artikeln kommer vi att visa dig hur du enkelt kan använda skalade images i WordPress.

How to Easily Serve Scaled Images in WordPress (Step by Step)

Varför använda skalade images i WordPress?

På din WordPress-webbplats behöver du bilder för dina blogginlägg, thumbnails, sidhuvud, cover images och mycket mer.

Beroende på ditt theme kommer dessa images att uppta ett visst antal pixlar. Till exempel kan din featured image uppta 680×382 pixlar och en thumbnail på 100×100 pixlar.

Det är viktigt att använda images som har skalats för att passa de korrekta dimensionerna som behövs för din site. Till exempel, om dina featured images upptar 680×382 pixlar, då ska du save dem i exakt den storleken.

Annars kan din site bli långsammare, eller så kommer kvaliteten på användarens upplevelse att sänkas. Här är några av de vanligaste orsakerna till detta:

  • Dina visitors kommer att behöva downloada större filer än nödvändigt, vilket förlänger laddningstiderna.
  • Om du använder images med färre pixlar än det tillåtna utrymmet kommer de att se suddiga ut när de visas i större storlek.
  • Your website måste ändra storleken på bilderna i farten, vilket innebär att den måste runna fler processer innan den kan visa innehållet för användarna.

Oavsett vilket kommer det att ge dina användare en dålig upplevelse och kan också ha en negativ inverkan på din sökmotorsoptimering av images.

Det är därför som om du testar din webbplats prestanda med GTMetrix scan, kommer det ofta att rekommendera att du serverar skalade images för att snabba upp din website.

GMetrix Recommends Serving Scaled Images

Med detta sagt, låt oss ta en titt på hur du enkelt kan visa skalade images i WordPress. Vi kommer att täcka två metoder:

Metod 1: Servering av skalade images med ett plugin

Det enklaste sättet att visa skalade images är att använda ett plugin som automatiskt displayed your website images at the correct size. Den här metoden är den enklaste men den tillåter inte lika mycket flexibilitet som den andra metoden.

Det gratis Optimole-pluginet är ett av de bästa WordPress-tilläggen för bildkomprimering och kommer automatiskt att skala dina images. Men om du får över 5 000 besökare per månad behöver du premium-versionen.

Först måste du installera och aktivera Optimole plugin. För mer detaljer, se vår Step-by-Step guide om hur du installerar ett WordPress plugin.

Vid aktivering kommer du automatiskt att tas till Media ” Optimole page och uppmanas att registrera dig för en API-nyckel eller enter din befintliga API-nyckel. Detta är mycket enkelt.

You Need an Optimole API Key

Se bara till att din email address är korrekt och klicka sedan på knappen ”Create & Connect Your Account”. Anslutningen till Optimole kommer då att ske automatiskt. Du behöver inte ens besöka en annan website eller klistra in nyckeln manuellt.

Optimole kommer nu att börja optimera dina images i bakgrunden. Den väljer automatiskt korrekt bildstorlek för varje besökares device och webbläsare och tjänar bilderna från det snabba CDN:et Optimole Cloud Service.

Optimole Starts to Optimize Your Images Automatically

När du clickar på ’Settings’ tabs, kommer du att se att images i your posts och pages automatiskt kommer att ersättas med images som optimerats och skalats av Optimole.

Detta utförs ej i farten eftersom det sker via ett CDN, vilket innebär att din site inte kommer att drabbas av prestandaförluster.

The Default Settings Work for Most Websites

Pluginet har också aktiverat lazy load, vilket innebär att images på page som inte är synliga för närvarande inte kommer att laddas förrän de behövs. Detta är ett annat effektivt sätt att minska sidans laddningstid och förbättra webbplatsens prestanda.

Dessa Settings fungerar bra för de flesta websites. Du kan dock customize Optimole ytterligare med hjälp av inställningarna i menyn ”Advanced” för att se vad som fungerar bäst för din website.

Om du gör några ändringar i Settings, glöm inte att klicka på knappen ”Save changes” längst ner på sidan.

Metod 2: Servera skalade images manuellt

Du kan också skala images utan ett plugin. Det finns tre sätt att göra detta: du kan använda bildredigeringsprogrammet, funktionen för bildredigering i WordPress mediabibliotek eller genom att ändra värdena i WordPress Media Settings.

Skalning av images med programvara för bildredigering

Du kan skala upp dina images till rätt dimensioner innan du uploadar dem till din website genom att använda ett fotoredigeringsprogram på din dator, till exempel Adobe Photoshop eller Affinity Photo.

The software allow you to choose the correct number of pixels for your image and save it with a small file size and the file format you prefer.

Här är till exempel en screenshot som visar Affinity Photos verktyg för crop.

Cropping an Image With Affinity Paint

Förutom att välja rätt storlek på bilderna redan från början finns det andra saker du kan göra innan du uploadar dina images för att se till att de inte gör din website långsammare.

För mer information, se vår guide om hur du optimerar images för webbprestanda.

Skalning av Images i mediabiblioteket i WordPress

Visste du att du kan göra grundläggande edit av images i WordPress? Funktionen ”edit image” i WordPress allow you to crop, rotate, flip, and scale images.

När du redigerar ett post eller en page måste du clicka på den image du vill editera. Därefter klickar du på knappen ”Ersätt” och väljer sedan ”Öppna mediabibliotek” i menyn.

Replace the Image from the Media Library

Detta öppnar mediabiblioteket i WordPress med den valda imagen.

Till höger finns ett area där you can add alt text, a title, a caption, and a description for your image. Du hittar också en länk för att ”Edit Image”.

Klicka bara på den länken för att komma till ”Edit image” page.

Click the Edit Image Link

Här hittar du en preview av bilden, knappar för edit och flera andra alternativ som är användbara när du skalar eller cropar bilden.

Om du vill skala upp imagen ändrar du bara ett av värdena för ”New dimensions” under Scale Image till höger.

Scaling an Image

Till exempel har den här imagen en mycket stor upplösning på 2560×1637 pixlar. Vi kan förminska den till en bredd på 1200 pixlar genom att skriva i det första fältet ”Scale Image”.

All you have to change is the Width because the image’s height value will be changed ändras automatiskt för att hålla imagen i proportion.

Efter det klickar du bara på knappen ”Scale” för att ändra upplösningen på imagen.

Obs/observera att du bara kan skala ner en image i WordPress. Du kan inte göra images större genom att öka dimensionerna.

Detaljerade instruktioner finns i våra guider om hur du gör grundläggande bildredigering i WordPress och hur du cropar och redigerar inläggsminiatyrer i WordPress.

Justera storleken på images i Media Settings

När du uppladdar images till din website skapar WordPress automatiskt flera kopior i olika storlekar. Du kan customize dessa storlekar genom att besöka Settings ” Media page i WordPress admin area.

The Media Settings Page

Här kan du enkelt ändra dimensionerna för thumbnail, medium och large image.

På vissa websites kan du behöva fler storlekar på images än bara thumbnail, medium och large. Du kan lära dig hur du skapar dessa storlekar genom att följa vår guide om hur du skapar ytterligare bildstorlekar i WordPress.

Om du ändrar standard bildstorlekar eller skapar ytterligare bildstorlekar, kommer endast nya images att påverkas. Du måste återskapa bildstorlekarna för befintliga images.

När du addar en image till ett post eller en page kan du selecta en image size i block settings till vänster på page.

Select Image Size in a Post or Page

Vi hoppas att denna tutorial hjälpte dig att lära dig hur du serverar skalade images i WordPress. Du kanske också vill se vår guide om att optimera WordPress Image SEO eller ta en titt på vår artikel om att använda AI för att generera images för blogginlägg.

If you liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials. You can also find us on Twitter and Facebook.

Avslöjande: Vårt innehåll stöds av våra läsare. Det innebär att om du klickar på några av våra länkar, kan vi tjäna en provision. Se hur WPBeginner finansieras, varför det är viktigt, och hur du kan stödja oss. Här är vår editoriala process.

Avatar

Editorial Staff at WPBeginner is a team of WordPress experts led by Syed Balkhi with over 16 years of experience in WordPress, Web Hosting, eCommerce, SEO, and Marketing. Started in 2009, WPBeginner is now the largest free WordPress resource site in the industry and is often referred to as the Wikipedia for WordPress.

Den ultimata WordPress-verktygslådan

Få GRATIS tillgång till vår verktygslåda - en samling WordPress-relaterade produkter och resurser som varje professionell användare bör ha!

Reader Interactions

7 kommentarerLämna ett svar

  1. Syed Balkhi

    Hey WPBeginner readers,
    Did you know you can win exciting prizes by commenting on WPBeginner?
    Every month, our top blog commenters will win HUGE rewards, including premium WordPress plugin licenses and cash prizes.
    You can get more details about the contest from here.
    Start sharing your thoughts below to stand a chance to win!

  2. Dennis Muthomi

    You have mentioned that WordPress automatically create multiple resized versions of each image uploaded.
    So that means these extra generated images takes up more disk space, right?
    Is there a way to prevent WordPress from making these extra copies if I don’t need certain sizes?

  3. Jiří Vaněk

    When I change an image using WordPress, does it create a new scaled-down copy, or does WordPress just scale the image to a different size but keep the original image? My concern is whether the size of the loaded image will also change at the same time or not.

    • WPBeginner Support

      You would determine which of those options that it does in the plugin’s settings.

      Administratör

      • Jiří Vaněk

        I understand and thank you for your reply. I am primarily interested in the second option, in order to create a smaller copy of the image and thus reduce the demands on transmitted data. Thank you for the clarification.

Lämna ett svar

Tack för att du väljer att lämna en kommentar. Tänk på att alla kommentarer modereras enligt våra policy för kommentarer, och din e-postadress kommer INTE att publiceras. Vänligen använd INTE nyckelord i namnfältet. Låt oss ha en personlig och meningsfull konversation.