Solucionado
Boa tarde.
Na aula sobre Imagens Responsivas foi explicado o conceito de Compressive Images onde basicamente se dobra o numero de pixeis de uma imagem jogando a qualidade lá embaixo. Dessa forma, em uma tela retina a imagem terá boa aparência, mas numa tela normal (1x) ela fica enorme e pixelada. Eu entendi que em telas normais é preciso comprimir a imagem para que ela fique com o mesmo tamanho da original. A minha dúvida é como fazer isso em CSS.
hoje, com a Alura e o Google Gemini
Oi Airton tudo bem?
Achei um tópico onde a mesma dúvida que você teve é abordada. Dá uma olhadinha https://cursos.alura.com.br/forum/topico-compressive-imagens-54156
Espero ter ajudado!!!
Boa noite André, tudo bem.
Já tinha visto este tópico, porém, preciso de algo mais generalista. Por exemplo, em todas as imagens no corpo dos posts do meu blog aplico max-width: 100%; para que as imagens não vazem nem espichem. Seria perfeito se eu pudesse, de alguma forma, detectar as dimensões de cada imagem e aplicar um "zoom out de 50%" porque aí a imagem que dobrei de tamanho pela técnica de compressive image voltaria a aparecer com o tamanho original para as telas 1x. Para telas 2x, simplesmente permitiria que as imagens carregassem com seu tamanho normal separando esses mundos com media queries.
Grato
Com CSS não vejo saída. Vamos precisar usar Javascript.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<script>
function main(){
imagens=document.getElementsByTagName("img");
tamanhoDaTela=window.innerWidth;
tamanhoDaTelaPequena=552;
tamanhoIdealTelaGrande=500;
if (tamanhoDaTela>=tamanhoDaTelaPequena){
for (imagem of imagens){
if (imagem.width<=tamanhoIdealTelaGrande){
imagem.width=imagem.width*2;
}
}
}
}
</script>
</head>
<body onload="main();">
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/e/e0/Nocopyright.svg/125px-Nocopyright.svg.png">
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/e/e0/Nocopyright.svg/125px-Nocopyright.svg.png">
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/e/e0/Nocopyright.svg/125px-Nocopyright.svg.png">
</body>
</html>
Quando carrega a página no tamanho desktop o javascript multiplica por 2 o tamanho de todas as imagens, quando carrega a página no tamanho mobile o javascript não faz nada.