Optimera bilder och foton för webben

,

Tunga bilder och foton är en av de största anledningar till att en webbsida laddar långsamt. Man brukar säga att en enskild undersida inte bör väga mer än 2MB totalt. Laddar du upp bilder direkt från din kamera eller telefon utan att optimera innan riskerar du att överskrida den vikten med enbart en enda bild.

Vi på Studio Isla optimerar alltid våra kunders bilder innan vi laddar upp dom till webben. Följ vår guide för att lyckas med dina bilder du med!

  1. För enklast bildredigering så sitter vi alltid vid en dator när vi arbetar. Vi på Studio Isla använder oss av Affinity (som är helt gratis) eller Adobe Photoshop som verktyg.
  2. Använd rätt bildformat. Bilder ska gärna sparas i formatet .webp, då detta formatet är optimerat för webben. Det är typiskt sett 25-35% mindre än vanliga .jpg eller .png, utan att dra ner på kvalitén. Det är ett format som även fungerar för logotyper, ikoner eller andra bilder som kräver en transparent bakgrund (Använder du Photoshop får du använda dig av jpg/png och konvertera om senare).
  3. Beskär bilderna i rätt storlek och proportion som du vill ha dem.
  4. Det är superviktigt att dina bilder har rätt upplösning. Är dom för små så blir dom pixliga och suddiga. Är dom å andra sidan för stora så tar dom upp onödig plats och segar ner sidan. Vår tumregel är att om bilden ska synas över hela skärmen så är 1920px bredd ett perfekt mått då de flesta skärmar är den storleken (Men du kan använda dig av 2000px om det känns enklare att komma ihåg). Om bilden ska vara mindre (t ex synas över halva sidan i bredd) kan 1000px räcka. Redigera pixel-bredden i din bildredigeringsapp och exportera ner bilden lokalt till datorn i .webp-format.
  5. När dina bilder har rätt storlek och upplösning är det dags att komprimera dom. Detta gör vi i programmet tinypng. I gratisversionen kan du komprimera 20 foton samtidigt och det går relativt snabbt med en bra dator. Det är vanligt att programmet lyckas få ner bilderna 70% i storlek medans kvalitén består, så detta är ett av de viktigaste stegen i din bildhantering. (OBS, om bilden är sparad i JPG och du vill optimera till WEBP behöver du först bocka i: Convert my images automatically. Via gratiskontot kan du bara konvertera 3 bilder åt gången.)
  6. Innan du laddar upp bilderna till webben så är det bra att döpa om dina bilder så att dom även är sökmotor-optimerade. Läs vår guide för att lyckas med detta.
  7. Om du arbetar med WordPress är det en god idé att se över och inaktivera globala image scripts som kan klippa till och/eller komprimera bilderna på ett sätt utanför din kontroll. Kolla även ”inställningar för media” i adminpanelen. Där brukar vi höja miniatyrstorleken till 300*300, mediumstorlek till 900*900 och stor storlek till 2000*2000 för att motverka suddiga bilder.
  8. Nu kan du ladda upp bilderna till din webb ☺️

Optimering för enstaka bild – Steg för steg:

  • Börja med att öppna en bild i ditt utvalda verktyg.
  • Redigera en enstaka bild och croppa/redigera bilden i ditt valda verktyg (vid behov)
  • Kortkommando i Affinity och PS: command + option + i
  • Ändra width till 2000px (om hero) eller mindre.
  • Extrahera till rätt format (.webp i Affinity & .jgp i Photoshop).
  • Gå vidare till att optimera filstorleken i Tinypng.com

Batcha processen för flera bilder

Affinity

File → New image process → Batch job. Add source (välja dina bilder), Save into (vart de ska sparas), save as webp/jpg och skriv in width (ex: W 2000)

Spara som webp.

Photoshop

PS = Arkiv → Skript → Bildbearbetare. Välj mapp. Spara som JPG, kvalitet 12. B 2000. Kör.

Spara som jpg.