O redimensionamento CSS de imagens ainda é uma má idéia?

Sempre foi visto que usar atributos de largura / altura em imagens que não são o que a imagem original é atualmente é uma má ideia. Isso pode significar imagens em pixalated ou tamanhos de download maiores que o necessário.

Mas, isso ainda é um problema? Eu não sugeriria o aumento do tamanho das fotos, mas o downsizing não deve ser um problema, desde que não faça muita diferença em relação ao original e mantenha a escala.

Por exemplo, tenho uma foto com 600 x 400 e colo uma largura de 400 x nela. O navegador mais moderno reduz a imagem e parece que a renderização ainda é decente.

Então, o que todos vêem sobre isso?

Não se preocupe com o dimensionamento (a maioria dos navegadores fará com que as imagens em escala pareçam bem, na minha experiência), preocupe-se com o tamanho da carga útil que você enviou ao usuário final.

Claro, você pode argumentar que está desperdiçando uma pequena quantidade de largura de banda nas duas extremidades para os pixels extras que você está enviando sem intenção de usar, mas também há um custo de tempo.

Para cada imagem enviada em um tamanho acima do necessário, adicione um pequeno atraso ao carregamento da página para o usuário. Para sites com apenas algumas imagens, isso não será um problema, mas para um site com um grande número de ativos de suporte, você começará a adicionar um atraso perceptível, e o atraso custará dinheiro .

Além disso, no que diz respeito ao pequeno custo de largura de banda, à medida que o tráfego do site aumenta, o mesmo ocorre com o pequeno custo de largura de banda.

Portanto, economize o dinheiro da sua empresa e gaste os 30 segundos necessários para redimensionar a imagem você mesmo! :)

Como sempre, faça seus testes comparativos, mas, a menos que o aplicativo seja realmente popular / de missão crítica, eu não estaria muito preocupado em reduzir de 600 para 400 se estiver em uma situação em que precise alterar a largura com frequência. Se for uma execução única, com certeza, convert -geometry 400x photo1.jpg photo2.jpgmas se for um aplicativo com o qual você está interagindo rapidamente, provavelmente há coisas mais importantes com que se preocupar, mesmo dentro do domínio do desempenho. por exemplo, latência; carregar preventivamente imagens, por exemplo.

O tamanho da imagem pode ser importante em dispositivos móveis, onde tamanhos grandes de imagem têm o efeito triplo de carregar lentamente (banda larga móvel), levar mais tempo para renderizar (hardware de nível inferior) e - uma vez renderizados - não serem totalmente visíveis em alta resolução de qualquer forma.

Você também pode querer procurar imagens responsivas. Há muito trabalho que as pessoas fizeram, por exemplo, reduzir o tamanho automaticamente - e depois armazenar em cache - as imagens no servidor é uma boa abordagem, se isso ocorrer muito.

A questão é a carga útil, o navegador renderizará bem em qualquer tamanho (especialmente tamanhos menores que você está falando)

Para um site de alto volume, mesmo bytes únicos são importantes. Você não deseja enviar dados indesejados.

Falando em má idéia, não é realmente uma má idéia ajustar a largura / altura em alguns pixels ou pode ser 10 ou 20 pixels. Mas é uma péssima idéia se você estiver reduzindo uma imagem grande para uma miniatura :)