Contao-Camp 2024
Ergebnis 1 bis 19 von 19

Thema: webp-Bilder und Apple-User - wie Fallback einrichten

  1. #1
    Contao-Nutzer
    Registriert seit
    15.02.2014.
    Beiträge
    196

    Standard 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 ) 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

  2. #2
    Contao-Fan Avatar von Ainschy
    Registriert seit
    24.06.2009.
    Ort
    Wenden
    Beiträge
    793
    Partner-ID
    5666
    User beschenken
    Wunschliste
    Contao-Projekt unterstützen

    Support Contao

    Standard

    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.

  3. #3
    Contao-Nutzer
    Registriert seit
    15.02.2014.
    Beiträge
    196

    Standard

    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?

  4. #4
    Contao-Fan Avatar von Ainschy
    Registriert seit
    24.06.2009.
    Ort
    Wenden
    Beiträge
    793
    Partner-ID
    5666
    User beschenken
    Wunschliste
    Contao-Projekt unterstützen

    Support Contao

    Standard

    So ist es.

  5. #5
    Community-Moderator
    Wandelndes Contao-Lexikon
    Avatar von Spooky
    Registriert seit
    12.04.2012.
    Ort
    Scotland
    Beiträge
    33.894
    Partner-ID
    10107

    Standard

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

  6. #6
    Contao-Nutzer
    Registriert seit
    15.02.2014.
    Beiträge
    196

    Standard

    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.

  7. #7
    Contao-Nutzer
    Registriert seit
    15.02.2014.
    Beiträge
    196

    Standard

    Zitat Zitat von Spooky Beitrag anzeigen
    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 ?

  8. #8
    Community-Moderator
    Wandelndes Contao-Lexikon
    Avatar von Spooky
    Registriert seit
    12.04.2012.
    Ort
    Scotland
    Beiträge
    33.894
    Partner-ID
    10107

    Standard

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

  9. #9
    Contao-Nutzer
    Registriert seit
    15.02.2014.
    Beiträge
    196

    Standard

    Zitat Zitat von Spooky Beitrag anzeigen
    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.

  10. #10
    Community-Moderator
    Wandelndes Contao-Lexikon
    Avatar von Spooky
    Registriert seit
    12.04.2012.
    Ort
    Scotland
    Beiträge
    33.894
    Partner-ID
    10107

    Standard

    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]

  11. #11
    Contao-Nutzer
    Registriert seit
    15.02.2014.
    Beiträge
    196

    Standard

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

  12. #12
    Contao-Nutzer
    Registriert seit
    15.02.2014.
    Beiträge
    196

    Standard

    @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?

  13. #13
    Community-Moderator
    Wandelndes Contao-Lexikon
    Avatar von Spooky
    Registriert seit
    12.04.2012.
    Ort
    Scotland
    Beiträge
    33.894
    Partner-ID
    10107

    Standard

    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?

  14. #14
    Contao-Nutzer
    Registriert seit
    15.02.2014.
    Beiträge
    196

    Standard

    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 ...

  15. #15
    Contao-Nutzer
    Registriert seit
    15.02.2014.
    Beiträge
    196

    Standard

    Zitat Zitat von bteppan Beitrag anzeigen
    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

  16. #16
    Community-Moderator
    Wandelndes Contao-Lexikon
    Avatar von Spooky
    Registriert seit
    12.04.2012.
    Ort
    Scotland
    Beiträge
    33.894
    Partner-ID
    10107

    Standard

    Zitat Zitat von bteppan Beitrag anzeigen
    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?

  17. #17
    Contao-Nutzer
    Registriert seit
    15.02.2014.
    Beiträge
    196

    Standard

    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.

  18. #18
    Community-Moderator
    Wandelndes Contao-Lexikon
    Avatar von Spooky
    Registriert seit
    12.04.2012.
    Ort
    Scotland
    Beiträge
    33.894
    Partner-ID
    10107

    Standard

    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.

  19. #19
    Contao-Nutzer
    Registriert seit
    15.02.2014.
    Beiträge
    196

    Standard

    OK - ganz kann ich Dir jetzt technisch nicht folgen ... ... 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.

Aktive Benutzer

Aktive Benutzer

Aktive Benutzer in diesem Thema: 1 (Registrierte Benutzer: 0, Gäste: 1)

Lesezeichen

Lesezeichen

Berechtigungen

  • Neue Themen erstellen: Nein
  • Themen beantworten: Nein
  • Anhänge hochladen: Nein
  • Beiträge bearbeiten: Nein
  •