A ideia de imagem responsiva segue o conceito de design responsivo: servir ao usuário a visualização do conteúdo baseado nas configuração de exibição de seu dispositivo.
Como css ainda não possibilita nativamente atender a todas as diferentes medidas de visualização de um número tão grande de dispositivos o jeito é criar break-points
(pontos de quebra) para aplicar regras distintas.
Os principais frameworks com foco em design responsivo nem tem tantos break-points
assim, três ou quatro regras já são o suficiente.
Más inevitavelmente se o foco é reduzir carga de download do usuário na hora de exibir imagens e com isso diminuir o tempo de carregamento da página em dispositivos de capacidade de visualização menores o jeito é ter mais de uma fonte para mesma imagem.
Supondo que o site|projeto tenha três imagens diferentes servindo três tipos de medidas exemplo: imagem-grande.jpg para resoluções grandes (ou a imagem original mesmo), imagem-media.jpg para uma resulução média e imagem-pequena para resoluções pequenas basta definir no css que o elemento img
como relativo e que ocupe no máximo 100% do container e na tag img
definir um width
igual a 100% exemplo:
// css
img{
position:relative;
max-width:100%;
}
// e no html (img)
<img src="imagem-grande.jpg" width="100%">
Isso faria a image ocupar 100% da largura de seu container.
Seguindo este raciocínio bastaria ter três imagens com uma classe css para atribuir um display:none;
dentro de media queries fazendo assim com que apenas a imagem que se enquadre na media-query corrente seja exibida exemplo:
// ocultar todas as classes preventivamente
.big-image,.large-image,.small-image{
display: none;
}
@media (min-width: 640px) {
.big-image,.large-image{
display: none;
}
.small-image{
display: block;
}
}
@media (min-width: 992px) {
.big-image,.small-image{
display: none;
}
.large-image{
display: block;
}
}
@media (min-width: 1200px) {
.large-image,.small-image{
display: none;
}
.big-image{
display: block;
}
}
// e no html seria algo como:
<img src="imagem-grande.jpg" class="big-image" width="100%">
<img src="imagem-media.jpg" class="large-image" width="100%">
<img src="imagem-pequena.jpg" class="small-image" width="100%">
Caso queira atribuir um efeito para transição (caso o usuário redimensione) basta criar uma classe css para tal como por exemplo:
// regular o tempo do efeito de transição
.transition{
transition: all 1.0s;
}
// no html basta adicionar esta classe ex:
<img src="imagem-grande.jpg" class="transition big-image" width="100%">
<img src="imagem-media.jpg" class="transition large-image" width="100%">
<img src="imagem-pequena.jpg" class="transition small-image" width="100%">
Também existem diversas bibliotecas javascript
para trabalhar neste sentido talvez a mais conhecida seja picturefill contudo o atributo picture
e todas as suas variantes ainda não é suportado por todos os navegadores e não ha suporte em navegadores mais antigos (embora existam bibliotecas javascript para tentar dar este "suporte").
Para uma referencia a suporte e exemplos mais detalhados para o uso da tag picture
podem ser encontrados em responsiveimages.org.