Boas,
Deixo aqui um plugin jquery bem simples para tornar o carregamento de imagens responsivo. Comentem! Image may be NSFW.
Clik here to view.
Notas:
1. incluir o plugin na tag <body> logo a seguir a carregar o jquery, não é preciso esperar pelo evento document onload.
2. A imagem carregada por defeito deve ser a de menor tamanho em kb (phone), depois será carregada a imagem desktop ou tablet conforme a dimensão da janela
3. Compatível com outros plugins de galerias de imagens
4. Simples gestão de imagens: no caso de gerar imagens no lado do servidor, basta criar duas pastas (tablet e desktop) e gerar imagens com o mesmo nome nessas pastas. Assim, basta adicionar ao nome da imagem o prefixo com o nome da pasta (ex. tablet/imagem.jpg)
Código (HTML):
Ficheiro ajeita.js
Código (Javascript):
Deixo aqui um plugin jquery bem simples para tornar o carregamento de imagens responsivo. Comentem! Image may be NSFW.
Clik here to view.

Notas:
1. incluir o plugin na tag <body> logo a seguir a carregar o jquery, não é preciso esperar pelo evento document onload.
2. A imagem carregada por defeito deve ser a de menor tamanho em kb (phone), depois será carregada a imagem desktop ou tablet conforme a dimensão da janela
3. Compatível com outros plugins de galerias de imagens
4. Simples gestão de imagens: no caso de gerar imagens no lado do servidor, basta criar duas pastas (tablet e desktop) e gerar imagens com o mesmo nome nessas pastas. Assim, basta adicionar ao nome da imagem o prefixo com o nome da pasta (ex. tablet/imagem.jpg)
Código (HTML):
<img src="imagem.jpg" data-tablet="tablet/imagem.jpg" data-desktop="desktop/imagem.jpg" />
<script type="text/javascript" src="jquery.js">
<script type="text/javascript" src="ajeita.js">
<script type="text/javascript" src="jquery.js">
<script type="text/javascript" src="ajeita.js">
Ficheiro ajeita.js
Código (Javascript):
(function ( $ ) {
var el, w = $(document).width();
return $('img').each(function (i, item) {
el = $(item);
el.attr('src', el.data('desktop') && w >= 1200 ? el.data('desktop') : el.data('tablet') && w >= 768 ? el.data('tablet') : el.attr('src'));
});
}( jQuery ));
var el, w = $(document).width();
return $('img').each(function (i, item) {
el = $(item);
el.attr('src', el.data('desktop') && w >= 1200 ? el.data('desktop') : el.data('tablet') && w >= 768 ? el.data('tablet') : el.attr('src'));
});
}( jQuery ));