img ja picture elementit

Yksinkertaisin/pienin mahdollinen kuva?
1001011110111
1001010000010
1111011100010
1001010000010
1001011110111
65 bittiä (13*5)

8 bittiä = 1 tavu

1024 tavua = 1 kilotavu (KB)

1024 kilotavua = 1 megatavu (MB)

1 MB = 8 388 608 bittiä

34kilotavua (KB) eli 278 528 bittiä (8*1024*34)

Mitä vikaa?

Kuvan koko: 199KB

Turhan iso!

Asiakas valitti että sivut hidastelee..

Nettisivuilla oli yli 200MB:n kuva!

199KB

54KB

6-vuotias Heikki syö innokkaasti ruisleipää tietokoneen ääressä

    <img src="/img/heikki_500px.jpg" srcset="/img/heikki_750px.jpg 1.5x, /img/heikki_1000px.jpg 2x" alt="6-vuotias Heikki syö innokkaasti ruisleipää tietokoneen ääressä" width="500px" />
  
6-vuotias Heikki syö innokkaasti ruisleipää tietokoneen ääressä

      <picture>
        <source 
        media="(max-width: 799px)" 
        srcset="/img/heikki-zoom.jpg" 
        />
        <source 
        media="(min-width: 800px)" 
        srcset="/img/heikki2.jpg" 
        />
        <img 
        src="/img/heikki.jpg" 
        alt="6-vuotias Heikki syö innokkaasti ruisleipää tietokoneen ääressä" 
        />
    </picture>
  
6-vuotias Heikki syö innokkaasti ruisleipää tietokoneen ääressä

img vai picture?

img tagi automaattisesti kooltaan sopivimman kuvan lataus

picture tagi "art directaukseen"