webp-Bilder

beats TEST blog

Mittwoch, 11. Dezember 2019

webp-Bilder

Info (Ausschnitt aus meinem gestrigen Beitrag auf dem Live-Blog:

.... Dann schraubte ich wieder einmal etwas am Blogdesign herum und war eigentlich mit dem Resultat ganz zufrieden. Ich schaute mir das am PC und am Mobile an -> passt. Dann nahm ich Karin's iPad zur Hand und stellte erstaunt fest, dass die Bilder auf der Startseite nicht angezeigt werden. Wieso denn nicht?

Google ist Dein Freund und so kam ich dem Problem schnell auf die Schliche. Vor ein paar Wochen habe ich das Dateiformat der Bilder auf der Startseite von .jpg auf .webp geändert. Dies nachdem ich einen Speedtest durchgeführt habe und dort wurde mir der Ratschlag erteilt, dass ich webp-Bilder verwenden sollte, weil diese weniger Daten speichern und somit dann auch schneller geladen werden. Klingt einleuchtend. Das war dann auch rasch gemacht und ich hielt die Sache für erledigt. - Bis heute. Denn heute sah ich mit eigenen Augen: Apples Safari Browser kann keine webp-Bilder darstellen. Webp ist ein von Google forcierter Standard, weshalb sollte sich Apple darum kümmern? Für mich hiess das dann: zurück auf Feld 1 :grrr:

Zum Glück sind auf der Startseite insgesamt nur drei Bilder und diese Bilder hatte ich ja schon von früher im jpg-Format. Es war also schnell erledigt und jetzt klappt es auch mit dem Apfel-Browser. Tja, dass sind unsere modernen Zeiten. Manchmal bin ich dafür sogar etwas zu modern... ;-)

Trackback-URL für diesen Eintrag

Dieser Link ist nicht aktiv. Er enthält eine kopierbare Trackback-URI, um manuell ein Ping- und Trackback zu diesem Eintrag für ältere Blogsysteme zu generieren; zB (immer noch valide) über das zur Verfügung gestellte Eintragsfeld des serendipity_event_trackback Plugins. Serendipity und andere Blogsysteme erkennen die Trackback-URL heutzutage aber automatisch anhand der Artikel-URL. Die Trackback-URI für ihren Link des Sender-Eintrages lautet daher wie folgt: »https://www.blog.dokumenzi.ch/2567-webp-Bilder.html«

Kommentare

Ansicht der Kommentare: Linear | Verschachtelt

  1. Ian Styx am :

    https://caniuse.com/webp
    und das styx 3.0 changelog (über Wartung)
    und Serendipity Styx Blog (glaube ich)
    ;-)

  2. Ian Styx am :

    Zur Ergänzung mit Styx 3.0 und "als Picture Element" hinzufügen als

    Beat: musste den eingefügten Code entfernen. Der zerschoss mir gleich das CSS.

    dann aber doch schon, weil Safari dann das fallback "jpg/png" nehmen würde.

  3. Beat am :

    Für mich als Laie/Bastler zu kompliziert! :th_down:

    Ich kann mit .jpg leben und einen Geschwindigkeitspreis muss ich mit meinem Blog auch nicht gewinnen (das Resultat war eh überraschend gut mit 96 von 100 Punkten). Da kann ich gut zuwarten und sehen, ob sich das auch wirklich durchsetzt. In meinem Umfeld gibt es (erschreckend) viele Apple-Fans. :-O

  4. Ian Styx am :

    ...ist doch nicht wirklich kompliziert! Man schickt, umkleidet von picture, einfach zwei image links. Der Browser darf sich dann aussuchen, was er kann. Das können alle.

  5. Ian Styx am :

    Oh Sorry. Aber du hast damit gesehen, wie die Styx-Schutzmaßnahmen gegen potentiell maliziösen code wirken! :-) Also nochmal, diesmal ordentlich escaped. Füge es am besten per Quelltext in die beiden genannten comments ein: 1. Beispiel:

    <a class="serendipity_image_link" href="/uploads/test/The_Whale.jpg"><!-- s9ymdb:237 --><picture><source alt="" class="serendipity_image_left" height="375" srcset="/uploads/test/.v/The_Whale.serendipityThumb.webp" type="image/webp" width="400" /><img alt="" class="serendipity_image_left" src="/uploads/test/The_Whale.serendipityThumb.jpg" style="width:400px" /></picture></a>

    und für das 2. Beispiel

    <picture><source alt="" class="serendipity_image_left" height="375" srcset="/uploads/deinBild.webp" type="image/webp" width="800" /><img alt="" class="serendipity_image_left" src="/uploads/deinBild.jpg" style="width:800px" /></picture>

  6. Beat am :

    Du bist ja lustig! :beer: :grins:

    Ich war natürlich zuerst einmal geschockt und dachte: "was habe ich jetzt wieder für einen Scheiss im CSS verbockt?"

    Ich wollte nämlich die blockquote im Beitrag gleich wie im Kommentar stylen, doch das klappt irgendwie überhaupt nicht. Vermutlich hat es einen Grund, weshalb im Original-CSS-File steht: /*needs a review*/ :cry:

  7. Ian Styx am :

    Wieso, du müsstest doch einfach eine rote Warnmeldung gesehen haben, oder?
    Zur blockquote:
    Das steht da weil man / du sich da noch mit beschäftigen muss!

  8. Ian Styx am :

    .post_content blockquote {
    border-left: 5px solid #ccc;
    padding-left: 1em;
}

    wenns nur für entries ist, sonst nur mit blockquote

  9. Beat am :

    Genau so habe ich das gemacht, doch es hat nicht funktioniert. Weshalb denn nicht... grübel, grübel und studier...

    Ich suchte den Webserver nach user.css ab und siehe da: ich kopierte die überarbeitete Version wieder einmal in ein falsches Verzeichnis... :sik: so kann es nicht gehen...

    Mach für heute wohl besser Schluss. Bin sehr früh ausgestanden und wohl schon etwas müde... :wave:

    Entschuldige, den unnötigen Aufwand. :shame:

  10. Ian Styx am :

    Das passiert mir regelmäßig für das Backend style.css. Ich vergesse immer das styx child template.

  11. Beat am :

    Testkommentar

    Anzeige abonniert?

  12. Beat am :

    erzeugt error in DB

  13. Ian Styx am :

    Bedeutet beides was genau? Anything notable for me to fix?

  14. Beat Menzi am :

    siehe neuer Blogbeitrag

Kommentar schreiben

Die angegebene E-Mail-Adresse wird nicht dargestellt, sondern nur für eventuelle Benachrichtigungen verwendet.
▲