SlideShare une entreprise Scribd logo
1  sur  22
Télécharger pour lire hors ligne
Introduksjonskurs i
web design 4.0




JPG vs PNG vs GIF
Animasjon             Are Sleveland
Bannerproduksjon      VJU Brand and Business Innovation
Hexadesimaler
               #       Definerer at dette er farge

           0           Definerer rødfarge
                   R   Tilsvarer RGB-verdien 3
           3
 #0369CF   6           Definerer grønnfarge
                   G   Tilsvarer RGB-verdien 105
           9
           C           Definerer blåfarge
                   B   Tilsvarer RGB-verdien 207
           F
Brukeren
Dagen idag

1. JPG vs PNG vs GIF
2. Bildeoptimalisering
2. Animasjoner
3. Kravspesifikasjoner
4. 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 kb
       GIF 8-bit - 685 kb
      PNG 8-bit - 607 kb
     JPG Full size - 1,4 Mb
    PNG full size - 2,1 Mb
Konklusjon
Bruk JPG på fotografier med mye informasjon og gradienter.
Bruk PNG på transparente bilder, logoer, vektorgrafikk og bilder
med harde linjer og
Ikke bruke GIF, til annet enn animasjoner.
Formater
Web
Toppbanner: 980x150 - 60kb
Skyskraper1: 180x500 - 50kb
Nettbrett
Netboard1: 580x400 - 50kb
Mobil
Toppbanner: 468x100 - 16kb
Netboard1: 468x200 - 20kb
851x315 px
NKF web design 4

Contenu connexe

En vedette

Colegio de Bachilleres del Estado de Querero
Colegio de Bachilleres del Estado de QuereroColegio de Bachilleres del Estado de Querero
Colegio de Bachilleres del Estado de QuereroAnaCeciliaRamirez
 
Stm renovation july 2013
Stm renovation july 2013Stm renovation july 2013
Stm renovation july 2013btremel
 
евгения овчинникова. операционное управление стартапом
евгения овчинникова. операционное управление стартапомевгения овчинникова. операционное управление стартапом
евгения овчинникова. операционное управление стартапомniksanta
 
Chapter 5 something less than nothing
Chapter 5 something less than nothingChapter 5 something less than nothing
Chapter 5 something less than nothingsaw kyaw zin htun
 
Forebyggelse af digital mobning - afsluttende seminar 2011
Forebyggelse af digital mobning - afsluttende seminar 2011Forebyggelse af digital mobning - afsluttende seminar 2011
Forebyggelse af digital mobning - afsluttende seminar 2011Icph
 
Filippe starck apresentaçao power point 013
Filippe starck apresentaçao power point 013Filippe starck apresentaçao power point 013
Filippe starck apresentaçao power point 013Mhaul Zanardi
 
Indicazioni stradali
Indicazioni stradaliIndicazioni stradali
Indicazioni stradalilaf online
 
Williams Legacy - Gen. 4, Kap. 7
Williams Legacy - Gen. 4, Kap. 7Williams Legacy - Gen. 4, Kap. 7
Williams Legacy - Gen. 4, Kap. 7Catten
 
Matsvinn - from field to fork
Matsvinn - from field to forkMatsvinn - from field to fork
Matsvinn - from field to forkAxtalk
 
Como ingresar a su cuenta de correo @educ.ar (2)
Como ingresar a su cuenta de correo @educ.ar (2)Como ingresar a su cuenta de correo @educ.ar (2)
Como ingresar a su cuenta de correo @educ.ar (2)inebrac
 
праздник первой оцеки 1
праздник первой оцеки 1праздник первой оцеки 1
праздник первой оцеки 1borok5
 
Trabajo Final - Diapositivas_294
Trabajo Final - Diapositivas_294Trabajo Final - Diapositivas_294
Trabajo Final - Diapositivas_294Mariadeli Perlaza
 
Viaje Lisboa Amigos Museos 20-23 mayo 2010
Viaje Lisboa Amigos Museos 20-23 mayo 2010Viaje Lisboa Amigos Museos 20-23 mayo 2010
Viaje Lisboa Amigos Museos 20-23 mayo 2010amigosdelaalcazaba
 
Práctica cotidiana de las rp
Práctica cotidiana de las rpPráctica cotidiana de las rp
Práctica cotidiana de las rpprofesorserval
 

En vedette (20)

Colegio de Bachilleres del Estado de Querero
Colegio de Bachilleres del Estado de QuereroColegio de Bachilleres del Estado de Querero
Colegio de Bachilleres del Estado de Querero
 
Stm renovation july 2013
Stm renovation july 2013Stm renovation july 2013
Stm renovation july 2013
 
евгения овчинникова. операционное управление стартапом
евгения овчинникова. операционное управление стартапомевгения овчинникова. операционное управление стартапом
евгения овчинникова. операционное управление стартапом
 
Tarjetas biostar 2
Tarjetas biostar 2Tarjetas biostar 2
Tarjetas biostar 2
 
Chapter 5 something less than nothing
Chapter 5 something less than nothingChapter 5 something less than nothing
Chapter 5 something less than nothing
 
Untitled 1
Untitled 1Untitled 1
Untitled 1
 
Colaj YSL Tania
Colaj YSL TaniaColaj YSL Tania
Colaj YSL Tania
 
Forebyggelse af digital mobning - afsluttende seminar 2011
Forebyggelse af digital mobning - afsluttende seminar 2011Forebyggelse af digital mobning - afsluttende seminar 2011
Forebyggelse af digital mobning - afsluttende seminar 2011
 
museo virtual
museo virtualmuseo virtual
museo virtual
 
Filippe starck apresentaçao power point 013
Filippe starck apresentaçao power point 013Filippe starck apresentaçao power point 013
Filippe starck apresentaçao power point 013
 
Stores
StoresStores
Stores
 
Indicazioni stradali
Indicazioni stradaliIndicazioni stradali
Indicazioni stradali
 
Williams Legacy - Gen. 4, Kap. 7
Williams Legacy - Gen. 4, Kap. 7Williams Legacy - Gen. 4, Kap. 7
Williams Legacy - Gen. 4, Kap. 7
 
Matsvinn - from field to fork
Matsvinn - from field to forkMatsvinn - from field to fork
Matsvinn - from field to fork
 
PLN
PLNPLN
PLN
 
Como ingresar a su cuenta de correo @educ.ar (2)
Como ingresar a su cuenta de correo @educ.ar (2)Como ingresar a su cuenta de correo @educ.ar (2)
Como ingresar a su cuenta de correo @educ.ar (2)
 
праздник первой оцеки 1
праздник первой оцеки 1праздник первой оцеки 1
праздник первой оцеки 1
 
Trabajo Final - Diapositivas_294
Trabajo Final - Diapositivas_294Trabajo Final - Diapositivas_294
Trabajo Final - Diapositivas_294
 
Viaje Lisboa Amigos Museos 20-23 mayo 2010
Viaje Lisboa Amigos Museos 20-23 mayo 2010Viaje Lisboa Amigos Museos 20-23 mayo 2010
Viaje Lisboa Amigos Museos 20-23 mayo 2010
 
Práctica cotidiana de las rp
Práctica cotidiana de las rpPráctica cotidiana de las rp
Práctica cotidiana de las rp
 

NKF web design 4

  • 1. Introduksjonskurs i web design 4.0 JPG vs PNG vs GIF Animasjon Are Sleveland Bannerproduksjon VJU Brand and Business Innovation
  • 2.
  • 3.
  • 4. Hexadesimaler # Definerer at dette er farge 0 Definerer rødfarge R Tilsvarer RGB-verdien 3 3 #0369CF 6 Definerer grønnfarge G Tilsvarer RGB-verdien 105 9 C Definerer blåfarge B Tilsvarer RGB-verdien 207 F
  • 5.
  • 7. Dagen idag 1. JPG vs PNG vs GIF 2. Bildeoptimalisering 2. Animasjoner 3. Kravspesifikasjoner 4. Bannerproduksjon
  • 8. JPG vs PNG vs GIF
  • 9. 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
  • 10. 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!
  • 11. 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
  • 12.
  • 13. 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.
  • 14. JPG 24-bit komprimert - 601 kb GIF 8-bit - 685 kb PNG 8-bit - 607 kb JPG Full size - 1,4 Mb PNG full size - 2,1 Mb
  • 15. Konklusjon Bruk JPG på fotografier med mye informasjon og gradienter. Bruk PNG på transparente bilder, logoer, vektorgrafikk og bilder med harde linjer og Ikke bruke GIF, til annet enn animasjoner.
  • 16.
  • 17.
  • 18.
  • 19.
  • 20. Formater Web Toppbanner: 980x150 - 60kb Skyskraper1: 180x500 - 50kb Nettbrett Netboard1: 580x400 - 50kb Mobil Toppbanner: 468x100 - 16kb Netboard1: 468x200 - 20kb