IMG: Responsividade com <picture>

Referências

Roteiro

1) Use placeholders durante a construção do layout.

2) Inspecione o elemento para obter as larguras da imagem em telas de desktop, tablet e celular

3) Use o ImageMagick para produzir 12 imagens:

Formato	Breakpoint	Densidade de pixels
(WebP, MozJPEG)	(Desktop, Tablet, Mobile)	(1x, 2x)

Aplicação

1) Use placeholders durante a construção do layout.

<img src="https://via.placeholder.com/800" style="width:100%">

2) Inspecione o elemento para obter as larguras da imagem em telas de desktop, tablet e celular. Verifique as dimensões abaixo em seu layout:

Desktop: 800opx
Tablet (iPad): 768px
Mobile (iPhone 7): 414px

3) Use o ImageMagick para produzir 12 imagens:

3 breakpoints: Desktop, Tablet, Mobile
2 densidades de pixels: 1x, 2x
2 formatos de imagem: WebP, MozJPEG

Breakpoint	Densidade de pixels	Largura da Imagem	Formatos de Imagem
Desktop	1x	800px	WebP, MozJPEG
Tablet	1x	768px	WebP, MozJPEG
Mobile	1x	414px	WebP, MozJPEG
Desktop	2x	1600px	WebP, MozJPEG
Tablet	2x	1136px	WebP, MozJPEG
Mobile	2x	828px	WebP, MozJPEG

$ F_NAME=japan-market-osaka-1160297
$ F_EXT=jpg

#resised
$ convert $F_NAME.$F_EXT -quality 80 -resize 800 output/$F_NAME-resized.$F_EXT

#webp
$ convert $F_NAME.$F_EXT -quality 80 -resize 800  output/$F_NAME-lg_1x.webp
$ convert $F_NAME.$F_EXT -quality 80 -resize 768  output/$F_NAME-md_1x.webp
$ convert $F_NAME.$F_EXT -quality 80 -resize 414  output/$F_NAME-sm_1x.webp
$ convert $F_NAME.$F_EXT -quality 80 -resize 1600 output/$F_NAME-lg_2x.webp
$ convert $F_NAME.$F_EXT -quality 80 -resize 1136 output/$F_NAME-md_2x.webp
$ convert $F_NAME.$F_EXT -quality 80 -resize 828  output/$F_NAME-sm_2x.webp

# mozpeg
$ convert $F_NAME.$F_EXT -resize 800  PNM:- | cjpeg -quality 80 -outfile output/$F_NAME-lg_1x.jpg
$ convert $F_NAME.$F_EXT -resize 768  PNM:- | cjpeg -quality 80 -outfile output/$F_NAME-md_1x.jpg
$ convert $F_NAME.$F_EXT -resize 414  PNM:- | cjpeg -quality 80 -outfile output/$F_NAME-sm_1x.jpg
$ convert $F_NAME.$F_EXT -resize 1600 PNM:- | cjpeg -quality 80 -outfile output/$F_NAME-lg_2x.jpg
$ convert $F_NAME.$F_EXT -resize 1136 PNM:- | cjpeg -quality 80 -outfile output/$F_NAME-md_2x.jpg
$ convert $F_NAME.$F_EXT -resize 828  PNM:- | cjpeg -quality 80 -outfile output/$F_NAME-sm_2x.jpg

4) <picture> element

<picture>
<source media="(min-width: 800px)" 
  srcset="$F_NAME-lg_1x.webp 1x, $F_NAME-lg_2x.webp 2x"
  type="image/webp">
<source media="(min-width: 415px)" 
  srcset="$F_NAME-md_1x.webp 1x, $F_NAME-md_2x.webp 2x"
  type="image/webp">
<source media="(max-width: 414px)" 
  srcset="$F_NAME-sm_1x.webp 1x, $F_NAME-sm_2x.webp 2x"
  type="image/webp">
<source media="(min-width: 800px)" 
  srcset="$F_NAME-lg_1x.jpg 1x, $F_NAME-lg_2x.jpg 2x"
  type="image/jpg">
<source media="(min-width: 415px)" 
  srcset="$F_NAME-md_1x.jpg 1x, $F_NAME-md_2x.jpg 2x"
  type="image/jpg">
<source media="(max-width: 414px)" 
  srcset="$F_NAME-sm_1x.jpg 1x, $F_NAME-sm_2x.jpg 2x"
  type="image/jpg">
<img src="$F_NAME-sm_1x.jpg" type="image/jpg" alt="Legenda da imagem" style="width:100%">
</picture>

Resultado (até agora)

Lazy Loading com Lazysizes

Referência:

Images that are offscreen during the initial pageload are ideal candidates for this technique. Best of all, lazysizes makes this a very simple strategy to implement.

5) LQIP (Low Quality Image Placeholder) pattern

$ convert $F_NAME.$F_EXT -quality 80 -resize 100 PNM:- | cjpeg -outfile output/$F_NAME-lqip.jpg

6) Add Script and Update Image Tags

<script src="https://cdnjs.cloudflare.com/ajax/libs/lazysizes/4.1.5/lazysizes-umd.min.js"></script>

Before	After
`<img src="flower.jpg">`	`<img data-src="flower.jpg" class="lazyload">`

Resultado

<picture>
  <source media="(min-width: 800px)" 
    srcset="$F_NAME-lqip.jpg"
    data-srcset="$F_NAME-lg_1x.webp 1x, $F_NAME-lg_2x.webp 2x"
    type="image/webp"
    class="lazyload">
  <source media="(min-width: 415px)" 
    srcset="$F_NAME-lqip.jpg"
    data-srcset="$F_NAME-md_1x.webp 1x, $F_NAME-md_2x.webp 2x"
    type="image/webp"
    class="lazyload">
  <source media="(max-width: 414px)" 
    srcset="$F_NAME-lqip.jpg"
    data-srcset="$F_NAME-sm_1x.webp 1x, $F_NAME-sm_2x.webp 2x"
    type="image/webp"
    class="lazyload">
  <source media="(min-width: 800px)" 
    srcset="$F_NAME-lqip.jpg"
    data-srcset="$F_NAME-lg_1x.jpg 1x, $F_NAME-lg_2x.jpg 2x"
    type="image/jpg"
    class="lazyload">
  <source media="(min-width: 415px)" 
    srcset="$F_NAME-lqip.jpg"
    data-srcset="$F_NAME-md_1x.jpg 1x, $F_NAME-md_2x.jpg 2x"
    type="image/jpg"
    class="lazyload">
  <source media="(max-width: 414px)" 
    srcset="$F_NAME-lqip.jpg"
    data-srcset="$F_NAME-sm_1x.jpg 1x, $F_NAME-sm_2x.jpg 2x"
    type="image/jpg"
    class="lazyload">
  <img src="$F_NAME-sm_1x.jpg"
    type="image/jpg" 
    alt="Legenda da imagem"
    style="width:100%">
</picture>