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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.