Entregar imagens redimensionadas em cada "break query" diferen

[Maykel-ctba 233]

Fala galera,

 

Estou montando uma loja online e estou com um pepino de performance que gostaria de resolver. Hoje, utilizo bootstrap 3 para montar o site, e por ele ser responsivo, sempre entrego a "maior imagem" que será usada, porém, conforme as telas mudam (celulares, monitores menores), elas irão carregar essa mesma imagem maior, mesmo sendo responsiva.

 

Por exemplo, tenho uma imagem que é entregada ao browser em 740x885, pois é o maior tamanho utilizado (quando navego no celular, este é o tamanho em que ela é exibida). Porém, em monitores maiores, por conta do grid, esta imagem é entregue nesta medida, mas é apresentada em 211x252.

 

Já existe alguma maneira de fazer a entrega destas imagens adaptadas de acordo com os "breakpoints"?

Por exemplo, o layout muda de acordo com os seguintes breakpoints:

• 1px a 767px
• 768px a 991px
• 992px a 1199px
• Acima de 1200px

Se existir alguma maneira eficiente, seja em JS, seja HTML, seja qualquer coisa. Eu posso gerar a medida que eu quiser através do meu sistema de thumbnails, ele permite o crop automático, então se precisar, posso fazer algo do tipo...

 

data-break01="imagemMenor01.jpg"

data-break02="imagemMenor02.jpg"

data-break03="imagemMenor03.jpg"

data-break04="imagemOriginal.jpg"

 

O problema seria como "cambiar" entre as imagens na abertura da página ou enquanto eu movo o canvas do navegador.

[L. Henrique 179]

Maykel,

Com o uso dos media queries você consegue definir um background-image para diferentes tamanhos de tela, mas se o CSS não for o suficiente ou você esteja trabalhando com tag img, você pode recorrer ao width() do jQuery. Exemplo:

var window = $(window).width();
var img = $('img');

if ( window < 400 ) {
   img.attr('src', 'imagem.jpg');
} else if ( window < 300 ) {
   img.attr('src', 'imagem2.jpg');
} else {
   img.attr('src', 'imagem3.jpg');
}

Abraços!

[Electronic 124]

Não sei se ja tão usando por ai mas isso é legal

<picture>
    <source sizes="100%" srcset="pic400.jpg 400w, pic800.jpg 800w, pic1600.jpg 1600w">
    <img src="pic400.jpg" alt="descrição da imagem">
</picture>

mais soluçoes http://tableless.com.br/imagens-responsivas-de-alta-performance/