We blog on many topics around Typo3 and Java / J2EE

Large images can be showed decreased, but load unnecessary amounts of data. Sven Wolfermann shows in his article http://maddesigns.de/responsive-images/wmka.html different solutions.

We have chosen for display of images on the home page of xanders.de for the solution with HTML5 attributes. Assets that are embedded in the <noscript> tag are not included by the browser in the DOM (and loaded) when JavaScript is enabled. Resources are therefore not loaded twice. Rendering is done only when the page  the corresponding image is loading.

<noscript data-large="/fileadmin/templates/img/site/mission-large.jpg"
   data-small="/fileadmin/templates/img/site/mission-small.jpg">
   <img src="/fileadmin/templates/img/site/mission-small.jpg" />
</noscript>

$(document).ready(function() {
   // Mobile Images
    $('noscript[data-large][data-small]').each(function() {
        var $this = $(this);
        var src = window.innerWidth >= 652 ?
                $this.data('large') :
                $this.data('small');
        $('<img src="' + src + '" alt="" />')
                .insertAfter($this);
    });
}
$(window).resize(function() {
    // Mobile Images
    $('noscript[data-large][data-small]').each(function() {
        var $this = $(this);
        $this.next('img').remove();
        var src = window.innerWidth >= 652 ?
                $this.data('large') :
                $this.data('small');
        $('<img src="' + src + '" alt="" />')
                .insertAfter($this);
    });
});