Almindelige eksempler på billedtyper på nettet inkluderer GIF, JPGog PNG. SVG-filer. Disse forskellige formater tilbyder webdesignere forskellige muligheder for at optimere den visuelle appel af et websted.
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, producerer den meget små filstørrelser.
GIF-formatet er ikke egnet til fotografiske billeder eller billeder med gradientfarver. Da GIF-formatet har et begrænset antal farver, vil gradienter og fotografier ende med bånd og pixelation, når de gemmes som en GIF-fil.
JPG-billeder
Brug JPG-billeder til fotografier og andre billeder, der har millioner af farver. Det bruger en kompleks komprimeringsalgoritme, der giver dig mulighed for at oprette mindre grafik ved at miste noget af billedets kvalitet. Dette kaldes en "tabsfri" komprimering, fordi noget af billedinformationen går tabt, når billedet komprimeres.
JPG-formatet er ikke egnet til billeder med tekst, store blokke i ensfarvet farve og enkle former med skarpe kanter. Dette skyldes, at når billedet komprimeres, kan teksten, farven eller linjerne sløre, hvilket resulterer i et billede, der ikke er så skarpt, som det ville blive gemt i et andet format.
PNG-billeder
PNG-formatet blev udviklet som erstatning for GIF-formatet, da det så ud til, at GIF-billeder ville blive underlagt 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 fuldt gennemsigtige eller endda bruger en række alfa-gennemsigtighed. For eksempel bruger en skygge en række gennemsigtighedseffekter og vil være egnet til en PNG (eller du kan bare afslutte os ved hjælp af CSS-skygger i stedet).
PNG-billeder, ligesom GIF'er, er ikke velegnede til fotografier. Det er muligt at omgå det bandingproblem, der påvirker fotografier gemt som GIF-filer ved hjælp af ægte farver, men dette kan resultere i meget store billeder. PNG-billeder understøttes heller ikke godt af ældre mobiltelefoner og funktionstelefoner.
SVG-billeder
SVG står for skalerbar vektorgrafik. 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, hvilket øger filstørrelsen. De er oprettet til illustrationer som ikoner og endda logoer.
Forberedelse af billeder til levering af internettet
Uanset hvilket billedformat du bruger, skal du sikre dig, at alle billeder på dette websted er klar til levering af internettet. For store billeder kan få et websted til at køre langsomt og påvirke den samlede præstation. For at bekæmpe dette, disse billeder skal optimeres for at finde balancen mellem høj kvalitet og den lavest mulige filstørrelse på dette kvalitetsniveau.
At vælge det rigtige billedformat er en del af kampen, men det er også det næste skridt i denne vigtige webleveringsproces at sikre, at du har forberedt disse filer.