Hur bättra skärpan på foton för publicering i WordPress

Att få skarpa bilder i WordPress handlar mindre om att ”fixa” bilden i efterhand och mer om att optimera arbetsflödet innan du laddar upp filen. WordPress är känt för att komprimera bilder automatiskt, vilket ofta gör dem suddiga.

Här är en guide för att säkerställa maximal skärpa.

1. Förbered bilden innan uppladdning (Viktigast!)

Den vanligaste orsaken till suddiga bilder är att WordPress behöver skala om en bild som är för stor eller för liten.

  • Storlek: Ladda upp bilden i den exakta storlek den ska visas. Om din bildruta i temat är 800 pixlar bred, ladda inte upp en bild på 3000 pixlar. Skala ner den i ett redigeringsprogram (Photoshop, Lightroom, GIMP eller gratisverktyg som Photopea) till 800px bredd innan uppladdning. Enklast med Microsoft Paint.
  • Upplösning: För webben räcker 72 DPI (dots per inch).
  • Filformat: Använd WebP om möjligt. Det är ett modernt format som ger hög kvalitet vid mycket mindre filstorlek än JPEG. Om du måste använda JPEG, spara med en kvalitet på ca 70–85%.

2. Undvik ”skärpnings-fällan”

När du skalar ner en bild förlorar den ofta lite krispighet.

  • Använd ”Output Sharpening”: I program som Lightroom eller Photoshop, använd funktionen för skärpa (Smart Sharpen eller Unsharp Mask) efter att du har skalat ner bilden till dess slutliga storlek.

En genväg är med appen Foton.

  • Lagom är bäst: Överdriv inte skärpningen, då kan det uppstå ”halo”-effekter (ljusa kanter) runt objekt, vilket gör att bilden ser sämre ut.

3. Justera WordPress bildhantering

WordPress skapar automatiskt flera kopior av varje bild du laddar upp (t.ex. thumbnail, medium, large). Om dessa inställningar är dåliga blir bilderna suddiga.

  • Inställningar: Gå till Inställningar > Medieinställningar i WordPress. Se till att måtten där matchar de storlekar du faktiskt använder på din sajt.
  • Stäng av automatisk JPEG-komprimering: WordPress komprimerar JPEG-filer till 82% kvalitet som standard. Du kan styra detta genom att lägga till följande kodsnutt i din functions.php-fil (använd ett child-theme):

PHP

add_filter( 'jpeg_quality', function( $arg ) { return 100; } );

Detta tvingar WordPress att behålla 100% kvalitet.

4. Använd rätt tillägg (Plugins)

Istället för att låta WordPress sköta optimeringen, låt ett dedikerat tillägg göra det bättre:

  • Imagify eller ShortPixel: Dessa tillägg optimerar bilder utan att förlora skärpa. De kan konvertera till WebP automatiskt och har avancerade algoritmer för att behålla detaljrikedom.
  • EWWW Image Optimizer: Ett annat bra alternativ som ger dig kontroll över hur bilderna komprimeras. Se nedanstående jämförelse.

5. Kontrollera CSS (viktigt för visning)

Ibland laddar du upp en skarp bild, men temat drar ut den med CSS.

  • Högerklicka på bilden på din hemsida i webbläsaren och välj Inspektera.
  • Kolla om bilden visas i en annan storlek än vad filen faktiskt har. Om din bild är 800px bred men temat tvingar den till 850px, kommer den att se suddig ut. Se till att width och height i CSS matchar bildens verkliga pixlar.

Sammanfattningsvis: Skala bilden till rätt storlek i ett externt program, lägg på lite extra skärpa där, och ladda upp den som WebP. Undvik att låta WordPress göra grovjobbet med skalning om du vill ha absolut högsta kvalitet.aa

Appar för komprimering

  • EWWW Image Optimizer: Har den mest generösa gratisversionen eftersom den optimerar lokalt på din egen server. Det finns ingen hård gräns för antal bilder eller MB (så länge din server klarar av jobbet).
  • Imagify: Ger dig 20 MB per månad gratis (ca 200 bilder). När du når gränsen stoppas optimeringen tills nästa månad.
  • ShortPixel: Ger dig 100 bilder per månad gratis. Det är en fast gräns oavsett bildens filstorlek.

Välj EWWW Image Optimizer om:

  • Du vill slippa månadsgränser och aldrig behöva oroa dig för att ”krediten tar slut”.
  • Du har ett stort bildbibliotek eller laddar upp mycket bilder.
  • Du vill ha full integritet (eftersom bilderna inte skickas till deras moln för optimering).
  • Obs: Detta kräver att din webbhotell-server har lite prestanda att ge, då den gör jobbet åt dig.

Välj ShortPixel om:

  • Du vill ha den absolut bästa komprimeringen (de vinner ofta i oberoende tester).
  • Du vill ha en flexibel lösning där du kan köpa engångskrediter som aldrig går ut om du någon månad skulle behöva optimera fler bilder än de 100 gratis.
  • Du har behov av att optimera PDF-filer eller vill konvertera format (t.ex. PNG till JPG) automatiskt.

Välj Imagify om:

  • Du redan använder WP Rocket (de är samma företag och fungerar extremt bra ihop).
  • Du vill ha ett så enkelt gränssnitt som möjligt där allt bara ”fungerar” utan avancerade inställningar.
  • Du har en mindre sajt och vet att du håller dig under 20 MB/månad.

Mitt tips

Om du är orolig för skärpan (som var din ursprungliga fråga):

  1. Alla tre har inställningar för ”Lossless” (förlustfri) eller ”High/Smart” komprimering. Välj alltid dessa nivåer i gratisversionen för att behålla maximal skärpa.
  2. Gör inte bilderna för stora från början. Om du laddar upp en bild som är 3000 pixlar bred när den bara ska visas i 800 pixlar, kommer inget plugin i världen kunna göra den helt skarp i WordPress. Skala ner bilden i din dator först, så kommer vilket som helst av dessa plugins att göra ett toppenjobb med att optimera filstorleken utan att förstöra skärpan.

Rekommendation: Börja med EWWW Image Optimizer. Det är det mest ”riskfria” valet eftersom det inte har några tråkiga begränsningar i antal bilder, vilket gör att du kan experimentera fritt med inställningarna tills du är nöjd med resultatet.

/ Av Ingemar Lindmark

Lämna ett svar

Din e-postadress kommer inte publiceras. Obligatoriska fält är märkta *