Responsive Images on the web

The old ways

img{
  width: 100%;
  height: auto;
}

img{
  width: auto;
  height: 100%;
}

Sätt max-width på 100%

Sätt bredd på parent-element

Knepigt

Bilden anpassas efter sidan men själva bilden är fortfarande lika stor (storlek, bredd, höjd)

srcset

srcset

Knepiga algoritmer bestmmer vilken bild som ska användas

srcset

1x, 2x, 3x storleken på bilden

img properties

• src : default
• srcset : alternativa sources
• w: bredd (width)
• sizes : storlekar baserat på media queries

Kodexempel

<picture>

picture properties

• srcset : alternativa sources
• w: bredd (width)
• sizes : storlekar baserat på media queries
• type : låt browsern välja mellan olika filformat

<picture> är inte elementet som ska stylas, fortfarande <img>

SVG

Scalable Vector Graphics

Representation av en bild på ett koordinatsystem

.box{
  position: absolute;
  top:0;
  left: 0;
  width: 200px;
  height: 200px;
}
        

I SVG

0,0 - 0,200 - 200, 200 - 200, 0

• rect
• circle
• line
• polyline
• path

Kodexempel