Mina bilder kapas (beskärs) – om bildstorlekar i WordPress

När du laddar upp en bild i WordPress så skapas flera bildstorlekar av din bild direkt och sparas i din mapp för uppladdade bilder på webbservern. På så sätt så finns bilderna tillgängliga när de behövs på olika delar av webbplatsen.

Storlekar på bilder

De bildstorlekar som finns i WordPress vanligtvis är:

• Thumbnail (miniatyr), oftast 150 x 150 pixlar, beskärs till exakt den storleken.
• Medium, oftast 300 x 300 pixar. Beskärs oftast bara i bredd.
• Large, oftast 1024 x 1024 pixlar. Beskärs oftast bara i bredd.
• Full, den storleken som bilden har när du laddar upp den

Förutom de storlekarna så kan ditt tema ha lagt till fler storlekar, eventuella bildspel eller andra tillägg kan också ha lagt till bildstorlekar. Det innebär att du kan ha ett tiotal varianter av samma bild. Det mesta jag sett var en klient som hade över 70 storlekar av varje bild. Men då hade hen också installerat många plugin.

Bildstorlekar i WordPress i praktiken

Vad innebär det här för mig som redaktör i WordPress när jag ska ladda upp en bild då? Jo, låt oss säga att du har en bild på 200 x 150 som du laddar upp, då finns det två varianter av den bilden. En som är i den storlek du laddade upp och en beskuren bild på 150 x 150.

Den första bilden är den bild jag laddade upp och den andra bilden är den beskurna varianten som skapas automatiskt. I det här fallet finns inte de andra storlekarna (medium och large) eftersom bilden är för liten för att det ska gå att skapa de storlekarna.

Exempel 1 – rektangulär bild

Exempel 2 – kvadratisk bild

Här har jag laddat upp en bild som redan från början är kvadratisk och då skapas en miniatyr men den beskärs inte.

Varför skapas flera bildstorlekar och beskärs bilder?

Bilderna beskärs i WordPress för att kunna kontrollera layouter. Oftast används miniatyren (thumbnail) på sidor som hämtar information från många olika inlägg. Om man på en sådan sida skulle visa bilderna så som de har laddats upp så skulle layouten förmodligen bli mycket rörig. Vi har ju laddat upp våra bilder i många olika storlekar och blandat porträtt- och landskapsformat.

En annan sak är att många laddar upp bilder i stort sett direkt från sin digitalkamera/mobil och dessa bilder är ofta jättestora. Kanske omkring 2000 x 3000 px. Om då bara en bild på 150px ska visas så blir det ineffektivt att skicka ut en så stor bild till besökarnas dator/mobil. Det tar resurser och slöar ner din hemsida. Google tycker också att man är en klant i analyser av sidan.

Om en bild ska användas som miniatyr så är det bästa att du laddar upp den i rätt storlek

Hur ser jag vilka bildstorlekar som används?

Du kan se vilka bildstorlekar som är inställda i ditt tema om du i WordPress-panelen går till Inställningar => Media

OBS! Om du ändrar inställningar här så kommer det att påverka framtida bilder, men inte de bilder du redan har laddat upp!

Om du vill veta vilken bildstorlek som används till exempel i ett bildspel så får du titta i inställningarna för det tillägget.

Andra problem med beskurna bilder

Som jag skrev innan så kan ditt tema ha satt upp bildstorlekar eller ett tillägg. Jag skrev också att bildstorlekarna skapas när du laddar upp en bild. Det här ledar till problem (kanske) om du byter tema eller tillägg, eller ändrar bildstorlekar.

Tänk dig följande scenario: Du har ett tema som använder miniatyrer på 150x150px och du har laddat upp bilder i flera år. Inga problem och allt fungerar finfint. Men nu byter du tema och det nya temat använder 200x150px som miniatyr.

Det är fortfarande inga problem utan allt ser bra ut. Eftersom inte den nya miniatyr-storken finns så använder din hemsida de tidigare skapade miniatyrena på 150x150px. Men nu laddar du upp en ny bild och då skapas en miniatyr på 200x150px för just den posten. Det kan se lite konstigt ut!

Det finns ett tillägg som kan lösa det här problem och skapa alla nya bildstorlekar du behöver om du byter tema https://wordpress.org/plugins/regenerate-thumbnails/.

Läs lite mer om bilder på Checklista när du laddar upp bilder till din hemsida