Knowledge Update 3.2.x -> 3.5 - Retina Images

[tofo]

Hallo zusammen,

nachdem ich beruflich in den letzten Wochen und Monaten viel zu tun hatte, bin ich einfach nicht dazu gekommen, mich in Sachen Contao auf den aktuellen Stand zu halten. Wie ich sehe, habe ich von den Versionsnummern doch so einiges versäumt. Was mir jetzt aufgefallen ist, dass es die Erweiterung retina_images nicht mehr gibt. Schade irgendwie, weil ich Erweiterung wirklich mochte. Einfach ein zweites, doppelt so großes Bild mit dem Zusatz "@2x" in den gleichen Ordner legen und die Erweiterung regelte den Rest. Praktisch.

Jetzt scheint es aber gehörig im Karton zu rappeln - die Erweiterung gibt es nicht mehr, und mir fehlt jetzt einfach das nötige Knowhow, wie ich in 3.5.4 mit Retina Bildern umgehen kann. Hat wer dazu eine einfache Erklärung für mich, wie ich damit nun umgehen kann?

Besten Dank im Voraus!

Gruß, Thomas

Zusatz: in den Dokumenten zu Contao läßt sich diese in keinster Weise über die Verwendung von Responsive Images aus ...

[MacKP]

Hallo tofo,
die Erweiterung braucht man in aktuellen Contao Versionen einfach nicht mehr.
Hier findest du Infos:
http://rocksolidthemes.com/de/contao...picture-contao

Ansonsten hier im Forum und im Netz. Einfach mal nach Picture Element suchen ;-)

Viele Grüße

[tofo]

Danke, die Seite hab ich dann auch gefunden. Was mir dabei noch unklar ist, in welcher Dichte ich das Bild hochlade.

Wenn ich ein Bild mit 400x100 habe und für Retina die doppelte Auflösung haben will, muss ich dann 2 Bilder rauflassen oder interpoliert Contao das 400x100 Pixelbild auf die zweifache Größe? Die genaue Verwendung geht mir noch nicht ein.

Gruß, Thomas


Gesendet von iPhone mit Tapatalk

[tab]

Wenn ich das alles richtig verstanden habe, dann solltest du das Bild in der Größe 800x200 hochladen, gibst aber als Bildgröße 400x100 an und dann unten 1x, 2x. Damit erzeugt Contao die entsprechenden Bildgrößen, ausgehend von der angegebenen Bildgröße, hier also 400x100. Es wird also ein Bild 400x100px erzeugt und eins in 800x200. Für das letztere nimmt Contao dann das Originalbild, weil die Größe der zugrundeliegenden Bilddatei ja genau passt.

[tofo]

Hm. Theoretisch könnte Contao aber auch das 800x200 Bild hernehmen und eine 1600x400 Version machen. Ich verwende Bilder oft ohne Angabe der Pixelgröße, z.B. bei einer Bannerrotation, wo die Größen variieren. Da war retina_image angenehm weil dieses das Bild mit @2x einfach runtergerechnet hat.

Gruß, Thomas


Gesendet von iPhone mit Tapatalk

[tab]

Nein, Contao erzeugt nur die Bilder, die gemäß den Angaben bei der "Bildgröße" gemacht werden. Wenn also ausgehend von einem Originalbild 800x200px z.B. angegeben ist:
400x100
100vw
1x, 2x
dann werden Bilder in den Größen 400x100 und 800x200 ( =Original) erzeugt und dem Browser per HTML angeboten. Der nimmt sich dann das, was im am passendsten ist. Für 400x100px und kleiner also das kleinere Bild, für alles andere das größere Bild. Bei Retina Displays wird dann halt für größer als 200x50px gleich das 800x200px Originalbild verwendet. Muss der Browser damit natürlich eine größere Fläche wie z.B. 1600x400 ausfüllen, dann wird der Browser das notgedrungen hochskalieren, sofern es nicht per CSS verhindert ist (z.B. mit img {max-width: 100%}). Willst du das nicht, dann lade als Originaldatei eben 1600x400 hoch und gib dann 1x, 2x, 4x an bei Bildgröße 400x100. Dann werden drei Bilder angeboten mit Breite 400. 800 und 1600px (Original). Bei Retina Displays wird dann halt für größer als 200x50px gleich das 800x200px Originalbild verwendet.

Ich geh mal nicht davon aus, dass retina_image aus einem 800x200px Original ohne Qualitätsverlust ein 1600x400px Bild hochrechnen konnte. Also musstest du da wohl auch 1600x400 zur Verfügung stellen.

[tofo]

Eh. retina_image hat runtergerechnet. War das Bild 400x100 und im gleichen Verzeichnis die gleiche Datei mit dem Zusatz @2x, wurde diese Datei bei Retina Displays hergenommen und mit 400x100 angezeigt.

Gruß, Thomas


Gesendet von iPhone mit Tapatalk

[tab]

Ja, jetzt bekommt der Browser dann eben 800x200 und 400x100 angeboten. Wenn er das Bild als 400x100 darstellen soll und weiß, dass er auf einem Gerät mit Retina Display läuft, dann nimmt er eben das 800x200 Bild. Hat er kein Retina-Display, nimmt er das 400x100. Was ich jetzt allerdings wirklich als etwas schlechter empfinde ist, dass ich nicht beide Bilder selbst vorgeben, also separat optimieren kann. Das 400x100 Bild wird jetzt von Contao mit GDlib automatisch aus dem 800x200 Original runtergerechnet.

[Spooky]

Es gibt aber eine simple Extension, wo du das selbst machen kannst, wenn dir das (punktuell) lieber ist.

[tab]

Macht mir in 99% der Fälle nichts aus, sooo qualitativ schlecht rechnet GDlib auch nicht runter. Ginge also eher um die Dateigröße (in Bytes).
Welche Erweiterung wäre das denn, mit der ich das selbst machen kann?

[Spooky]

Hatte es vorhin partout auch nicht gefunden, aber hier ist sie: https://community.contao.org/de/show...o-image-srcset

[tofo]

Nur mal eine dumme Frage noch zu dem Thema Responsive Images in Contao 3.5:

Wenn ich ein Bild mit 100x100 Pixel habe und hier die Pixeldichten 0.5x, 1x und 2x angebe, würde meiner Theorie nach bei einem normalen Bildschirm das originale 100x100 Pixel-Bild angezeigt werden, bei einem Retina-Bildschirm, der doppelte Pixeldichte hat, ein 200x200 Pixel-Bild angezeigt werden.

Genau da hakt es bei mir ein wenig gedanklich. Wie interpoliert Contao oder welche Library auch immer die fehlenden Pixel? Wenn ich ein Bild von 100x100 auf 200x200 raufdrehe, schaut das aus meiner Sicht nur gaga aus.

Was also wäre das richtige Vorgehen bei einem Retina-geeigneten Bild?

Gruß, Thomas

*** EDIT ***

Nachtrag: ich habe jetzt mal ein Bild hergenommen, 200x200 Pixel groß. Ich habe eine Bildgröße mit folgenden Dingen definiert: sizes-Attribut 100vw, Pixeldichte 1x, 2x

Ergebnis: von srcset nix zu sehen im HTML Code. Kein Punkt, kein Komma. Das ist alles, was ich sehe:

<img src="files/moewen-theme/images/tweed.png" sizes="100vw" alt="">

Bin jetzt ein wenig verwirrt. Angesprochen habe ich die Seite mit meinem Retina-Macbook mit dem Firefox 42.0.

[Spooky]

Genau da hakt es bei mir ein wenig gedanklich. Wie interpoliert Contao oder welche Library auch immer die fehlenden Pixel? Wenn ich ein Bild von 100x100 auf 200x200 raufdrehe, schaut das aus meiner Sicht nur gaga aus.

Das Original Bild sollte natürlich eine Auflösung haben, die hoch genug für alle Anforderungen ist.

Nachtrag: ich habe jetzt mal ein Bild hergenommen, 200x200 Pixel groß. Ich habe eine Bildgröße mit folgenden Dingen definiert: sizes-Attribut 100vw, Pixeldichte 1x, 2x

Ergebnis: von srcset nix zu sehen im HTML Code. Kein Punkt, kein Komma. Das ist alles, was ich sehe:

<img src="files/moewen-theme/images/tweed.png" sizes="100vw" alt="">

Bin jetzt ein wenig verwirrt. Angesprochen habe ich die Seite mit meinem Retina-Macbook mit dem Firefox 42.0.

Du hast also keine Größe festgelegt?

[tofo]

Nein, warum sollte ich? Muss ich jetzt wirklich für jedes Bild eine Bildgröße definieren, damit ich es verwenden kann? Laut Erklärung auf Rocksolid sollte es mit 100vw und den Skalierungsfaktoren abgetan sein.

Ich steh jetzt mittlerweile echt auf dem Schlauch. Was zur Hölle muss ich nun alles definieren, bis ich ein einziges, kleines Bildchen für 100x100 und 200x200 drinnen habe? Von Flexibilität bin ich damit weit entfernt, wenn ich in den Bildgrößen für jedes Bild sowas definieren muss.

Gruß, Thomas

[Spooky]

Natürlich musst du eine Bildgröße angeben, woher soll Contao sonst wissen, auf welche Bildgröße das Bild reduziert werden soll (für die jeweiligen Densities).


Vielleicht misverstehst du generell worum es hier geht. Der Einsatzzweck von Image Sizes ist ja zB folgender:

Angenommen du hast eine Newsliste, wo du das Teaserbild in einer bestimmten Größe ausgeben lässt. Zum Beispiel in der Größe 480x270. Vor Contao 3.4 hast du dafür also im Newslist Modul die Bildgröße festgelegt auf 480 Pixel Breite und 270 Pixel Höhe und den Modus auf bspw. Mitte | Mitte gesetzt. Contao skaliert und schneidet das vom Redakteur hinaufgeladene Bild auf diese Größe zurecht und dies wird dann auch ausgegeben, ohne ein Responsive Image Set. Das hat natürlich zur Folge, dass das Bild auf Geräten mit höherer (eingestellter) Pixeldichte schlecht aussieht, da das Bild vom Browser hochskaliert wird bzw. werden muss.

In Contao >= 3.4 hast du nun aber die Möglichkeit eine Responsive Image Size vorzudefinieren. Anstatt also die Bildgröße im Modul wie vorhin beschrieben statisch festzulegen, legst du nun eine neue Image Size im Theme an Namens "Newslist", trägst dort den Wert 480 für die Breite ein und 270 für die Höhe ein und setzt auch die Einstellung Exaktes Format. Zusätzlich trägst du bei den Pixeldichten zB 1x, 2x, 3x ein - damit sorgt Contao dafür, dass auch ein zweimal und dreimal so großes Bild erzeugt wird, für Geräte mit höhere Pixeldichten. Diese Bildgrößeneinstellung wählst du nun im Newslist Modul aus.
Dies hat zur Auswirkung, dass für diese Newslist alle für die News festgelegten Teaserbilder auf die angegebene Größe skaliert und zurechtgeschnitten wird und zusätzlich auch weitere Größen für Geräte mit höherer Pixeldichte bereitgestellt werden. Die Ausgabe erfolgt in so einem Fall über ein normales responsive image set, also bspw.

<img src="assets/images/1/asdfjkl.jpg" srcset="assets/images/1/asdfjkl.jpg 1x, assets/images/2/asdfjkl1.jpg 2x, assets/images/3/asdfjkl2.jpg 3x"> 

Welche Einstellungen du nun tatäschlich brauchst bzw. setzen musst, und ob du Media Queries (bzw. sizes) brauchst oder nicht, hängt einfach von deinem Einsatzzweck ab, logischerweise.

[tofo]

Das habe ich mir mittlerweile auch schon gedacht. Jetzt habe ich aber immer wieder recht unterschiedliche Bilder von der Größe her, da wäre z.b. die Funktion von retina_image recht einfach gewesen, dieselbe Datei zweimal abzuspeichern einmal normal, einmal mit doppelter Pixelanzahl, nur mit @2x versehen. Weil dann kann ich sehr flexibel Bilder mit doppelter Dichte einbinden, ohne auf die Bildgröße oder sonstwas selbst eingehen zu müssen.

Schade, dass das jetzt nicht mehr geht ... war 'ne unglaublich tolle Erweiterung.

Was mich an der Methode noch stört, ist die Tatsache, dass auch bei doppelter Pixelanzahl immer noch ein Bild zugrunde liegt, welches für eine einfache Auflösung gedacht ist. Somit versucht man, ein Bild mit 100 Pixel auf 200 Pixel rauf zu skalieren, was zwar gelingt, aber man gewinnt im Endeffekt genau nix damit - das Retina-Bild bleibt verschwommen und unscharf. Also könnte man es sich sparen, das Bild mit 100 Pixel raufzuladen und mit der Skalierungsfunktion auf 200 Pixel hochzurechnen, um es dann wieder auf 100 Pixel anzuzeigen - die Basis, das verschwommene 100 Pixel-Bild wird dadurch nicht schärfer.

Gruß, Thomas


+++ EDIT +++

Lösung:
- Bild mit doppelter Dichte hochladen (z.B. 400x400)
- eine Bildauflösung mit 200x200 angeben und mit Skalierungsfaktor 1x, 2x anlegen
- Bild wird runtergerechnet und bleibt bei Retina gestochen scharf

[tab]

Lösung:
- Bild mit doppelter Dichte hochladen (z.B. 400x400)
- eine Bildauflösung mit 200x200 angeben und mit Skalierungsfaktor 1x, 2x anlegen
- Bild wird runtergerechnet und bleibt bei Retina gestochen scharf

Genau, that's it!

[Spooky]

Was mich an der Methode noch stört, ist die Tatsache, dass auch bei doppelter Pixelanzahl immer noch ein Bild zugrunde liegt, welches für eine einfache Auflösung gedacht ist. Somit versucht man, ein Bild mit 100 Pixel auf 200 Pixel rauf zu skalieren, was zwar gelingt, aber man gewinnt im Endeffekt genau nix damit - das Retina-Bild bleibt verschwommen und unscharf. Also könnte man es sich sparen, das Bild mit 100 Pixel raufzuladen und mit der Skalierungsfunktion auf 200 Pixel hochzurechnen, um es dann wieder auf 100 Pixel anzuzeigen - die Basis, das verschwommene 100 Pixel-Bild wird dadurch nicht schärfer.

Nein, so sollst du das nicht machen - aber das hast du jetzt eh schon festgestellt . Du lädst ein Bild in einer hohen Auflösung rauf und Contao rechnet es auf die verschiedenen Größen herunter.

Das habe ich mir mittlerweile auch schon gedacht. Jetzt habe ich aber immer wieder recht unterschiedliche Bilder von der Größe her, da wäre z.b. die Funktion von retina_image recht einfach gewesen, dieselbe Datei zweimal abzuspeichern einmal normal, einmal mit doppelter Pixelanzahl, nur mit @2x versehen. Weil dann kann ich sehr flexibel Bilder mit doppelter Dichte einbinden, ohne auf die Bildgröße oder sonstwas selbst eingehen zu müssen.

Ich weiß nicht wie die retina_image Extension funktioniert hat, aber es wäre tatsächlich praktisch, dass Contao, auch wenn man nicht eine Image Size Einstellung verwendet sondern im Element selbst eine Größe definiert, automatisch ein srcset mit bspw. 1x, 2x, 3x erzeugt (global einstellbar).

[tofo]

Ich weiß nicht wie die retina_image Extension funktioniert hat, aber es wäre tatsächlich praktisch, dass Contao, auch wenn man nicht eine Image Size Einstellung verwendet sondern im Element selbst eine Größe definiert, automatisch ein srcset mit bspw. 1x, 2x, 3x erzeugt (global einstellbar).

retina_image war da sehr simpel gestrickt. Ohne den Sourcecode jetzt wirklich zu kennen, hat es so funktioniert, dass es sich mit einem Javascript ins Template eingeklinkt hat, und dort nach Image-Tags gesucht. Wurde eine Bilddatei gefunden und wurde ein Display mit doppelter Dichte festgestellt, hat es im selben Verzeichnis nach der gleichen Datei gesucht, nur mit dem Zusatz @2x. War eine solche Datei da, wurde die Original-Bilddatei gegen die doppelt so große Datei ausgetauscht und auf die Originalgröße runtergerechnet.

Ergebnis: eine knackscharfe Bilddatei.

So einfach kann es sein, schade, dass die Erweiterung nicht mehr kompatibel ist. Man erkennt, dass mein Ansatz jetzt nicht unbedingt was mit Responsive Images zu tun hat, sondern eher mit dem Streben, die Bilder anzuzeigen, die das Display unterstützt.

Gruß, Thomas

[Spooky]

retina_image war da sehr simpel gestrickt. Ohne den Sourcecode jetzt wirklich zu kennen, hat es so funktioniert, dass es sich mit einem Javascript ins Template eingeklinkt hat, und dort nach Image-Tags gesucht. Wurde eine Bilddatei gefunden und wurde ein Display mit doppelter Dichte festgestellt, hat es im selben Verzeichnis nach der gleichen Datei gesucht, nur mit dem Zusatz @2x. War eine solche Datei da, wurde die Original-Bilddatei gegen die doppelt so große Datei ausgetauscht und auf die Originalgröße runtergerechnet.

Achso, das heißt, du hast selbst beide bzw. alle Versionen zur Verfügung stellen müssen. Das ist ja eine komplett andere Thematik - und dafür habe ich ja hier im Thread auch eine andere, dafür geeignete Extension erwähnt.

schade, dass die Erweiterung nicht mehr kompatibel ist.

Ich habe hier im Thread ja bereits eine Alternative erwähnt... damit erreichst du im Prinzip dasselbe.

Man erkennt, dass mein Ansatz jetzt nicht unbedingt was mit Responsive Images zu tun hat, sondern eher mit dem Streben, die Bilder anzuzeigen, die das Display unterstützt.

Also Responsive Images..