Ankündigung

Einklappen
Keine Ankündigung bisher.

Grafikformat webp: Delay bei Anzeige trotz hoher Datenersparnis

Einklappen

Neue Werbung 2019

Einklappen
X
  • Filter
  • Zeit
  • Anzeigen
Alles löschen
neue Beiträge

  • Grafikformat webp: Delay bei Anzeige trotz hoher Datenersparnis

    Hallo zusammen,

    u.a. Google empfiehlt, bei Bildern das "next generation format" WEBP statt z.B. GIF, JPG oder PNG zu verwenden. Tatsächlich verringert das Format die Dateigröße meiner Erfahrung nach je nach Motiv um 20-80%, und mit bloßem Auge sind die geringfügigen Unterschiede bei verlustbehafteter Komprimierung kaum zu sehen.

    Da noch nicht alle Browser WEBP unterstützen, ist man darauf angewiesen, ein altes Format (GIF, JPG oder PNG) als Fallback vorzuhalten. Dazu gibt es das HTML-Tag <picture> sowie in CSS image-set.

    Probleme:

    1. WEBP-Bilder werden trotz Caching zumindest im Firefox im Vergleich zu den anderen Formaten mit leichter zeitlicher Verzögerung dargestellt, was auch mit bloßem Auge auffällt, wenn z.B. auf einer Seite verschiedene Formate zusammen auftreten. Die GIFs, JPGs und PNGs erscheinen immer alle zeitgleich, bevor dann kurz darauf die WEBPs folgen. Das ist schade, weil das WEBP in meinem Fall 80% der Dateigröße einspart, aber trotzdem im Vergleich zu den anderen (deutlich größeren) Formaten verzögert angezeigt wird. Ist das WEBP-Rendering derzeit ggf. noch nicht ganz optimal und wird noch genauso schnell wie bei GIF, JPG und PNG? In Microsoft Edge tritt die kleine Verzögerung bei der Anzeige von WEBPs übrigens so nicht auf. Allerdings werden die WEBPs dort seltsamerweise nicht gecacht (im Firefox dagegen schon), obwohl vom Webserver alle vier Formate dafür vorgesehen sind.

    2. <picture> funktioniert einwandfrei, aber image-set in CSS (z.B. für Hintergrundbilder benötigt) unterstützt in den gängigen Browsern tatsächlich das type-Attribut noch nicht, obwohl es bereits dokumentiert ist: https://developer.mozilla.org/…s/Web...age/image-set()

    Sobald man im image-set eine url mit type ergänzt, wird das ganze image-set nicht mehr berücksichtigt, und der Fallback auf das vorangestellte "background-image: url" ohne image-set greift. Ist hier schon etwas dokumentiert, was tatsächlich im Browser noch nicht funktioniert?

  • #2
    Ohne Beispielcode kann man nicht sagen, was du falsch machst.

    Kommentar


    • #3
      Zitat von dark_rider Beitrag anzeigen
      Da noch nicht alle Browser WEBP unterstützen, ...
      Siehe https://de.wikipedia.org/wiki/WebP#U...nde_Webbrowser

      Denke, dass die Browser, die das Format nicht kennen, vernachlässigbar sind.

      Kommentar


      • #4
        In Ordnung, hier ein Code-Beispiel:
        HTML-Code:
        <table><tr>
             <td style="background-image:url(bgpic.png); background-image:image-set(url(bgpic.webp) type(image/webp), url(bgpic.png) type(image/png));">
        </tr></table>
        Wenn ich "type(image/webp)" und "type(image/png)" entferne, wird das image-set berücksichtigt und bgpic.webp als Hintergrundbild geladen. Mit den (dokumentierten) type-Atributen dagegen greift der Fallback auf bgpic.png, und zwar nicht die zweite Option im image-set, sondern das vorangestellte Fallback "background-image:url(bgpic.png);" (durch dort testweise angegebenes .gif verifiziert).

        Kommentar


        • #5
          Der Code ist fehlerhaft. Du kannst nicht zweimal hintereinander das Property background-image setzen.

          Kommentar


          • #6
            Zitat von hellbringer Beitrag anzeigen
            Der Code ist fehlerhaft. Du kannst nicht zweimal hintereinander das Property background-image setzen.
            Doch kann man, hier (letztes Beispiel, prividing a fallback) wird es sogar vorgemacht.

            Bin jetzt unsicher ob die Anführungsstriche für die URL und die Type-Angaben, die fehlen, sein müssen.
            Des weiteren entscheidet der Browser welches Bild er auswählt, da hat man dann keinen Einfluss mehr, was ja auch der Sinn dahinter ist.

            Kommentar


            • #7
              Zitat von protestix Beitrag anzeigen
              Doch kann man, hier (letztes Beispiel, prividing a fallback) wird es sogar vorgemacht.
              Genau, strikt nach offizieller Dokumentation!
              Zitat von protestix Beitrag anzeigen
              Bin jetzt unsicher ob die Anführungsstriche für die URL und die Type-Angaben, die fehlen, sein müssen.
              Hab ich auch schon probiert, das macht keinen Unterschied - egal, ob ohne Anführungszeichen oder mit ein- oder zweigestrichenem.

              Problem Nummer 1 habe ich nun zwischenzeitlich lösen können: webp-Dateien wurden zunächst trotz .htaccess-Eintrag
              Code:
              ExpiresByType image/webp "access plus 1 week"
              nicht gecacht, weil der MimeType dem Apache offensichtlich noch unbekannt war. Abhilfe schuf ein davor eingesetztes
              Code:
              AddType image/webp .webp
              https://wordpress.org/support/topic/...er-images-are/

              Kommentar

              Lädt...
              X