Innehållshanteringssystemet WordPress erbjuder möjligheten att använda individuella bildformat utöver standardbildstorlekar. Vi presenterar viktiga steg för att anpassa bildstorlekar, baserat på WordPress 6.0.3.

Standardbildstorlekarna i WordPress

Filstorleken på bilder som är inbäddade på en webbplats har stor inverkan på dess laddningshastighet. Optimala bildformat förkortar laddningstiden och minskar minnesbelastningen på servern. WordPress CMS erbjuder en uppsättning standardiserade bildstorlekar på servern när du laddar upp media.

WordPress standardbildstorlekar Storlek (L x H) i pixlar Bildförhållande
Förhandsgranskningsbilder 150 x 150 Kan inaktiveras
Medium 300 x 300 Behålls
Stor 1024 x 1024 Behållen
Originalbild Som uppladdad Behållen

Spara WordPress-bilder i backend och justera storlekarna

Dessa bildstorlekar definieras i WordPress-inställningarna och kan justeras där inom vissa gränser. För att göra detta, gå till “Inställningar” > “Media” i backend.

Bild: Image size settings in the WordPress backend
You can customise the preset default image sizes in the WordPress dashboard.

Efter medieuppladdningen finns det ytterligare filer i mediebiblioteket. Katalogen för detta är https://mydomain.com/wp-content/uploads/ eller https://mydomain.com/wp-content/uploads/2022/11/ (om månads- och årsbaserade mappar är aktiverade). Till exempel finns en bild i följande filer:

  • exempelbild-1024x683.jpg
  • exempelbild-150x150.jpg
  • exempelbild-1536x1024.jpg
  • exempelbild-2048x1365.jpg
  • exempelbild-300x200.jpg
  • exempelbild-620x413.jpg
  • exempelbild-skalad.jpg (2 560 x 1 707 px)
  • exempelbild.jpg (originalet)

Detta ger de bästa bildstorlekarna för de flesta WordPress-sidor eller -inlägg. Bilder som ska laddas upp till mediebiblioteket bör inte vara större än 1 920 pixlar på bildens långsida. De kan ändras i storlek innan de laddas upp med gratis bildredigeringsprogram för att undvika obehagliga överraskningar. Det gäller WebP-bildformatet, som inte stöds av alla webbläsare.

Dessa är de rekommenderade bildstorlekarna för användning i WordPress-teman:

WordPress-bildstorlekar Storlek (L x H) i pixlar
Logotyper 200 x 100
Förhandsgranskningsbilder 150 x 150
Bakgrundsbilder 1920 x 1080
Inläggsbilder i stående format 900 x 1200
Publicera bilder i liggande format 1200 x 900
Huvudbilder (banner) 1048 x 250
Sliderbilder (beroende på tema) Upp till 1920 x ca. 600
Bild: Common image sizes in WordPress
Commonly used image sizes for WordPress websites at a glance. Photo source: ESB Professional/shutterstock.com

De exakta bilddimensionerna beror på komponenterna och strukturen i ett WordPress-tema. De finns i dokumentationen för respektive tema.

Ändra storlek på bilder i WordPress mediebibliotek

WordPress-bildstorlekar kan också justeras. Förutom att ändra originalbildens dimensioner är det också möjligt att beskära, rotera och vända bilden. Om du till exempel vill skapa en bildspelare från en bild med större dimensioner i mediebiblioteket gör du så här:

Steg 1: Välj bild i mediebiblioteket och klicka på “Redigera bild”.

Bild: Image editing in WordPress library
Select an image from the WordPress media library for custom image resizing. Photo source: ESB Professional/shutterstock.com

Steg 2: Ställ in redigeringsmetod och storlek

Bild: Set new image size in WordPress library
Change the image to the desired size using the crop editing method

Det är värt att notera att beskärningsknappen måste användas två gånger: en gång för att aktivera funktionen och sedan en andra gång efter att bilddimensionerna har ställts in för att utföra åtgärden.

Steg 3: Spara bilden i mediebiblioteket

Bild: Save resized image to WordPress library
‘Save’ will save the resized image to the WordPress library

Efter att den skalade bilden har sparats innehåller uppladdningsmappen filen

  • förhandsgranskningsbild-skalad-e1667121439976.jpg

i ytterligare fem format med automatiskt tilldelat ID …-e1667121439976. De nyskapade bildstorlekarna kan väljas från mediebiblioteket i Gutenberg-redigeraren när de infogas eller byts ut. Bildens pixelstorlek finns då också tillgänglig där.

Justera bildstorleken när du infogar den i WordPress-innehållet

Bilderna från WordPress mediebibliotek infogas i innehållet. Detta gör det möjligt att justera storlekarna i efterhand inom breda gränser. WordPress Gutenberg-redigeraren erbjuder mycket mer omfattande möjligheter jämfört med den klassiska redigeraren TinyMCE.

Bild: Define best image sizes in WordPress post/page
Using the Gutenberg block settings for images and the toolbar, an image can be resized as much as possible when inserted into a post or page. The alt text (!) säkerställer tillgänglighet. Källa för den använda bilden: ESB Professional/shutterstock.com”

Om du vill spara dina anpassade inställningar för senare återanvändning kan du använda Gutenbergs avsnitt “Lägg till i återanvändbara block” och även låsa det mot oavsiktliga ändringar. Detta sparar mycket arbete om du ofta publicerar nya inlägg.

För yrkesspecifika webbplatser, till exempel en fotografs webbplats, kan ytterligare bildformat behövas för att perfekt återge din vision. Vår guide”komprimera bilder” ger ytterligare hjälp med att justera bildstorlekar, till exempel för WordPress-galleriplugins.

Inaktivera WordPress standardstorlekar för bilder

Det enklaste sättet att inaktivera standardbildstorlekarna är att använda pluginet ”Disable Media Sizes ”. I dess inställningar listas också alla sju genererade bildformat.

Bild: Disable preset image sizes in WordPress using a plugin
The ‘Disable Media Sizes’ plugin allows you to disable the generation of preset WordPress image sizes

Med de visade inställningarna för plugin-programmet genereras de avmarkerade formaten inte alls. Uppladdningen av originalbilden kan inte “stängas av”. Detta är en fördel om du ändå vill generera andra format senare.

Notis

Det är också möjligt att lägga till ytterligare bildformat eller undertrycka dem med hjälp av poster i WordPress-kärnfilerna functions.php och index.php. Detta bör dock endast göras av erfarna programmerare. En första översikt över programmeringsspråket finns i vår PHP-handledning för nybörjare.

Optimera bilderna ytterligare för WordPress med plugins

I praktiken används bilder främst i formatet JPG och PNG. Filstorleken för dessa bildformat kan justeras ytterligare med bildredigeringsprogram. I Photoshop finns en fråga om kvalitet när man sparar eller exporterar. Nackdelen med denna metod är att varje bild måste “bearbetas” individuellt och sedan laddas upp. Plugins är en mer elegant lösning. Dessa har ofta ett brett utbud av funktioner, så det är lämpligt att noggrant läsa igenom dokumentationen för den plugin som används.

Höga installationssiffror och bra betyg har till exempel följande WordPress-plugins för att justera WordPress-fil- och bildstorlekar:

  • EWWW Image Optimizer: Stöder formaten: JPG, PNG, GIF, PDF, WebP, SVG
  • TinyPNG: Stöder JPG, PNG, WebP
  • Imagify: Stöder JPG, PNG, PDF, GIF, WebP
  • Regenerate Thumbnails: har inte uppdaterats på ett tag
  • Image Regenerate & Select Crop: likaså

Kom ihåg innan du provar plugins: En WordPress-backup skyddar mot dataförlust om något verkligen går fel.

Sammanfattning: Optimera bildstorlekarna i WordPress

Med WordPress inbyggda verktyg kan många optimala bildstorlekar redan uppnås. Med plugins finns ännu fler möjligheter tillgängliga. Ingrepp i PHP-koden på en WordPress-webbplats bör endast göras av programmeringsproffs. Och slutligen: Tänk på bild-SEO när du optimerar.

Gå till huvudmeny