Når skal du bruke formatene JPG, GIF, PNG og SVG

Grafiske formater utgjør en stor forskjell

Susanty Bong / Getty Images

Vanlige eksempler på bildetyper på nettet inkluderer GIF, JPG og PNG. SVG-filer. Disse forskjellige formatene tilbyr webdesignere ulike alternativer for å optimalisere den visuelle appellen til et nettsted.

GIF-bilder

Bruk GIF-filer for 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, produserer den svært små filstørrelser.

GIF-formatet er ikke egnet for fotografiske bilder eller bilder med gradientfarger. Fordi GIF-formatet har et begrenset antall farger, vil gradienter og fotografier ende opp med bånd og pikselering når de lagres som en GIF-fil.

JPG-bilder

Bruk JPG-bilder for 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 'tap'-komprimering fordi noe av bildeinformasjonen går tapt når bildet komprimeres.

JPG-formatet er ikke egnet for bilder med tekst, store blokker med ensfargede farger og enkle former med skarpe kanter. Dette er fordi når bildet er komprimert, 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 være underlagt en royaltyavgift. PNG-grafikk har en bedre komprimeringsgrad enn GIF-bilder, noe som resulterer i mindre bilder enn den samme filen som er lagret som en GIF. PNG-filer tilbyr alfa-transparens, noe som betyr at du kan ha områder av bildene dine som enten er helt gjennomsiktige eller til og med bruke en rekke alfa-transparens. For eksempel bruker en skygge en rekke gjennomsiktighetseffekter og vil være egnet for en PNG (eller du kan bare avslutte oss med CSS-skygger i stedet).

PNG-bilder, som GIF-er, er ikke godt egnet for fotografier. Det er mulig å omgå 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 svært små filer som kan gjengis i alle størrelser uten tap av kvalitet eller økning i filstørrelse. De er laget for illustrasjoner som ikoner og til og med logoer.

Forbereder bilder for nettlevering

Uansett hvilket bildeformat du bruker, sørg for at alle bildene på det nettstedet er det klargjort for nettlevering . For store bilder kan føre til at et nettsted kjører sakte og påvirker den generelle ytelsen. For å bekjempe dette, må disse bildene 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 disse filene er neste trinn i denne viktige nettleveringsprosessen.