Optimera dina bilder för webben
Att lägga upp bilder på en webbsida eller i ett blogginlägg är ett enkelt och smart sätt för att liva upp stämningen. Med rätt bild får texten en helt annan känsla och helheten på sidan blir redan trevligare. Vad är då en perfekt bild?
Motivet är helt upp till dig själv, men välj något som är relaterat till texten för att hålla ihop innehållet. Det andra du bör tänka på är att du använder bilder som du har rätt att publicera, så att ta bilder direkt ur Google är inget att rekommendera, ifall du inte vill att Bildombudsmannen knackar på. Ett tredje tips är att aldrig ta en för liten bild och göra den större, eller ta en bild som redan från början är lågupplöst. Orsaken är att pixliga bilder aldrig gör sig bra och du vinner då mer på att inte använda någon bild.
När du ska ladda upp en bild till webben är det viktigt att du optimerar den för siten. Detta gör man för att snabba upp laddningstiden på siten och för att minska behovet av lagringsutrymme på servern. Så innan du börjar importera in bilderna på siten ska du låta de gå igenom ett bildbehandlingsprogram först. I detta fall, Photoshop.
Steg för steg- Optimera bilder för webb
Starta Adobe Photoshop och öppna sedan bilden som du ska optimera för din webbsida.
Arkiv -> Öppna… (File -> Open…)
När du valt bilden och öppnat upp den i Photoshop ska du gå in i verktyget som hjälper dig att spara den för webben.
Arkiv > Spara för webben… (File -> Save for Web & Devices)
När det ser ut som på bilden nedan fyller du i de här inställningarna:
Förinställning (Preset) – JPEG Hög (formatet JPEG i kvalitet 60)
Optimerad (Optimized) – ska vara aktiv
Konvertera till sRGB (Convert to sRGB) – ska vara aktiv
Bildstorlek (Image Size) – Ändra storlek till det siten kräver. Viktigast är att bredden passar din site. På vår site använder vi 610px som standard.
Kvalitet – Bikubisk (Quality – Bicubic)
När alla inställningar är valda så väljer du att ”Spara”(Save) bilden och döper förslagsvis om den för att du enkelt ska hitta igen den sedan när du ska publicera bilden. Tänk på att inte spara över originalet, eftersom vi nu förminskat den från sitt original.
Bilden som jag använde i det här exemplet gick från 3,10 mb till 85,7 kb, något som kommer att spara både bandbredd och serverutrymme. Det tar lite extra tid, men när du fått kläm på det går det fort, och det kommer vara värt det sett till sitens prestanda.
Alla publiceringstjänster ser olika ut och det är svårt att säga hur man ska göra för att bilderna ska visas på rätt sätt. Även om du laddar upp bilden med exakt den storleken du vill ha den i så kan det skilja sig när den väl publiceras, så ett generellt tips är att gå in i html-koden där bilden ligger och manuellt skriva in bredd och höjd.
Detta blev en första steg-för-steg-guide som jag skriver här och jag hoppas att den kommer till användning för dig. Kommentera gärna i fältet nedan om du har några funderingar kring optimering av bilder på webben, eller har du kanske önskemål om vad nästa guide ska handla om?