Jag var nyligen på en webbutvecklarkonferens där ett av de hetaste ämnena var prestanda. Vi använder internet överallt idag, och inte bara på fasta linor utan ganska ofta på mindre bra nätverk. Därför är det extra viktigt att tänka på prestanda på webben, hur lång tid tar din sida att ladda? En av de största bandbreddstjuvarna är bilder, så hur ska man göra för att få ner storleken på dem när de flesta webbsiter idag har stora fina bilder på sina förstasidor?
En sak jag kan tipsa om för att få ner storleken är att använda sig av oskärpa! Om vi tar följande fotografi som är av min kollega Fredrik när vi nyligen var i San Fransisco på sagda webbutvecklarkonferens:
Fotot är i orginal 1500x1000 pixlar och är 253.7Kb stort.
Jag öppnar sedan filen i photoshop eller annat bildredigeringsprogram, markerar det jag vill ha som fokus i bilden (i det här fallet Fredrik), inverterar markeringen (eller om man vill kan man välja att kopiera det markerade till ett nytt lager och sedan jobba bara med det underliggandet lagret), och gör allt inom markeringen oskarpt. Jag valde på bild nummer två att använda mig av Gaussisk oskärpa med 5.0 pixlars radie.
När jag sedan spar bilden igen så blir den 143.2Kb stor, och jag har alltså sparat in över 100Kb! Den här fotot är gjort väldigt snabbt och slarvigt, vilket man kan se på kanterna på Fredrik, men om man lägger ner lite tid på det så kan man få det osynligt.
Varför blir det så mycket mindre i storlek? Färgytorna blir större, och det blir mindre detaljer att hålla reda på. Detta fungerar såklart bara på bilder där man har ett föremål eller en person som ska vara i fokus och resten inte spelar någon roll, men man kan nog leka lite med det och spara en hel del på storleken!