Det har idag blivit vanligt att publicera sina bilder på webben, men tyvärr kan bilderna göra att hemsidan tar långt tid att ladda. Därför bör man optimera bilderna innan man publicerar dem. En bild som ska publiceras på webben behöver sällan vara högupplöst, snarare tvärtom eftersom det i så fall tar onödigt långt tid att ladda bilden varje gång någon besöker hemsidan. Därför brukar man ha en tumnagelbild.
Minska laddningstiden med Tumnagelbilder
Tumnagelbild är en miniatyr av originalbilden och används för att representera en större bild på webben. Vill man visa en stor bild på webben så brukar man först ha en liten bild och när man klickar på den så kommer en större bild upp. Ska man använda den metoden så gäller det att man skapar en liten bild utav originalet och sedan använder den som tumnagelbild. Visst kan man bara förminska bilden i webbläsaren istället för att skapa en ny bild, men det här är inget rekommenderat alternativ. Den lilla bilden tar nämligen lika lång tid att ladda som originalet då de fortfarande är samma bilder som laddas oavsett vilken storlek du väljer att visa dem i på webbläsaren.
Har du exempelvis en bild på 1920 x1200 pixlar och vill visa den på din hemsida så behöver du spara en till fil där du har förminskat ner den rejält, till exempelvis 200x125. Den här lilla bilden kan du sedan göra länkbar till din stora bild. Tack vare det här ökar du laddningstiden på din webbplats markant.
Exempel
Tumnagelbild Original
Tumnagelbildens storlek är endast 29 kb medan den till höger är 234 Kb stor. Här har vi gjort en stor besparing när det gäller laddningstiden för webbläsaren, men det är inte allt. Om du kollar noga på bilderna så ser du att den till vänster har en betydligt högre kvalité. Det här beror på att bilden till höger är väldigt stor från början och att webbläsaren måste dra ihop bilden till vald storlek, vilket gör att den normalt ser grynig ut.
Minska laddningstiden ytterligare
Har man många bilder på en hemsida, eller väldigt stora bilder så kan det ta långt tid att ladda hemsidan. Därför kan man optimera bilderna för webb genom att minska kvalitén på dem. På många bilder kan du minska kvalitén med 30% utan att du kommer att se någon skillnad, men bilden kommer att vara ~40% snabbare att ladda i webbläsaren!
Exempel
Optimerad tumnagelbild Vanlig Tumnagelbild
Bilden till höger är samma tumnagelbild som ni såg innan, dess storlek: 29 Kb. Bilden till vänster är samma bild fast nu optimerad med Photoshop. Storleken: ca 8 Kb. I det här fallet har vi dragit ner kvalitén med 40%, men ser du någon skillnad? De flesta ser inte skillnaden och har man dem inte bredvid varandra så är det omöjligt att upptäcka någon skillnad.
Spara bilden i rätt färgrymd och format!
Det är viktigt att man sparar bilden som sRGB istället för Adobe RGB, vilket kameror brukar använda. Webbläsarna kan nämligen inte korrekt återge alla färgerna i Adobe RGB, vilket leder till att bilden inte återger färgerna korrekt. Därför bör man alltid använda sRGB för alla bilder på webben.
1. Börja med att gå till Bild > Bildstorlek.
2. Se till att rutan Ändra bildupplösning är ikryssad.
3. Se även till att rutan Bibehåll propotioner är i kryssad.
4. I rullistan ska bikubiskt skarpare vara valt (standard)
5. Ställ nu in den höjd/bredd som du önskar på bilden
Bra. Nu har vi storleken klar. Nu ska vi spara den för webb.
1. Gå till Arkiv > Spara för webb och enheter.
2. Välj filformatet JPGF.
3. Kryssa i rutan Optimerad.
4. kryssa i rutan konvertera till sRGB.
5. Du kan själv reglera kvalitén från 0-100. Det är här du har möjlighet att själv förminska bilden/kvalitén. Hur mycket du kan förminska utan att förlora synlig kvalité beror från bild till bild. Du kan testa att sänka ner till 60-65%, vilket brukar fungera på många bilder.
Grattis, du har nu optimerat din bild för webben!