Nos últimos tempos tem-se observado uma grande evolução e diversidade ao nível das plataformas digitais e como o utilizador interage com elas. Os sites responsive são imprescindíveis nos dias de hoje, já que o número de pessoas a fazer uma utilização regular de internet em dispositivos móveis aumentou drasticamente.

No entanto, a forma como as imagens se relacionam com o site e o dispositivo de visualização, não acompanhou bem esta evolução. De relembrar que as imagens são responsáveis por cerca de 60% do peso do site. Muitas vezes, ao acedermos a sites que não são responsive em smartphone estamos a carregar imagens de resolução desktop com 1920x1080px para serem visualizadas num dispositivo com resolução média de 480x800px. Ou seja, há um maior consumo de dados e de tempo de carregamento do conteúdo de imagens sem necessidade.

Para otimizar este processo é necessário ter em atenção a resolução da imagem, densidade de pixeis (retina), tamanho do ficheiro, alteração da zona de interesse da imagem (crop), que precisam de ser avaliados conforme a tipologia do projeto.

Atualmente já se começa a ver algum esforço por parte dos designers e developers em encontrar soluções, sendo que a ideia será utilizar apenas uma imagem para várias resoluções otimizando o tempo de carregamento, de forma semelhante ao que já existe com ícones e vetores em formato SVG.

Recentemente apareceram alguns scripts que têm vindo a facilitar o processo, mas a solução mais viável será a implementação nativa em html através do w3c que ainda está em desenvolvimento.

Fonte: http://media-cache-ak0.pinimg.com/736x/41/a0/e4/41a0e4ab9751887eb6e03d5bd5cfa5f0.jpg