webp / wie in contao verwenden

[conter]

Hallo zusammen,

ich beschäftige mich gerade mit dem webp-Bildformat.

Wie kann man das in contao einsetzen. Bilder gleich als webp auf den Server hochladen? Oder vom System generieren lassen?
Fallback für unfähige Browser?

contao.org setzt es ja schon ein.

<img src="files/contao/media/contao-info/xMats,P20Hummels.png.pagespeed.ic.9mQXrMcoxe.webp" width="983" height="523" alt="Mats Hummels - http://mats-hummels.net" itemprop="image">

Kann mir jemand sagen, über welchen Weg das funktioniert?

Viele Grüße,
conter

[xchs]

Auf contao.org werden die Bilder durch das PageSpeed Modul generiert.

[conter]

Heißt das, ich muss mit meinem Hoster klären, ob er das Modul zu verfügung stellt?

Viele Grüße,
conter

[xchs]

Das PageSpeed Modul brauchst Du ja nicht unbedingt. Du kannst Deine webp Bilder natürlich auch selbst auf Deinen Webspace hochladen.

Browsersupport derzeit: https://caniuse.com/#feat=webp

[conter]

Ja stimmt, aber automatisches Konvertieren ist natürlich auch bequem.

Ich nehme an, ich muss so oder so die erlaubten Bild-Formate erweitern und dann das picture template anpassen.

Gibt es noch was zu beachten?

Ich wundere mich auch ein bisschen, dass man kaum was dazu findet, ich meine contao und webp ...

Gesendet von meinem Mi A1 mit Tapatalk

[Nina]

Hat sonst noch jemand Erfahrung zu webp + Contao + Fallbacks?

[PaddySD]

Auf contao.org werden die Bilder durch das PageSpeed Modul generiert.

Das wäre mal ein interessanter Erfahrungsbericht, wie zufrieden seit Ihr denn damit? Die Seite hier ist ja doch recht gut besucht (also keine kleine Seite) und da frage ich mich natürlich gleich, ob das hier auch gut funktioniert...

Ich hab eher so gemischte Erfahrungen... Manchmal bringt das Modul etwas, manchmal bremst es aber derart...

[xchs]

Wenn ich mit dem Modul mal was zu tun hatte, musste ich halt immer den Cache flushen (oder temporär deaktivieren), da sonst alles zwischengespeichert wird und Änderungen an Stylesheets usw. nicht wirksam wurden. Für die Produktivumgebung macht der Cache natürlich Sinn.

[mario-postyou]

In diesem Zusammenhang haben wir als Agentur soeben ein Bundle dazu veröffentlicht:
https://github.com/postyou/contao-webp-bundle
Bild und Textelemente können aktuell nun per Checkbox im webp Format ausgeliefert werden. (evtl. in Zukunft noch weiter ausbaubar auf News, Galerieelemente etc.)
Browserunterstützung wird automatisch erkannt.
Der Webserver muss eine der folgenden Bibliotheken besitzen.

• cwebp

• gd

• imagick

• gmagick

Freue mich über jeden Tester.
Weitere Features, Verbesserungsvorschläge gerne Vorschlagen

[webstar]

In diesem Zusammenhang haben wir als Agentur soeben ein Bundle dazu veröffentlicht:
https://github.com/postyou/contao-webp-bundle
Bild und Textelemente können aktuell nun per Checkbox im webp Format ausgeliefert werden. (evtl. in Zukunft noch weiter ausbaubar auf News, Galerieelemente etc.)
Browserunterstützung wird automatisch erkannt.
Der Webserver muss eine der folgenden Bibliotheken besitzen.

• cwebp

• gd

• imagick

• gmagick

Freue mich über jeden Tester.
Weitere Features, Verbesserungsvorschläge gerne Vorschlagen

Danke für das Modul.

Gibt es einen Grund für die gewählte Bestätigung pro Inhaltselement/Text-Element und die technische Umsetzung (Überschreibung der Inhaltslemente)? Wäre es nicht sinnvoller, dies als Systemeinstellung vorzunehmen und ggf. dann den entsprechenden Service von Contao zu dekorieren?

[mario-postyou]

Hallo Webstar,

danke für die Rückmeldung. Der Grund für die Überschreibung der Inhaltselemente ist die Resize Funktion.
Contao verwendet aktuell noch eine ältere Version von imagine (0.7-dev). Diese unterstützt kein WebP Format.
Mit dem Überschreiben der Inhaltselemente kann nun trotzdem die Resize Funktion verwendet werden.

Der Grund für die gewählte Bestätigung ist aus der Anpassung an pagespeed entstanden, da ich nur die Bilder konvertieren wollte, die Pagespeed angemeckert hat. Hier wäre aber auch eine Verschiebung in die Systemeinstellungen denkbar.

[Spooky]

Contao verwendet aktuell noch eine ältere Version von imagine (0.7-dev). Diese unterstützt kein WebP Format.

Öffne dafür ein Ticket im entsprechenden Repository.

Ich habe mich auch schon über die alte Imagine Version gewundert.

[mario-postyou]

Habe das Ticket soeben erstellt.

[webstar]

danke für die Rückmeldung. Der Grund für die Überschreibung der Inhaltselemente ist die Resize Funktion.
Contao verwendet aktuell noch eine ältere Version von imagine (0.7-dev). Diese unterstützt kein WebP Format.

Danke für die Hintergrundinformation.

Mit dem Überschreiben der Inhaltselemente kann nun trotzdem die Resize Funktion verwendet werden.

Hintergrund meiner Frage war, dass man sonst ja alle individuellen Inhaltselemente ggf. nochmal ändern müsste und bei Seiten mit vielen Bildern schnell viel Arbeit bedeuten würde. Ggf. wäre auch das Aktivieren im Dbafs eine Option, wenn dies nur selektiv gemacht wird.

Danke jedenfalls für das Modul. Könnte für ein Projekt relevant werden.

Was derzeit noch Probleme bereiten würde, ist der Seitencache. Wird die Seite mit WebP-Grafiken gecacht und ein Browser ohne WebP-Support ruft diese auf, gibt es Probleme.

[Spooky]

Normalerweise würde man es ja so machen:

<picture>
  <source srcset="files/images/image.webp" type="image/webp">
  <source srcset="files/images/fallback.jpg" type="image/jpeg"> 
  <img src="files/images/fallback.jpg" alt="">
</picture>

[mario-postyou]

Was derzeit noch Probleme bereiten würde, ist der Seitencache. Wird die Seite mit WebP-Grafiken gecacht und ein Browser ohne WebP-Support ruft diese auf, gibt es Probleme.

Stimmt daran hatte ich nicht gedacht, da ich den Seitencache selten benutze.

Hintergrund meiner Frage war, dass man sonst ja alle individuellen Inhaltselemente ggf. nochmal ändern müsste und bei Seiten mit vielen Bildern schnell viel Arbeit bedeuten würde. Ggf. wäre auch das Aktivieren im Dbafs eine Option, wenn dies nur selektiv gemacht wird.

Ich habe die Einstellung im letzten Release nun Global in die Systemeinstellungen verschoben

@spooky
Gute Idee mit dem Fallback, werde ich demnächst anpassen.

[Spooky]

Ich finde du solltest dieses Feature und eine solche Anpassung als Pull Request an den Core umsetzen

[mario-postyou]

Ich finde du solltest dieses Feature und eine solche Anpassung als Pull Request an den Core umsetzen

Das würde ich dann machen, wenn die imagine lib im core aktualisiert ist

[Spooky]

Das würde ich dann machen, wenn die imagine lib im core aktualisiert ist

Das kannst du ja schon im PR machen.

[mario-postyou]

Gibt ja schon einen PR dazu: https://github.com/contao/contao/pull/413
Leider ist dieser bisher fehlgeschlagen

[Spooky]

Gibt ja schon einen PR dazu: https://github.com/contao/contao/pull/413
Leider ist dieser bisher fehlgeschlagen

Das ist für Contao 4.4. In deinem PR (für das gesamte Feature) würdest du das ja für den master Branch (Contao 4.8) machen. Der von dir erwähnte PR ist für deinen PR nicht direkt relevant - auch egal ob der fehlschlägt oder nicht.

[mario-postyou]

Okay danke für die Infos. Ich werde mich mal ransetzen.

[mario-postyou]

@spooky: Das Feature direkt in den Core an den Service zu packen ist leider komplizierter als gedacht, da ich hier nochmal unterscheiden müsste, welcher der 3 image services (Gmagick, Imagick oder Gd) webP unterstützt. Die Core Image Klassen würden um einiges aufgebläht werden.

Ich bin dafür es erstmal bei einem Bundle zu belassen.

Aber vielleicht hat noch irgendjemand Ideen dazu?

Nachtrag: Soeben habe ich auf herausgefunden, dass die Imagine Bibliothek WebP nur teilweise unterstützt. Die Imagine Klassen welche als Service genutzt werden unterstützen kein webP. Siehe https://github.com/avalanche123/Imagine/issues/501