Responsive Image Replacement mit Breakpoints: Doubletake

doubletake

Im Responsive Webdesign werden Bilder häufig proportional verkleinert um sie auch auf kleinen Displays noch ansehnlich darstellen zu können. Auch auf dieser Seite nutze ich diese Technik; sobald der Inhaltsbereich zu schmal wird, werden die Bilder prozentual zur Gesamtbreite des Inhalts abgebildet.
Diese Variante ist zwar sehr komfortabel - leider werden aber deutlich größere Bilddaten geladen als es für Smartphones überhaupt notwendig ist. Um die Ladezeiten und den Traffic für Besucher mit mobilen Endgeräten gering zu halten, kann es sich daher lohnen verschiedene Bilder für verschiedene Auflösungen anzubieten. Das jQuery-Plugin Doubletake vereinfacht diese Technik.

Trainings für Unternehmen und Privatpersonen

Wir machen dich fit für die Zukunft des Web! In unseren Seminaren und Workshops lernst du wie moderne Websites entstehen.

Infos zu Inhouse-Seminaren
Infos zu öffentlichen Terminen

Breakpoints und Regular Expressions

Das Plugin arbeitet mit Breakpoints für verschiedene Browsergrößen. Sobald ein Breakpoint erreicht wird, kann über ein Regular Expression Muster der Pfad zum Bild ausgetauscht werden.

$('#container').doubletake({
'breakpoints':[480,960],
'pattern':'/images/foobar.jpg?width=([0-9]+)'
});

Um verschiedene Bildgrößen laden zu können müssen auch verschiedene Bilder auf dem Server abgelegt werden. In WordPress könnt ihr sehr einfach über das Theme verschiedene Abmessungen definieren, die dann automatisch beim Upload in die Mediathek generiert werden. Alternativ zu einer On-The-Fly-Optimierung, können die Bilder auch manuell erstellt und anschließend hochgeladen werden.