1. Herzlich willkommen bei WPDE.org, dem grössten und ältesten deutschsprachigen Community-Forum rund um das Thema WordPress. Du musst angemeldet oder registriert sein, um Beiträge verfassen zu können.
    Information ausblenden

pragmatische Alternative zu webP, heic, etc.?

Dieses Thema im Forum "Design" wurde erstellt von oslogrolls, 15. Mai 2019.

  1. oslogrolls

    oslogrolls Member

    Registriert seit:
    15. Mai 2019
    Beiträge:
    13
    Zustimmungen:
    0
    Hallo zusammen,
    meine erste Frage in diesem Forum ist gleich eine recht ungewöhnliche, fürchte ich. Wir spielen mit dem Gedanken, freigestellte Produktbilder mit Körperschatten als Bitmaps mit transparentem Hintergrund in einem E-Commerce-Projekt einzusetzen.

    Dasselbe Bild könnte auf einer Landingpage z.B. mit einer knalligen Hintergrundfarbe oder einem Farbverlauf inszeniert werden und neutraler, auf weißem Hintergrund auf der Produktdetailseite. Man hätte auch mehr Freiheit hinsichtlich des Längen-Breitenverhältnis + alle Hintergründe lassen sich per CSS erzeugen – auf Wunsch sogar animiert. Insgesamt erwachsen aus dieser quasi Layer-basierenden Herangehensweise eine ganze Menge kompositorische Möglichkeiten.

    Aber mit diesen teiltransparenten Produktbildern hätte man auch im Jahr 2019 noch das Problem, dass png's in der notwendigen Pixelauflösung unpraktikabel groß wären und die potentiellen, schlankeren Nachfolger (webP, heic...) keine ausreichende OS / Browserunterstützung haben.

    Ich frage mich, ob aufgrund dieser dusseligen Situation jemand ein ganz pragmatisches Tool entwickelt hat, was einem trotzdem die beschriebenen Arbeitsweise erlaubt – aber mit einem Trick letztlich deutlich schlankere Bilder ausspielt: Man würde das Seitenlayout einfach mit transparenten pngs bauen, letztlich würde aber ein merged snapshot vom Vordergrundbild und dem jeweils verwendeten Hintergrund als jpg an den Browser geschickt. Schon fast so wie eine Indesign Komposition aus lauter psd-Dateien, die dann als pdf mit eingebetteten jpgs gespeichert wird.

    Da es allerlei Plugins gibt, die bereits hochgeladenes Bildmaterial mit Filtern versehen, umspeichern und komprimieren, halte ich nicht für ausgeschlossen, dass es auch genau das bereits gibt, was ich gerade beschrieben habe. Weiß jemand vielleicht was?

    sample.png
    Einige Anwendungen: Freisteller mit Schatten, Hintergrund CSS
     
  2. b3317133

    b3317133 Well-Known Member

    Registriert seit:
    21. November 2014
    Beiträge:
    5.572
    Zustimmungen:
    466
    WordPress bzw. das Theme / Plugin, aus dem die Produktdarstellung kommt, sollte eigentlich entspr. verkleinerte Versionen der transparenten png an den entspr. Stellen verwenden bzw. per srcset usw. bereitstellen, wo keine grosse Pixelauflösung benötigt wird.

    Hast Du ggf. einen Link zu einer Seite in WordPress, wo das png der Produktdarstellung "unpraktikabel groß" angesehen werden kann?

    Die Zielgruppe des Shops hat vielleicht auch ältere Browser, daher ist die pragmatische Lösung meist "Massenkompatibilität soweit es geht". :)
     
  3. oslogrolls

    oslogrolls Member

    Registriert seit:
    15. Mai 2019
    Beiträge:
    13
    Zustimmungen:
    0
    Vielen Dank für die schnelle Antwort! Bislang handelt es sich um Vorüberlegungen für den Relaunch eines bestehenden Shops, daher kann ich noch nichts Konkretes zeigen.

    Ich habe bislang lediglich ein paar der bekannteren Kompressoren (tinypng, kraken...) getestet und komme bei 1080/1080px Produktbildern mit transparentem Hintergrund schwerlich deutlich unter 200 kb. Dasselbe Bild hätte als jpg in brauchbarer Qualität vielleicht 75kb oder weniger... In kleinerer Größe auf dem Telefon ausgespielt wäre das png sicher immer noch erheblich schwerer als das jpg. Um große Pixeldimensionen werden wir gerade bei einem ganz neuen Shop nicht rumkommen, Besucher sind's einfach mittlerweile gewohnt, bis auf "Porenlevel" hineinzoomen zu können.

    @Zielgruppe: Unsere Kernzielgruppe surft lt. Analytics mobil – ich denke, dort ist der Faktor alter Browser eher zu vernachlässigen – man wäre ja mit png's auch kompatibel.
     
  4. b3317133

    b3317133 Well-Known Member

    Registriert seit:
    21. November 2014
    Beiträge:
    5.572
    Zustimmungen:
    466
    Dafür bieten viele Shoplösungen eine "Lupe" oder eine grosse Version beim anklicken o.ä. an.

    Installiere doch mal eine Testversion von WordPress und einem Shop-Plugin Deiner Wahl und schau Dir an, was darin mit den Bildgrössen bei der Produktanzeige passiert.
     
  5. oslogrolls

    oslogrolls Member

    Registriert seit:
    15. Mai 2019
    Beiträge:
    13
    Zustimmungen:
    0
    Wäre eine Möglichkeit. Sicher technisch sinnvoll, aber weder schön, noch einladend, finde ich.
    Wir möchten die fraglichen Bildinhalte überall gleich so groß, wie möglich zeigen – auch auf Startseiten oder in redaktionellen Beiträgen. Dort kann man wohl kaum mit einer Lupe kommen. Ich suche eine wirklich robuste Möglichkeit, einerseits im Backend interaktiv (mit Farben und Farbverläufen) layouten zu können und echt fix ladende Seiten ausliefern zu können, die man sich zumindest auf allen üblichen Browsern anschauen kann.
     
    #5 oslogrolls, 15. Mai 2019
    Zuletzt bearbeitet: 15. Mai 2019
  6. r23

    r23 Well-Known Member

    Registriert seit:
    9. Dezember 2006
    Beiträge:
    4.387
    Zustimmungen:
    44
  7. mensmaximus

    mensmaximus Well-Known Member

    Registriert seit:
    24. Juli 2014
    Beiträge:
    7.592
    Zustimmungen:
    190
    Der Benutzer @r23 ist Spezialist für 3D Bilder mit WordPress und WooCommerce. Er hat sicherlich den richtigen Tipp.

    PS: da war @r23 schon schneller
     
  8. oslogrolls

    oslogrolls Member

    Registriert seit:
    15. Mai 2019
    Beiträge:
    13
    Zustimmungen:
    0
    Leider nicht völlig vernachlässigbar... :)
    Oder habe ich da ein Schlupfloch übersehen?



    2019-05-15_17h21_26.jpg
     
  9. oslogrolls

    oslogrolls Member

    Registriert seit:
    15. Mai 2019
    Beiträge:
    13
    Zustimmungen:
    0
    Habe das Bespielbild vielleicht etwas ungünstig gewählt. Es geht nicht um 3D-Computergrafiken, sondern um übliche Produktbilder. Wollte ein möglichst generisches Bild verwenden – es könnte ein Schuh sein, oder auch eine Armbanduhr, die jeweils einen Schatten aufweisen, so dass sie nicht in der Luft schweben.
     
  10. r23

    r23 Well-Known Member

    Registriert seit:
    9. Dezember 2006
    Beiträge:
    4.387
    Zustimmungen:
    44
    Google muss schon wieder ausgefallen sein


    Free Lossless Image Format (FLIF) ist ein verlustfreies Bildformat (aktuelle Version FLIF16-Spezifikation), das besser als

    PNG,
    verlustfreies WebP,
    verlustfreies BPG und
    verlustfreies JPEG 2000

    in Bezug auf das Kompressionsverhältnis ist.

    FLIF unterstützt eine Form des progressiven Interlacing (eine Verallgemeinerung des Adam7-Algorithmus), bei der jeder teilweise Download einer Bilddatei als verlustbehaftete Kodierung des gesamten Bildes verwendet werden kann.

    https://en.wikipedia.org/wiki/Free_Lossless_Image_Format

    Internet media type image/flif

    Es ist Patent frei
    https://github.com/FLIF-hub/FLIF

    man kann die Bilder mit poly-flif auch in alten Browsern anzeigen

    Demo
    https://uprootlabs.github.io/poly-flif/

    Einfach mal mit etwas Verstand die Affen als "orignal bilder" auswählen
     
  11. oslogrolls

    oslogrolls Member

    Registriert seit:
    15. Mai 2019
    Beiträge:
    13
    Zustimmungen:
    0
    Hmm. FLIF und auch die Demo-Seite war mir schon bekannt, bevor ich diesen Post schrieb. Ich hatte im Thread-Titel lediglich zwei bekanntere Formate genannt.

    Klar, FLIF hört sich sehr interessant an. Aber auf der von Dir verlinkten PolyFill Demo-Seite liest man auch gleich "don't use in production". Ich suche wirklich eine robuste Lösung für tausende von Bildern, die auch in drei Jahren noch funktioniert.

    Tatsächlich dürfte die Methode, nach der ich ursprünglich im ersten Post fragte (Setup mit PNG, Ausspielen als merged jpg) deutlich schlanker ausfallen, als FLIF - das von Dir erwähnte Demo-Bild mit dem Affen lässt sich jedenfalls als jpg noch deutlich weiter runter drehen, bevor grobe Kompressions-Artefakte auftreten.
     
  12. r23

    r23 Well-Known Member

    Registriert seit:
    9. Dezember 2006
    Beiträge:
    4.387
    Zustimmungen:
    44
    selbstverständlich waren dir die unterschiede schon klar.

    Warum verwendest du nicht einfach einen Image Server?
    https://en.wikipedia.org/wiki/Image_server#E-commerce

    und? Deine "teiltransparenten Produktbildern" kannst du sicherlich im JPEG Format abspeicher. Aber selbstverständlich können wir uns auch über verlustfreie Kompression von JPG unterhalten :) facebook hat dort ein wunderbares Projekt finanziert und selber auch etwas sinnvolles Produziert. Bei verlustbehafteter Kompressions bevorzuge ich zurzeit eine KI von Google...

    Die Forschungsabteilung von Mozilla untersucht in einer fortlaufenden Studie verschiedene Bildkompressionen für WebP, JPEG, JPEG XR und HEVC-MSP sowie deren Encoder. Für die Test-Suite benutzt das Team nun die Programmiersprache C, was die Ergebnisse reproduzierbar machen soll.

    Diesem Team ist die Trellis-Quantisierung https://de.wikipedia.org/wiki/Trellis-Quantisierung für JPG gelungen. Dieser Algorithmus wird unter anderem auch in x264 eingesetzt. Zudem erlaubt das Tool cjpeg nun auch JPEG-Dateien als Eingaben, sodass diese weiter verkleinert werden können.

    Zurück zu facebook - damit man nicht mehr wissen muss, was unter der Haube passiert wurde ein Open Source Projekt vor das Projekt von Mozilla und weiteren geschaltet - mit dem Ziel zur Bildoptimierung für https://libspectrum.io/docs/about_spectrum.

    "teiltransparente Produktbilder" werden hier in der Regel von einer KI sortiert und analyisert. Bei Auslieferung kann man die Bildgröße und Hintergrundfarbe ändern...und selbstverständlich in einem optimierten Format ausliefern.
     
  13. oslogrolls

    oslogrolls Member

    Registriert seit:
    15. Mai 2019
    Beiträge:
    13
    Zustimmungen:
    0
    Ich wollte nicht arrogant rüberkommen, hatte im Vorfeld jedoch schon ein paar Sachen gelesen. Darunter war auch der recht neue Beitrag des Entwicklers eines Kompressor-Service auf Medium, der zum Resümee kommt, dass bislang noch kein Weg um die klassischen Bildformate rumführt. Daher dieser Thread mit meiner ursprünglichen Frage nach einem Workaround. Klar wird man sich auch über Server und auszuliefernde Bildgrößen Gedanken machen müssen...

    Die aufgezählten Technologien klingen fraglos sehr interessant: Ist davon denn schon irgendwas ready for prime time – hast Du selbst bereits ein E-Commerce Projekt damit umgesetzt?
     
  1. Diese Seite verwendet Cookies, um Inhalte zu personalisieren, diese deiner Erfahrung anzupassen und dich nach der Registrierung angemeldet zu halten.
    Wenn du dich weiterhin auf dieser Seite aufhältst, akzeptierst du unseren Einsatz von Cookies.
    Information ausblenden
  1. Diese Seite verwendet Cookies, um Inhalte zu personalisieren, diese deiner Erfahrung anzupassen und dich nach der Registrierung angemeldet zu halten.
    Wenn du dich weiterhin auf dieser Seite aufhältst, akzeptierst du unseren Einsatz von Cookies.
    Information ausblenden