Bem algumas vezes temos que redimensionar uma imagem para “caber” em um determinado espaço.
O recomendado é que se faça o envio da imagem no tamanho correto, mas já tive algumas experiências que muitas vezes fica inviável redimensionar todas as imagens.
O que acontece em algumas situações é no layout o espaço reservado para a imagem ser reduzido ou aumentado, quando isso acontece é necessário alterar o tamanho para encaixar tudo.
Hoje, meio que por acaso esbarrei com uma propriedade de CSS específica para isso. Fui atrás para ver como funcionava.
A propriedade é a seguinte: -ms-interpolation-mode
É uma propriedade específica para o Internet explorer, já que os navegadores mais modernos já fazem automaticamente a suavização das imagens quando são redimensionadas.
Clique na imagem abaixo para ver o teste:
No Teste da pra ver a diferença gritante da qualidade do redimensionamento.
Para usar esse comandinho é muito simples: Basta adicionar a linha abaixo no CSS da imagem.
-ms-interpolation-mode: bicubic | nearest-neighbor;
O Firefox e outros navegadores modernos como o Chrome e Opera já fazem a suavização automática, porém eles possuem uma propriedade para controlar a renderização da imagem:
image-rendering: auto | inherit | optimizeSpeed | optimizeQuality | -moz-crisp-edges;
Mais informações na documentação no MSDN e na página da Mozilla.
