kulturbanause Blog

Responsive Design, WordPress, Konzeption, HTML, CSS, JS & UX/UI …

Responsive Image Replacement mit Breakpoints: 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.

Workshops und Seminare von kulturbanause

Unsere Berlin-Termine für Ende 2017 sind online!

Jetzt Tickets sichern!

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.

Jetzt bist du gefragt!

Hast du Anregungen, Ergänzungen, einen Fehler gefunden oder ist dieser Beitrag nicht mehr aktuell? Dann freuen wir uns auf deinen Kommentar.

Du kannst diesen Beitrag natürlich auch weiterempfehlen. Wir sind dir für jede Unterstützung dankbar!

Unterstützung bei Responsive Design-Projekten

Unsere Agentur ist auf responsive Design spezialisiert. Wir realisieren u.a. maßgeschneiderte Websites und führen Schulungen durch. Wenn du Unterstützung bei der Planung, Gestaltung und Entwicklung einer Website im Responsive Design benötigst, helfen wir gerne weiter.
Responsive Webdesign-Leistungsangebot →

Das könnte dich auch interessieren

Kommentar verfassen

Dieser Blog lebt vom Feedback der Besucher! Also los, mach mit!
Bitte habe Verständnis dafür, dass Kommentare die mit dem Inhalt dieses Beitrags nichts zu tun haben, gelöscht werden.