Der er et antal billedformater, der kan bruges på websider. Nogle almindelige eksempler er GIF, JPG og PNG. SVG-filer bruges også ofte på hjemmesider i dag, hvilket giver webdesignere endnu en mulighed for online-billeder.
GIF-billeder
Brug GIF-filer til billeder, der har et lille, fast antal farver. GIF-filer reduceres altid til ikke mere end 256 unikke farver. Komprimeringsalgoritmen til GIF-filer er mindre kompleks end for JPG-filer, men når den bruges på flade farvebilleder og tekst, produceres der meget små filstørrelser.
GIF-formatet er ikke egnet til fotografiske billeder eller billeder med gradientfarver. Fordi GIF-formatet har et begrænset antal farver, vil gradienter og fotografier ende med banding og pixelation, når de gemmes som en GIF-fil.
I en nøddeskal vil du kun bruge GIF'er til enkle billeder med kun få farver, men du kan også bruge PNG'er til det også (mere om det kort tid).
JPG-billeder
Brug JPG-billeder til fotografier og andre billeder, der har millioner af farver. Den bruger en kompleks komprimeringsalgoritme, der giver dig mulighed for at lave mindre grafik ved at miste noget af billedets kvalitet. Dette kaldes en "lossy" kompression, fordi nogle af billedoplysningerne går tabt, når billedet komprimeres.
JPG-formatet er ikke egnet til billeder med tekst, store blokke i fast farve og enkle former med skarpe kanter. Dette skyldes, at når billedet komprimeres, kan teksten, farven eller linjerne bløre, hvilket resulterer i et billede, der ikke er så skarpt som det ville blive gemt i et andet format.
JPG-billeder bruges bedst til fotografier og billeder, der har masser af naturlige farver.
PNG-billeder
PNG-formatet blev udviklet som en erstatning for GIF-formatet, da det viste sig, at GIF-billeder ville blive omfattet af et royaltygebyr. PNG-grafik har en bedre komprimeringshastighed end GIF-billeder, hvilket resulterer i mindre billeder end den samme fil gemt som en GIF. PNG-filer tilbyder alfa gennemsigtighed, hvilket betyder at du kan have områder af dine billeder, der enten er helt gennemsigtige eller endda bruger en række alfa gennemsigtighed. En dropshadow bruger f.eks. En række gennemsigtighedseffekter og ville være egnet til en PNG (eller du kan bare ende os med CSS-skygger i stedet).
PNG-billeder, som GIF'er, er ikke velegnede til fotografier. Det er muligt at omgå båndproblemet, der påvirker fotografier, der er gemt som GIF-filer, ved hjælp af ægte farver, men det kan resultere i meget store billeder. PNG-billeder understøttes heller ikke godt af ældre mobiltelefoner og funktionstelefoner.
Vi bruger PNG til enhver fil, der kræver gennemsigtighed. Vi bruger også PNG-8 til enhver fil, der ville være egnet som en GIF, ved hjælp af dette PNG-format i stedet.
SVG Images
SVG står for Scalable Vector Graphic. I modsætning til de rasterbaserede formater, der findes i JPG, GIF og PNG, bruger disse filer vektorer til at oprette meget små filer, der kan gengives i enhver størrelse uden tab af kvalitet for stigning i filstørrelse. De er skabt til illustrationer som ikoner og jævne logoer.
Forbereder billeder til weblevering
Uanset hvilket billedformat du bruger, og din hjemmeside er sikker på at bruge en række forskellige formater på alle sine sider, skal du sikre dig, at alle billeder på dette websted er forberedt til weblevering. For store billeder kan få et websted til at køre langsomt og påvirke den samlede ydeevne. For at bekæmpe dette skal disse billeder optimeres for at finde balancen mellem høj kvalitet og den laveste filstørrelse muligt på det kvalitetsniveau.
At vælge det rigtige billedformat er en del af kampen, men også at du har forberedt disse filer er det næste skridt i denne vigtige webleveringsproces.
Originalartikel af Jennifer Kyrnin. Redigeret af Jeremy Girard.
