Introduksjonskurs iweb design 4.0

JPG vs PNG vs GIFAnimasjonBannerproduksjon

Are SlevelandVJU Brand and Business Innovation

Hexadesimaler

#0369CF

## Definerer at dette er farge

#0369CF

0R Definerer rødfarge

Tilsvarer RGB-verdien 3

#0369CF

3R Definerer rødfarge

Tilsvarer RGB-verdien 3

#0369CF 6G Definerer grønnfarge

Tilsvarer RGB-verdien 105

#0369CF

9G Definerer grønnfarge

Tilsvarer RGB-verdien 105

#0369CF

CB Definerer blåfarge

Tilsvarer RGB-verdien 207

#0369CF

FB Definerer blåfarge

Tilsvarer RGB-verdien 207

Brukeren

Dagen idag

1. JPG vs PNG vs GIF2. Bildeoptimalisering2. Animasjoner3. Kravspesifikasjoner4. Bannerproduksjon

JPG vs PNG vs GIF

JPG (Joint Photographic Experts Group)

Mest brukte format. God komprimeringsevne med 24-bit.

Reduserer filstørrelse ved å fjerne piksler i bildet.

JPG er et lossy format. Kvaliteten i bildet blir dårligere. Bildet taper ytterlig kvalitet for hver gang det lagres. Behold alltid original.

Egner seg spesielt dårlig for typografi og bilder med skarpe kanter

Egner seg best for RGB bilder. Gråskala bilder komprimeres ikke like bra

GIF (Graphics Interchange Format)

Et lossless format med høy komprimeringsevne.

Komprimerer kun bilder i 8-bit, som betyr at det tar utgangspunkt i fargepalett på 256 farger.

Egner seg bra for gråskala bilder da disse alltid er 8-bit.

Egner seg bra for typografi og grafikk (vektor)

GIF kan lagres med transparent bakgrunn

GIF kan animeres!

PNG (Portable Network Graphics)

Et alternativ til GIF med samme lossless kompresjonen.

Komprimere i 8-bit og 24-bit (som JPG)

PNG kan lagres med transparent bakgrunn

Gamle nettlesere kan ikke vise PNG filer

Filstørrelsen er stor etter komprimering

Oppsummering

PNG er et godt valg for bilder med transparent bakgrunn og små bildefiler. Store bilder kan bli tunge.

GIF er et gammelt filformat og kan vanskelig konkurrere med de andre. Brukes ved animasjoner og små 8-bits bilder.

JPG er det mest foretrukne formatet for foto. Men vær forsiktig med å komprimere flere ganger da kvaliteten blir dårligere.

JPG 24-bit komprimert - 601 kbGIF 8-bit - 685 kb

PNG 8-bit - 607 kbJPG Full size - 1,4 MbPNG full size - 2,1 Mb

Konklusjon

Bruk JPG på fotografier med mye informasjon og gradienter.

Bruk PNG på transparente bilder, logoer, vektorgrafikk og bildermed harde linjer og

Ikke bruke GIF, til annet enn animasjoner.

Formater

WebToppbanner: 980x150 - 60kbSkyskraper1: 180x500 - 50kb

NettbrettNetboard1: 580x400 - 50kb

MobilToppbanner: 468x100 - 16kbNetboard1: 468x200 - 20kb

851x315 px