Vanlige eksempler på bildetyper på nettet inkluderer GIF, JPG, og PNG. SVG-filer. Disse forskjellige formatene tilbyr webdesignere forskjellige muligheter for å optimalisere den visuelle appellen til et nettsted.
GIF-bilder
Bruk GIF-filer til bilder som har et lite, fast antall farger. GIF-filer reduseres alltid til ikke mer enn 256 unike farger. Komprimeringsalgoritmen for GIF-filer er mindre kompleks enn for JPG-filer, men når den brukes på flate fargebilder og tekst, gir den veldig små filstørrelser.
GIF-formatet er ikke egnet for fotografiske bilder eller bilder med gradientfarger. Fordi GIF-formatet har et begrenset antall farger, vil graderinger og fotografier ende med bånd og pikselering når de lagres som en GIF-fil.
JPG-bilder
Bruk JPG-bilder til fotografier og andre bilder som har millioner av farger. Den bruker en kompleks komprimeringsalgoritme som lar deg lage mindre grafikk ved å miste noe av kvaliteten på bildet. Dette kalles en "lossy" komprimering fordi noe av bildeinformasjonen går tapt når bildet komprimeres.
JPG-formatet passer ikke til bilder med tekst, store blokker med ensfargede farger og enkle former med skarpe kanter. Dette skyldes at når bildet komprimeres, kan teksten, fargen eller linjene bli uskarpe, noe som resulterer i et bilde som ikke er så skarpt som det ville blitt lagret i et annet format.
PNG-bilder
PNG-formatet ble utviklet som en erstatning for GIF-formatet da det så ut til at GIF-bilder ville bli underlagt et royaltygebyr. PNG-grafikk har bedre kompresjonsrate enn GIF-bilder, noe som resulterer i mindre bilder enn den samme filen som er lagret som en GIF. PNG-filer tilbyr alfa-gjennomsiktighet, noe som betyr at du kan ha områder av bildene dine som enten er helt gjennomsiktige eller til og med bruker en rekke alfa-transparenter. For eksempel bruker en skygge en rekke gjennomsiktighetseffekter og vil være egnet for en PNG (eller du kan bare avslutte oss ved å bruke CSS-skygger i stedet).
PNG-bilder, som GIF, er ikke godt egnet til fotografier. Det er mulig å komme seg rundt båndproblemet som påvirker fotografier som er lagret som GIF-filer med ekte farger, men dette kan resultere i veldig store bilder. PNG-bilder støttes heller ikke godt av eldre mobiltelefoner og funksjonstelefoner.
SVG-bilder
SVG står for Scalable Vector Graphic. I motsetning til de rasterbaserte formatene som finnes i JPG, GIF og PNG, bruker disse filene vektorer for å lage veldig små filer som kan gjengis i alle størrelser uten tap av kvalitet og økning i filstørrelse. De er laget for illustrasjoner som ikoner og til og med logoer.
Forbereder bilder for levering av nettet
Uansett hvilket bildeformat du bruker, må du sørge for at alle bildene på nettstedet er klargjort for levering av nettet. For store bilder kan føre til at et nettsted går sakte og påvirker den generelle ytelsen. For å bekjempe dette, disse bildene må optimaliseres for å finne balansen mellom høy kvalitet og lavest mulig filstørrelse på det kvalitetsnivået.
Å velge riktig bildeformat er en del av kampen, men også å sørge for at du har forberedt filene er neste trinn i denne viktige webleveringsprosessen.