Optimering af billeder er et vigtigt. Store billedfiler har en betydelig effekt på hvor hurtigt dine websider loades. Heldigvis er der mange metoder til at komprimere billeder så de fylder en brøkdel af deres oprindelige størrelse. Når det drejer sig om billeder der løbende bliver uploadet til et website må man nok affinde sig med en script baseret løsning og de fleste CMS har også indbygget billedkomprimering helt automatisk. Men alle de billeder du bruger til dine designs bør optimeres manuelt og omhyggeligt for at opnå det bedst tænkelige resultat. Disse billeder kunne f.eks. være logoer eller andre branding-elementer, UI elementer, baggrunde og banner-billeder.

Vælg det bedste filformat

Når du udgiver et billede på nettet nå du selvfølgelig anvende et understøttet format. For almindelige raster-billeder (bitmap billeder) er de understøttede formater GIF, PNG og JPEG. Det er vigtigt at analysere billedet for at beslutte hvilket format der er det mest optimale. De tre vigtigste faktorer er:
  • Hvor mange individuelle farver indeholder billedet?
  • Indeholder billedet bløde farveovergange/ gradienter eller slørrede områder?
  • Indeholder billedet gennemsigtige eller delvis gennemsigtige pixels?

For billeder med få farver og skarpe farveovergange kan du opnå rigtig gode resultater med 8 bit formater. 8 bit formaterne for web er PNG-8 og GIF. Disse formater kan indeholde 256 farver og har to værdier for gennemsigtighed (fuld gennemsigtighed eller ingen gennemsigtighed). PNG-8 kan gemmes med såkaldt tabsløs komprimering og kan reducere billedfiler betydeligt. Derfor er PNG-8 filer ofte at foretrække frem for GIF. Som regel er den eneste grund til at vælge GIF frem for PNG-8 hvis dit billede er animeret.

For billeder med mere end 256 farver og bløde eller glidende farveovergange, Bør du bruge true colour formater som JPEG eller PNG-24/32. Disse formater har 3 kanaler for farve værdier, henholdsvis rød, grøn og blå. Hver kanal har 256 mulige lysstyrker og kan producere millioner af farver når det bliver blandet, De tre kanaler udgør tilsammen 24 bit hvilket gør et ukomprimeret true colour billede tre gange større end et 8 bit billede.

JPEG er designet til at komprimere fotografier og producerer gode resultater med små fil-størrelser. JPEG komprimering er ikke tabsløs og vil generere synlige defekter hvis billedet komprimeres for meget. PNG-24/32 er tabsløs og PNG-32 har også 8 bit tildelt til en kanal for gennemsigtighed (256 værdier for alpha) men disse filer er sædvanligvis ganske store I forhold til JPEG og bør kun bruges hvis billederne skal indeholde gennemsigtige pixels.

Som tommelfingerregel bør du bruge JPEG komprimering til farvefotos og PNG-8 til simpel grafik såsom streg-tegninger (med mindre du har en vector-udgave af billedet som med fordel kan publiceres i SVG format).

256 Shades Of Grey

For sort/hvid-fotografier (eller rettere gråtone billeder) er valget af format ikke altid indlysende. Både 8 bit og 24 bit formaterne har 256 mulige værdier for gråtoner. De tilbageværende bits i et 24 bit format er reserveret til farver og vil simpelhen ikke blive brugt Så du får ikke bedre kvalitet ud af 24 bits. Dog håndterer JPEG-komprimering gråtone-gradienter særdeles godt så JPEG kan ofte være det bedste format til at optimere disse billeder, især hvis billed-materialet indeholder bløde eller slørrede overgange.

Komprimering vs. opløsning

Den gang websider blev designet med en fast bredte i pixels var det anbefalet at billeder blev vist i et 1:1 forhold. Dvs. et billede ikke burde have højere opløsning end dets with og height attributter. Men i med nutidens retina displays og flydende, responsive layouts giver denne tankegang ikke rigtig mening mere. Det bør også bemærkes at nogle browsere skalerer hele websiden op (incl. billeder) hvis brugeren har forøget operativ-systemets skriftstørrelse. Så du bør altid have lidt opløsning at "give af" og ønsker du fuldt at udnytte retina displays bør billederne have dobbelt så høj opløsning som de vises i. Heldigvis kan du tillade dig at komprimere billeder med høj opløsning lidt mere da defekterne ikke er så synlige når billedet bliver skaleret ned.

Værktøjer til billedkomprimering

Populære billedbehandlingsprogrammer som PhotoShop og Gimp kan exportere billeder til web med PNG eller JPEG komprimering. Men der er værktøjer med langt bedre komprimerings-algoritmer, oven i købet gratis. Et af de bedste værktøjer til PNG komprimering jeg har set er TinyPNG. Dette program kan allokere en række indexerede farver præcis som et 8 bit billede men farverne er ikke begrænset til 256 og komprimeringen bevarer en fuld 8 bit alpha kanal. Med andre ord er det kun de brugte farver og alpha værdier i billedet der optager hukommelse. Andre værktøjer som Image Optimizer fra http://www.xat.com/io/ tillader dig at komprimere udvalgte områder af billedet så du f.eks. kan bevare høje detaljer i biledets fokus område og blot komprimere baggrunden.

Bulk processing, automation og APIs

At optimere billeder manuelt er en tidskrævende proces og, som nævnt, vil det for løbende uploadede billeder, eller sites med store arkiver af eksisterende billeder, ofte være en umulig opgave. Men du udvikler et site kan du bruge forskellige automatiserings værktøjer til at optimere hele billedarkiver på en gang. Populære task runners som Grunt har plugins designet til formålet og mange applikationer har indbygget bulk processing af grupper af billedfiler. Nogen kan enda genere previews undervejs så du manuelt kan kan godkende optimeringen af hvert billede. For billeder der bliver uploadet til en PHP web server kan du drage fordel af af PHPs indbyggede imagejpeg metode, der tager compression som et af parametrene. Desværre er algoritmen ikke så god som i de manuelle værktøjer. Alternativt er der forskellige Web APIs som du kan forbinde til med bedre komprimerings algoritmer. Personligt har jeg ikke erfaring med disse men jeg har hørt eksperter anbefale https://kraken.io/

Reducering af HTTP requests med sprite-sheets

Udover selve billedfilernes størrelse, påvirker antallet a HTTP anmodninger også en sides load time hver gang du bruger et billede skal klienten anmode serveren om billedet og vente på at serveren svarer. En løsning på dette problem kan være at lave et såkaldt sprite-sheet. Et sprite-sheet er et enkelt billede som indeholder en mængde mindre billeder. Teknikken er særlig effektiv til UI elementer og ikoner. For at bruge sprite-sheetet ændrer du simpelthen billedets position med CSS for forskellige elementer således at hvert enkelt element kun viser den ønskede del af billedet. Da det store billede bliver lageret i browserens cache kan du have lige så mange HTTP anmodninger til billedet som du vil uden at påvirke sidens load time.

Seamless Images

Denne teknik er særdeles effektiv til bagrunds teksturer. Idéen består I at gentage et lille billede over et stort område. For at undgå synlig “fliselæging” må du sikre di at billedets hjørner flydende passer sammen. Der findes en del online-ressourcer for denne slags teksturer men du kan også prøve at lave dine egne. Tag et billede af et stykke stof, en betonmur eller hvad du nu finder på. Brug PhotoShops eller Gimps Offset funktions til at flytte billedet 50% på hver akse. Dette vil resultere i at billdets kanter mødes i midten af billedet og danner et kors. Brug kloings-værktøjet til til at fjerne korset. Hvis det lykkes har du nu et billede der kan gentages uendeligt. Husk at skalere billedet til en fornuftig størrelse.

lav din egen baggrund

Optimering af baggrundsbilleder med Media Queries

Med media queries for dine style-regler kan du specificere forskellige billeder til forskellige opløsninger og dermed begrænse eller helt udelade billeder til mindre enheder. Hvis du designer efter Mobile First princippet bliver ingen af dine style propperties til store skærme (incl. store baggrunds-billeder) indlæst på mobiler eller tablets.

Vektor grafik

SVG kan bruges i img tags, som CSS baggrunds-billeder eller indlejres direkte i din mark-up med et svg tag. Sidstnævnte medtode vil spare dig for en HTTP request og tillade dig at ændre fill og stroke farver med CSS, men inlejret SVG kode vil selvfølgelig gøre din mark-up mere uoverskueslig. Vektor grafik kan skaleres til hvilken som helst størrelse uden tab. Efterhånden er SVG rigtig godt understøttet i alle browsere, men ikke implementeret i IE8 og browsere i ældre Android enheder. Du kan dog nemt lave et inline bitmap fallback hvis du vil understøtte disse browsere vha. en onerror attribut:

<img src="image.svg" onerror="this.src='image.png'; this.onerror=null;" alt="Mit billede">
(Det er vigtigt at sætte onerror attributten til null efter at have ændret src attributten. Ellers vil error eventen gentages ustandseligt i tilfælde af at image.png ikke kan findes/loades)

Illustrator og InkScape can exportere optimerede SVG filer men du kan også åbne dine SVG filer i en tekst-editor og manuelt fjerne uønskede kommentarer, attributer og white space men dine SVG tags bør indeholde width -og height- attributter med 100% som værdier for begge og ligeledes en viewbox attribut Hvor billedets originale proportioner er angivet. Hvis du udelader disse attributter kan det give problemer i visse browsere.

<svg height="100%" width="100%" viewBox="0 0 50 50">
 	<!-- billed-data her -->
</svg>

Lazy Load af billeder

Lazy Loading er en teknik til at loade billeder efterhånden som de er i brugerens viewport. Metoden er særlig brugbar på lange sider med mange billeder. I tilfælde af at brugeren aldrig scroller ned på siden er der jo ikke grund til at loade de nederste billeder. Chris Coyier og Lorenzo Giuliani har publiceret dette script så man relativt nemt kan implementeres lazy loading. Idéen er at starte med at angive et lille usynligt placeholder-billede som src attribut på alle billeder og derefter bruge JavaScript til at registrere om billedet er i brugerens viewport. I så fald udskiftes billedet med det "rigtige" billede som er blevet angivet i en data-attribut. Man kan betvivle hvorvidt søgemaskiner vil registrere billederne. Så hvis du vil have dine billeder indexeret kan det godt være du skal undlade at bruge denne teknik.