Imagens responsivas

Uma alternativa para não precisar fazer várias imagens seria aquela técnica de imagem compressiva comentada neste curso (capítulo 6).

Ou seja, gerar uma imagem com tamanho grande mas com baixa qualidade.

No curso tem um link de exemplo

http://sergiolopes.org/livro-web-mobile/exemplos/retina.html

Olá Daniel, vlw pelo retorno.

Deixa eu ver se eu entendi, no caso quando eu estiver desenvolvendo o backend do meu CMS, eu faria o upload de uma imagem de alta resolução(retina) de por exemplo 1000 x 1000 com qualidade de 20, ai quando eu for salvar essa imagem, eu poderia fazer um "crop" dela e gerar uma outra imagem de 500 x 500 numa qualidade de 80, seria isso?

A idéia seria você redimensionar a imagem na página, por exemplo, aplicar uma classe CSS na imagem, e de acordo com a resolução, alterar as dimensões para ser compatível.

Por isso que a imagem tem um tamanho grande (por exemplo 1000 x 1000), mas uma qualidade baixa, o que vai gerar um arquivo com menos bytes.

Desta forma, não precisaria criar uma imagem para cada resolução, o que diminui o seu trabalho e também diminui o espaço gasto para armazenar arquivos no site.

Para nós que somos desenvolvedores, não haveria problema em fazer o upload do original e gerar via programação cópias da imagem com dimensões e qualidades diferentes. Eu por exemplo gero 2 imagens, eu gero um thumb para a listagem de produtos, e uma imagem principal num tamanho predeterminado para a página de detalhes do produto. Essa imagem principal é a mesma, não importa a resolução.

Esse exemplo citado do curso, a meu ver, é uma solução interessante para este tipo de necessidade.

Bom dia Daniel,

Deixa eu ir por etapas então, primeiro faco o upload do arquivo grande( 1000 x 1000 numa qualidade 20 para ficar mais leve por exemplo) ta aqui blz certo?

Passo 2, vamos supor que na tela de produtos eu preciso mostrar essa imagem com sua descrição, para eu saber se é um desktop, mobile ou retina eu usaria media queries para esse proposito? Verifico o breakpoint que está e apenas altero o width e height da imagem?

Outra solução sem ser por media queries não tem como saber se é mobile né no exemplo abaixo

<img src="produto.png"    srcset="produtohd.png 2x, produto.png 1x">