Skip to main content
2 de 2
correções
Lauro Moraes
  • 4mil
  • 4
  • 28
  • 47

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.

Lauro Moraes
  • 4mil
  • 4
  • 28
  • 47