Wir bloggen zu vielen Themen rund um Typo3 und Java/J2EE

Große Bilder können zwar verkleinert dargestellt werden, laden aber unnötige Datenmengen. Sven Wolfermann zeigt in seinem Beitrag unter http://maddesigns.de/responsive-images/wmka.html verschiedene Lösungsmöglichkeiten auf

Wir haben uns für Darstellung der Bilder auf der Startseite von xanders.de für die <noscript>-Lösung mit HTML5 data-Attributen entschieden. Assets die im <noscript>-Tag eingebunden sind, werden nicht vom Browser in den DOM eingefügt (und geladen), wenn JavaScript aktiviert ist. Ressourcen werden also nicht doppelt geladen. Erst beim Laden der Seite erfolgt das Rendering des entsprechenden Bildes.

<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);
    });
});