Hur man ställer in den bästa bildstorleken i WordPress för snabb laddning
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.
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 |
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”.
Steg 2: Ställ in redigeringsmetod och storlek
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
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.
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.
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.
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.