Solucionado
Olá, fiquei com dúvida de como aplicar o Compressive imagens,
Seria algo como isso?
.img-retina{
background-image: url(img-retina.jpg); // tamanho original 1000px
background-size: 500px 500px;
}
@media (min-resolution: 1.5dppx){
.img-retina{
background-size: auto;
}
}O objetivo deste css é, deixar a imagem boa para ambos os casos, tanto com, quanto sem retina.
Fala ai Nícolas, tudo bem?
Acredito que a melhor maneira para design responsivos é utilizar medidas responsivas, ou seja, %, em, rem, vh, etc...
No seu caso, eu trocaria os PX por %, sendo assim, a imagem irá se auto ajustar em qualquer tamanho de tela.
Espero ter ajudado.
Desculpe a demora, meu pc travou, tive que formata-lo.
Então, não seria bem sobre essa questão a minha dúvida.
O ponto da questão é, como eu aplico na prática, o método de Compressive imagens, baseado nessa aula.
O que eu quis fazer no css da postagem foi, que a img-retina.jpg, só ocupasse seu tamanho original(1000px) SE o monitor/tela que o usuário estiver, for retina, caso não, o tamanho dela fica em 500px, porem a imagem teria um max-width: 100%;, o que não quebraria o layout, seria auto ajustável de acordo com o tamanho da tela do dispositivo, mas o ponto nem é esse de quebrar ou não o layout, o ponto mesmo é se está correto a maneira com que eu apliquei o css com o objetivo de utilizar o metodo compressive imagens.
Então, o ideal seria você trabalhar com formatos responsivos, por exemplo o .svg, mas nem sempre isso será possível, imagine uma vitrine de produtos, as imagens certamente serão jpg ou png.
Mas, respondendo sua pergunta, na minha opinião não vejo nada de errado, já fiz isso em alguns momentos, trocava o px da imagem de acordo com a resolução da tela(media querie), exatamento da forma que você esta fazendo.
trocava o px da imagem de acordo com a resolução da tela(media querie)Matheus Castiglioni
ISSO, esse é o ponto haha, eu não terminei ainda o curso, de web responsive, talvez o professor cite o .svg nas próximas aulas.
você acharia melhor eu colocar nesse exemplo, em vez de background-size: 500px 500px;, eu colocasse width: 50%?
Sim, sempre prefiro utilizar %, porém pode ser que em alguns momentos esse 50% seja mais do que 500px, sacou? Se você quer ter certeza que será 500px independente da tela, poe o 500px 500px direto, senão dê preferência para%.
Matheus Castiglioni, muito obrigado pela atenção, me ajudou bastante ^^.
De nada, sempre que precisar não deixe de criar suas dúvidas \o/