webp-Bilder und Apple-User - wie Fallback einrichten

Hallo!
Ich habe vor kurzem bei einer Website wegen SEO-Massnahmen einige Bilder von JPG nach WEBP umgewandelt und die WEBP-Bilder entsprechende eingebaut.
Nun musste ich feststellen dass Benutzer mit I-Phones oder Safari-Browser (auch einer mit Internet-Explorer war dabei :eek:) diese Bilder nicht sehen.
Ich habe auch hier in einigen Beiträgen gelesen, dass die Version 4.9.x dieses 'Fallback' bereits berücksichtigt.
Leider habe ich keine schlüssige Erläuterung gefunden, wie man das genau einrichtet.
Ich habe zwar den Punkt unter: Themes - Bildgrößen .. bearbeiten gefunden, weiß aber dann nicht weiter.
Vielleicht kann mir jemand auf die Sprünge helfen.
Die betroffenen Bilder liegen sowohl als *.webp als auch *.jpg im selben Verzeichnis.

Danke schon vorweg
Bernhard

Den Fallback für webp und die Umwandlung der Bilder in webp wird über die Definition der Bildgrößen unter Layout -> Themes -> Bildgrößen definiert. Diese Bildgrößen Vorlagen dann dem Bild / Galerie zuweisen.

Bei statischen Bildern musst du selbst für den Fallback sorgen.

OK - hab's gerade probiert und hinbekommen. ;)
Das heißt: Ich muss das bild im *webp-Format nicht vorher erstellen und zusätzlich auf den Webspace hochladen.
Contao nimmt mir diese Tätigket automatisch ab?

So ist es.

Du kannst auch webp hochladen und dann von Contao für den Fallback zu JPG umwandeln lassen.

OK - und wie muss ich den Code wählen, wenn ich zB folgendes habe:

Code:

---

<p><a class="bild-link" href="{{link_url::62}}"><img src="files/opensauce/img/startseite/s-steine.jpg" alt="Die er-stone® Spielsteine" width="667" height="400"><span class="bild-link-bild">Spielsteine</span></a></p>

---

Hier ist die zugehörige Website: https://er-stone.at
Die zugehörigen sechs Bilder sind unterm Slider.

Viele meiner Bilder habe ich auch einfach in einem 'Text-Element' auch hier wäre es schön zu wissen, welchen Code ich setzen müsste.

Zitat:

---

Zitat von Spooky

Du kannst auch webp hochladen und dann von Contao für den Fallback zu JPG umwandeln lassen.

---

Und wie funktioniert das? Auch über den Punkt Themes - Bildgrößen ... bearbeiten ?

Ja, du stellst dort einfach alle Formate ein, die du haben möchtest. Das Ausgangsformat ist dabei egal.

Zitat:

---

Zitat von Spooky

Ja, du stellst dort einfach alle Formate ein, die du haben möchtest. Das Ausgangsformat ist dabei egal.

---

OK - das heißt, auch wenn in den Experteneinstellungen zB "JPEG zu WEBP" steht, wird sowohl von *jpg zu *webp als auch von *webp zu *jpg konvertiert.
Und die Dateien landen dann im Ordner /assets/images/*/ ?

Damit ich es auch verstehe - die Logik dahinter.

Hm, das kann ich dir nicht beantworten. Über die Config geht es auf jeden Fall, bspw. so:

Code:

---

# config/config.yaml
contao: 
    image:
        sizes:
            foobar:
                width: 320
                formats:
                    webp: [webp, jpg]
                    jpg: [webp, jpg]

---

Alles klar - Danke für Eure Hilfe!
Hab jedenfalls wieder was dazugelernt und die restlichen Punkte sollte ich schaffen.

@Spooky: Ich muss nochmal wegen der 'automatischen' Konvertierung nachfragen.
Ich habe jetzt die Datei config.yml im Verzeichnis /test/app/config wie folgt angepasst:

Code:

---

# Contao configuration
doctrine:
    dbal:
        connections:
            default:
                default_table_options:
                    charset: utf8
                    collate: utf8_unicode_ci
                    engine: MyISAM
# Bildformate konvertieren
contao: 
    image:
        sizes:
            foobar:
                formats:
                    webp: [webp, jpg]
                    jpg: [jpg, webp]
                    png: [png, webp]

---

Nur das allein konvertiert meine JPG noch nicht in WEBP ...
Wo muss ich noch was anschupsen?

Du hast also

1. den Symfony Application Cache gelöscht,
2. ein neues Text, Bild oder Galerieinhaltselement bspw. erzeugt oder ein bestehendes editiert,
3. dort die Bildgrößeneinstellung foobar ausgewählt,
4. das Frontend aufgerufen und die HTML Ausgabe des Bildes analysiert?

Ich präzisiere das nochmal:

1. JPG mit Bild-Element hinzufügen
   Das funktioniert ohne Probleme.
2. JPG in einem Text-Element und der Funktion 'Ein Bild hinzufügen' hinzufügen
   Das funktioniert auch ohne Probleme.
   Folgender Code wird sowohl für Punkt 1. und 2. hierfür generiert:
   
   Code:

   ---

   <picture>
<source srcset="assets/images/1/s-steine-fb6f2241.webp" type="image/webp">
<img src="assets/images/3/s-steine-08e0354a.jpg" alt="" itemprop="image" width="644" height="363">
</picture>

   ---

3. JPG in einem Text-Element hinzufügen
   Das funktioniert leider nicht, aber ich brauche diese Funktion für spezielle Anforderungen.
   Hierfür habe ich zB folgenden Code direkt im Text-Element gesetzt:
   
   Code:

   ---

   <p><picture>
<source srcset="files/opensauce/img/s-steine.webp" type="image/webp">
<img src="files/opensauce/img/s-steine.jpg" alt="" width="644" height="363">
</picture></p>

   ---

Das Problem ist, wenn ich nicht das Bild/Gallerie-Element oder in einem Text-Element die Option 'Ein Bild hinzufügen' verwende, wird nichts konvertiert.
Die konvertierten Datein werden wie oben ersichtlich im Verzeichnis 'assets/images/*/*' abgelegt und sind nach einer Cache-Löschung (Bildercache) nicht mehr vorhanden bzw. werden diese dann ganz woanders abgelegt.

Das heißt: Ich kann die Bilder-Konvertierung in einem reinen 'Text-Element' nicht einsetzen - zumindest kenn ich die Lösung dafür noch nicht.

Ich versuche jetzt einfach mal beide Formate (jpg & webp) vorab zu erstellen und in das /img-Verzeichnis hochzuladen und schau mal ob es dann funktioniert.
Dann habe ich zumindest mal die Lösung für meinen Sonderfall in einem Text-Element ...

Zitat:

---

Zitat von bteppan

Das heißt: Ich kann die Bilder-Konvertierung in einem reinen 'Text-Element' nicht einsetzen - zumindest kenn ich die Lösung dafür noch nicht.

Ich versuche jetzt einfach mal beide Formate (jpg & webp) vorab zu erstellen und in das /img-Verzeichnis hochzuladen und schau mal ob es dann funktioniert.
Dann habe ich zumindest mal die Lösung für meinen Sonderfall in einem Text-Element ...

---

Das funktioniert ;)

Zitat:

---

Zitat von bteppan

JPG in einem Text-Element hinzufügen
Das funktioniert leider nicht, aber ich brauche diese Funktion für spezielle Anforderungen.
Hierfür habe ich zB folgenden Code direkt im Text-Element gesetzt:

Code:

---

<p><picture>
<source srcset="files/opensauce/img/s-steine.webp" type="image/webp">
<img src="files/opensauce/img/s-steine.jpg" alt="" width="644" height="363">
</picture></p>

---

---

Du meinst direkt im TinyMCE? Ja das geht nicht, da wird ja nicht die Bildverbearbeitungsfunktion von Contao benutzt. Daher solltest du das auch vermeiden. Warum willst du ein Bild direkt im TinyMCE setzen?

Ich hab zB so etwas:

Code:

---

<p><a class="bild-link" href="{{link_url::29}}">
<picture><source srcset="files/opensauce/img/s-steine.webp" type="image/webp">
<img src="files/opensauce/img/s-steine.jpg" alt="" width="644" height="363">
</picture>
<span class="bild-link-bild">Spielsteine</span></a></p>

---

Hier wechselt das Bild beim 'Maushovern' vom Bild zu einem Text.
Ich wüsste nicht, wie ich das in einem reinen Bild-Element realisieren könnte.

Mit dem normalen Bild & Text Element bspw? ;). Du wählst das Bild aus und gibst beim Text den Text ein. Per CSS stylst du das dann dementsprechend. Oder du nimst nur ein Bild Inhaltselement und gibst den Text als Caption ein.

OK - ganz kann ich Dir jetzt technisch nicht folgen ... :o ... sorry, bin schon stolz, dass ich es soweit geschafft habe.

Hier wäre der LINK zu der Seite, bei der ich das umgesetzt habe - unter dem Slider - allerdings noch ohne der vorhin besprochenen JPG-WEBP Konvertierung.
Die darf ich jetzt noch einbauen. :D