Responsives Webdesign ist für die meisten schon ein Begriff. Er wurde von Ethan Marcotte 2010 zum ersten Mal verwendet (https://alistapart.com/article/responsive-web-design/) und bezieht sich auf ein Webdesign, wo sich die Elemente flexibel verhalten und sich an die Größe des Displays anpassen, z.B. mit Hilfe von „media queries“. Bei Bildern beschränkt sich die Flexibilität auf Größenangaben in Prozent. Das Problem dabei ist, dass man große Bilder für große Displays braucht und diese Bilder werden genauso in mobilen Geräten geladen, nur visuell verkleinert. Das kann bei Benutzern mit schlechter Datenübertragung oder Volumenbegrenzungen zu Schwierigkeiten führen.
Es gibt aber viele Methoden, um Bilder zu optimieren und für verschiedene Geräte richtig darzustellen.
Kleiner Exkurs – Bildformate
PNG
- Verlustfrei
- Unterstützt Transparenz
- Bis zu 16,7 Millionen Farben
- Sehr gut geeignet zur Darstellung einfacher 2-dimensionaler Grafiken und Logos (gute Komprimierung)
JPEG
- Verlustbehaftet (bei jeder Speicherung geht Information verloren)
- Unterstützt keine Transparenz
- Bessere Kompression als PNG bei fotorealistischen Motiven
- Sehr gut geeignet zur Darstellung fotorealistischen Motive (sowie Farbverläufe)
GIF
- Verlustfrei
- Unterstützt Transparenz
- Animierbar
- Beschränkt auf 256 Farben
- Sehr gut geeignet zur Darstellung einfachster 2-dimensionaler Grafiken
SVG
- Skalierbarkeit ohne Qualitätsverlust
- Editierbar und animierbar per CSS/JS/SMIL
- Prinzipiell kleinere Dateigröße als vergleichbare PNG-Dateien
- Sehr gut geeignet zur Darstellung einfacher 2-dimensionaler Grafiken
WebP
- Verlustfrei oder verlustbehaftet
- Unterstützt Transparenz
- Bei hoher Komprimierung bessere Bildqualität als JPEG (25 – 34%) und PNG (26%)
- Sehr gut geeignet zur Darstellung fotorealistischen Motive (sowie Farbverläufe)
Das WebP-Format kann in verschiedenen Grafikprogrammen erzeugt werden: In Photoshop mit einem Plugin. Sketch und GIMP können es nativ. Dazu gibt es diverse Online-Tools.
Große Auswahl an günstigen Domain-Endungen – schon ab 0,08 € /Monat
Jetzt Domain-Check starten
Bildoptimierung
Bevor man Bilder in eine Website einbindet, sollte man sie optimieren. Dafür gibt es verschiedene Tools. In den Grafikprogrammen muss man oft mit den Einstellungen spielen, bis man eine gute Balance zwischen Dateigröße und Qualität findet. Ein bekanntes Online Tool für die Bildoptimierung ist Tiny Png, das trotz des Namens auch JPEG-Dateien optimieren kann.
Zum Bildoptimierungsprogramm Tiny Png
Bildimplementierung
Bilder können als Elemente einer Webseite genutzt werden:
<img src="source.jpg" alt="Beschreibung des Bildes" />
oder als Hintergrundbild eines anderen Elements:
.backgroundcontainer {
background-image: url('backgroundimage.jpg');
}
Die übliche Variante, um diese Bilder responsive zu machen, ist, dass man mit der Breite (width) arbeitet: Sie wird auf 100% gesetzt und die Höhe (height) auf „auto“. Dann skaliert das Bild je nach vorhandenem Platz:
img {
width: 100%;
height: auto;
}
Das Bild ist 640px breit, wird aber durch die Anweisung width: 100% die volle Breite des vorhandenen Platzes annehmen.
Man kann auch die maximale Breite (max-width) definieren, damit das Bild nach unten skaliert, aber nicht größer als die originale Größe werden kann:
img {
max-width: 100%;
height: auto;
}
Das Bild ist immer noch 640px breit und wird nicht breiter werden.
Hintergrundbilder können mit der Eigenschaft „background-size“ auch skalieren. Es gibt zwei Varianten: „contain“ und „cover“.
contain: Das Bild wird skalieren und versuchen, sich an den vorhandenen Platz anzupassen. Es wird dabei das Seitenverhältnis beibehalten.
div {
width: 100%;
height: 400px;
background-image: url('img_flowers.jpg');
background-repeat: no-repeat;
background-size: contain;
border: 3px solid #fc0;
}
Das Bild ist 640px breit und der es umgebende Container 400px hoch. Das Bild nimmt eine Höhe von 400px ein und passt die Breite dementsprechend an.
Wenn wir die Seite in einem kleineren Display anschauen, ist die Höhe des Containers immer noch 400px. Das Bild passt sich wieder an, um den Platz zu nutzen, ohne die Seitenverhältnisse zu ändern.
cover: Das Bild wird skalieren, um den kompletten Platz zu bedecken. Das Seitenverhältnis wird auch beibehalten, so dass einige Teile des Bildes ausgeschnitten werden.
div {
width: 100%;
height: 400px;
background-image: url('img_flowers.jpg');
background-size: cover;
border: 3px solid #fc0;
}
Hier sehen wir dasselbe Bild mit der Anweisung „cover“. Der Container ist immer noch 400px hoch. Das Bild nimmt den ganzen Platz an und verliert dabei an Details.
Mit der Eigenschaft „background-position“ können wir definieren, welche Teile des Bildes angezeigt werden sollen.
Dasselbe Bild aber zentriert zeigt andere Details.
Wenn wir hier auch die Displaygröße ändern, sehen wir, wie sich das Bild anpasst:
Andere Möglichkeit, das Hintergrundbild an die Größe des Geräts anzupassen, ist die Bereitstellung von verschiedenen Bildern mit Hilfe von „media queries“:
/* Für Breiten kleiner als 400px: */
.backgroundcontainer {
background-image: url('backgroundimage--small.jpg');
}
/* Für Breiten 400px und größer: */
@media only screen and (min-width: 400px) {
.backgroundcontainer {
background-image: url('backgroundimage.jpg');
}
}
Dabei wird das Bild geladen, das zu der Größe des Displays passt.
Alternative Bildgrößen mit srcset und sizes
Die Attribute srcset und sizes stellen eine grundlegende Technik für responsive Bilder dar. Verschiedene Bilder werden je nach Fenstergröße hinterlegt und der Browser sucht sich das passende. Der Browser Support ist sehr gut (außer Internet Explorer).
Implementierung srcset (x)
Die Auflösung eines Monitors PPI (Pixel pro Inch) wird in Pixeln für die Breite und die Höhe angegeben. Desktop-Monitore stellen ein Bild mit 72, 96 oder 120 Pixeln pro Zoll dar. Moderne Retina-Monitore können Auflösungen von 300 bis 400 Pixeln pro Zoll erreichen. Von daher können kleine Monitore eine größere Auflösung haben als große Monitore.
Retina-Displays können einen Pixel durch vier oder mehr umsetzen und erzielen somit schärfere Bilder. Mit einem speziellen Wert im srcset Attribut kann das img-Tag die volle Leistung nutzen.
<img srcset="
source.jpg 1x,
source_x2.jpg 2x"
src="source.jpg"
alt="Descriptive Alt-Text" />
Mit dieser Definition werden zwei Bildergrößen zur Verfügung gestellt. Der Browser entscheidet, welches Bild am besten zur Auflösung des Monitors passt. 1x und 2x stehen für das Verhältnis zwischen Anzahl der Pixel in der Breite zu Breite in Zoll, auch bekannt als Device Pixel Ratio.
– 1x für Monitore mit einer Auflösung von 72 bis 100 Pixeln pro Zoll,
– 2x für Monitore mit einer Auflösung von 200 oder mehr Pixeln pro Zoll (Retina-Display).
Für Browser die srcset nicht unterstützen, benötigt man die Angabe src.
Implementierung srcset (w)
Der w Wert steht für die physische Breite des Bildes.
<img srcset="
source.jpg 360w, // Viewport bis zu 360
source_medium.jpg 768w, // Viewport bis zu 768
source_big.jpg 1400w" // Viewport bis zu 1400
src="source_big.jpg"
alt="Descriptive Alt-Text" />
Mit diesem Ansatz werden die Bilder je nach Breite des Viewports geladen. Es liefert aber keine guten Ergebnisse. Eine bessere Lösung ist die Kombination mit dem Attribut sizes.
Implementierung srcset + sizes
<img srcset="
source.jpg 360w,
source_medium.jpg 768w,
source_big.jpg 1400w"
sizes="(min-width: 768px) 33.3vw, 100vw" // Ab 768px Viewport-Breite wird das Bild 33.3% des Viewports einnehmen
src="source_big.jpg"
alt="Descriptive Alt-Text" />
Sizes ist kein Stylen des Bildes, sondern eine Info für den Browser, welches Bild für welche Auflösung / Größe angezeigt werden soll.
Beispiel: https://codepen.io/ljardin/pen/gOYGmME
Implementierung picture + srcset
In HTML5 gibt es analog zu <video> oder <audio> auch das Element <picture>, womit man auch mehrere Bilderquellen definieren kann.
Bei den Definitionen ist die Reihenfolge entscheidend: Der Browser nimmt das erste Bild, das passt, von groß nach klein. img dient als Fallback für Browser, die kein <picture> unterstützen.
<picture>
<source media="(min-width: 80em)" srcset="image--big.jpg">
<source media="(min-width: 50em)" srcset="image--medium.jpg">
<source media="(min-width: 0em)" srcset="image--small.jpg">
<img src="image--small.jpg" alt="Text">
</picture>
Das <picture> Element ist geeignet, wenn man in Richtung Art Direction gehen will. Dabei wird das Bild sichtbar ausgetauscht, also ein anderes Motiv geladen, wie z.B. einen anderen Bildausschnitt oder das Bild mit einem anderen Seitenverhältnis (horizontal bzw. vertikal).
Beispiel: https://codepen.io/ljardin/pen/wvwqadP
Mit <picture> ist es auch möglich, verschiedene Dateiformate zu definieren.
Implementierung in Joomla
Wie kann man jetzt diese Möglichkeiten in einer Joomla-Seite nutzen? Leider ist der Standard-Editor TinyMCE nicht dafür geeignet. Natürlich besteht die Möglichkeit, in der Code-Ansicht die Tags und Elemente selbst einzutippen, aber bei einer bild-lastigen Seite wäre das sehr mühselig und fehleranfällig.
Der bekannte und beliebte Editor JCE kommt in der Pro Version mit einem Image Manager Extended, der die Möglichkeit bietet, Bilder mit srcset einzubinden. Man kann mehrere Sources definieren und entweder das Device Pixel Ratio (x) oder die Viewport-Breite (w) angeben.
Der Code, der generiert wird, sieht dann so aus:
<img src="images/blog/autor-introbild-intro.png" srcset="images/blog/autor-introbild-intro-2x.png 2x,images/blog/autor-introbild-intro.png 1x" alt="autor introbild intro" />
Die verschiedenen Bilder können vorher in einem Grafikprogramm erstellt werden oder direkt beim Upload in JCE erzeugt werden. Dadurch wird die Arbeit mit responsiven Bildern sehr erleichtert.
Bei der Recherche in JED (Joomla Extensions Directory) habe ich mehrere Plugins gefunden, die die Erstellung von responsiven Bildern ermöglichen:
ochResponsiveImages von OnlineCommunityHub
Mit diesem Plugin kann man verschiedene Breakpoints definieren. Die passenden Bilder werden automatisch erstellt und das Originalbild wird durch ein Element mit srcset ersetzt.
Zur Demo von ochResponsiveImages
Zum Plugin ochResponsiveImages
XT Adaptative Images von Extly
Das Plugin kommt in zwei Varianten: Eine Free Version, mit der man Bilder für verschiedene Breakpoints erstellen kann und eine CDN Konfiguration möglich ist (wenn man Bilder extern speichern möchte). Die Pro Version bringt zusätzlich die Funktionen, ein srcset zu generieren, Lazy Load, usw.
EIR – Easy Image Resizer von Kubik-Rubik
Das Plugin ändert automatisch die Auflösung von Bildern, die über den Media Manager hochgeladen werden und erstellt nach Wunsch mehrere Bilder in verschiedenen Größen. Easy Image Resizer implementiert den Dienst von Optimus.io für eine verlustfreie Komprimierung von Bildern.
Das Plugin hilft bei der Optimierung und Erstellung von Bildern, die später in einem srcset eingebunden werden können.
Zum Plugin EIR – Easy Image Resizer
Lazy loading
Lazy loading ist eine Technik, die das asynchrone Laden von Bildern auf einer Website ermöglicht. Das bedeutet, die Bilder werden erst geladen, wenn sie im Browser-Viewport auftauchen. Die Bilder, die ganz unten auf der Seite sind, werden erst geladen, wenn man soweit heruntergescrollt hat. Für Websites mit vielen Bilder bringt Lazy loading eine große Ersparnis an Bandbreite und Ladezeit.
Im Moment wird Lazy Loading nur von Firefox (ab 75) und Chrome (ab 76) nativ unterstütz (https://caniuse.com/#feat=loading-lazy-attr). Dafür benötigt man ein extra Attribut (loading) bei den Bildern:
<img src="myimage.jpg" loading="lazy" alt="..." />
Um das Lazy Loading für Joomla-Webseiten zu verwenden, müsste man alle Bilder beim Einfügen manuell im Code ändern. Beitragsbilder wie Einleitungs- oder komplettes Beitragsbild sowie Bilder in Modulen müsste man per Override ändern.
Aber es gibt Abhilfe! Außer dem XT Adaptative Images Plugin bietet das ImageLazyloading Plugin von Tobias Zulauf die Möglichkeit, alle Bilder in Joomla mit dem Attribut loading=“lazy“ automatisch zu ergänzen.
Wenn man Unterstützung in allen Browser haben möchte, muss man auf Javascript Libraries zugreifen, wie Lazysizes (https://afarkas.github.io/lazysizes/index.html), wobei die Nutzung wieder mit manuellen Anpassungen an den Bildern verbunden ist. Außer man kann Programmieren und erstellt ein Plugin, das die Klasse „lazyload“ an allen Joomla Bilder ergänzt.
Dieser Beitrag basiert auf der Präsentation „Große Bilder ganz klein – Bildoptimierung im Web“ von Lukas Jardin vom JoomlaDay Deutschland 2019
Photo by Vitaly Sacred on Unsplash
- Responsive Bilder in Joomla – Was kann man machen? - 12. Mai 2020
- Custom Fields für Fortgeschrittene: Parameter und alternative Layouts für Custom Fields - 3. April 2020
- Joomla! – Muss immer eine Joomla-Erweiterung sein? - 12. Februar 2019