Um die Funktion des Drupal 7 Moduls "Adaptive Image" zu beschreiben, zitiere ich einfach mal die Modulbeschreibung:
The Adaptive image module provides device-appropriate versions of images from your fields.
You can activate adaptive images by adding an adaptive effect to any of your image styles.The used technique is derived from http://adaptive-images.com/ by Matt Wilcox.
The hard work is done by Drupal core no need for any additional rewrites.
If image styles work on your website, this module will too.Hint: Javascript is needed on the clientside to determine the target resolution
Das Modul erfüllt diese Aufgabe tadellos. Abhängig von der Bildschirmgröße wird das Bild via ImageCache im passenden Format ausgeliefert, sodass nicht unnötig große Bilder an mobile Geräte ausgeliefert werden und die Ladezeit sich damit stark reduziert. Es lassen sich perfekt einzelne Abstufungen der Breite festlegen und somit optimal mit CSS3 Media Queries verbinden.
Einen sehr wichtigen Hinweis muss man allerdings insbesondere an Entwickler geben!
Im Gegensatz zum häufig gewählten Verhalten das Responsive Webdesign auch in verkleinerten Browserfenstern wie auf kleinen Bildschirmen (z. B. mobiler Geräte wie Smartphones oder Tablets) anzuzeigen, verwendet das Modul nicht die Breite des Browserfensters als Berechnungsgrundlage sondern die Bildschirmbreite. Diese Entscheidung der Entwickler ist in vielerlei Hinsicht, gerade in Sachen Caching, Cookies usw. nachvollziehbar, man muss es nur eben wissen.
Zu Testzwecken passe ich daher in der Entwicklung die folgenden Zeilen zur Bestimmung der Bildschirmgröße manuell an, um im Browser testen zu können:
Original Quellcode (Bildschirmbreite verwenden):
$js = "document.cookie = 'adaptive_image=' + Math.max(screen.width, screen.height) + '; path=/';";
?>
Modifizierter Entwicklungs-Quellcode (Browserbreite verwenden):
$js = "document.cookie = 'adaptive_image=' + Math.max(window.innerWidth, window.innerHeight) + '; path=/';";
?>
Wichtig: Nach Änderung der Größe eures Browserfensters, müsst ihr unbedingt manuell den Cookie mit dem Namen "adaptive_image" löschen, dies geht in Firefox beispielsweise sehr bequem mit der "Web Developer Toolbar". Auch für andere Browser gibt es solche Tools!
Die Breite wird beim ersten Laden vom Modul in diesem Cookie gespeichert.
Zuletzt noch kurz die Hinweise zur Installation aus der README.txt des Moduls als Hilfestellung zur Verwendung:
CONFIGURING AND USING
---------------------
1. Go to admin/config/media/image-styles
Edit an existing or add a new style. Add the Adaptive image effect.
Click on 'Update style' button.2. Go to admin/structure/types
Click on "manage display".
Choose a "image" field and click on the edit button.
Choose the previously updated style as image style.
Click on "Update".
Alternativen:
http://drupal.org/project/responsive_images
ist noch eine mögliche Alternative, machte aber direkt mehr Probleme als Adaptive Image und ist weniger pfiffig in Drupal integriert!
http://drupal.org/project/cs_adaptive_image
klingt ebenfalls langfristig sehr sehr interessant!
Also... habt ihr weitere Tipps oder Meinungen?
