Det finnes en rekke bildeformater som kan brukes på nettsider. Noen vanlige eksempler er GIF, JPG og PNG. SVG-filer brukes også ofte på nettsteder i dag, noe som gir webdesignere enda et alternativ for elektroniske bilder.
GIF-bilder
Bruk GIF-filer for bilder som har et lite, fast antall farger. GIF-filer blir alltid redusert 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 det 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 banding og pixelasjon når de lagres som en GIF-fil.
I et nøtteskall vil du bare bruke GIFer for enkle bilder med bare noen få farger, men du kan også bruke PNGs for det også (mer om det kort tid).
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 "lossy" komprimering fordi noe av bildedata går tapt når bildet er komprimert.
JPG-formatet passer ikke til bilder med tekst, store blokker med solid farge og enkle former med skarpe kanter. Dette skyldes at 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 bli lagret i et annet format.
JPG-bilder brukes best til fotografier og bilder som har mange naturlige farger.
PNG-bilder
PNG-formatet ble utviklet som en erstatning for GIF-formatet da det viste seg at GIF-bilder ville bli gjenstand for royaltyavgift. PNG-grafikk har en bedre komprimeringsrate 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 er enten helt gjennomsiktige eller til og med bruke en rekke alfa gjennomsiktighet. For eksempel bruker en dropshadow en rekke gjennomsiktighetseffekter og vil være egnet for en PNG (eller du kan bare ende oss med CSS-skygger i stedet).
PNG-bilder, som GIF, er ikke godt egnet til fotografier. Det er mulig å omgå båndproblemet som påvirker fotografier lagret som GIF-filer ved hjelp av ekte farger, men dette kan resultere i svært store bilder. PNG-bilder støttes heller ikke godt av eldre mobiltelefoner og funksjonstelefoner.
Vi bruker PNG for alle filer som krever gjennomsiktighet. Vi bruker også PNG-8 for alle filer som vil være egnet som en GIF, i stedet for dette PNG-formatet.
SVG-bilder
SVG står for skalerbar vektorgrafikk. I motsetning til rasterbaserte formater som finnes i JPG, GIF og PNG, bruker disse filene vektorer til å lage svært små filer som kan gjengis i hvilken som helst størrelse uten tap av kvalitet for økning i filstørrelse. De er laget for illustrasjoner som ikoner og jevn logoer.
Klargjøre bilder for weblevering
Uansett hvilket bildformat du bruker, og nettstedet ditt er sikker på å bruke en rekke forskjellige formater på alle sidene sine, må du sørge for at alle bildene på dette nettstedet er forberedt på weblevering. For store bilder kan føre til at et nettsted kjører sakte og påvirker ytelsen generelt. For å bekjempe dette må disse bildene optimaliseres for å finne balansen mellom høy kvalitet og den laveste filstørrelsen mulig på det kvalitetsnivået.
Å velge riktig bildeformat er en del av kampen, men også å sørge for at du har forberedt disse filene, er det neste trinnet i denne viktige webleveringsprosessen.
Opprinnelig artikkel av Jennifer Kyrnin. Redigert av Jeremy Girard.
