Modulshop - Eine große Auswahl an neuen und hilfreichen Modulen für die modified eCommerce Shopsoftware
Neuigkeiten
  • Die modified eCommerce Shopsoftware ist kostenlos, aber nicht umsonst.
    Spenden
  • Damit wir die modified eCommerce Shopsoftware auch zukünftig kostenlos anbieten können:
    Spenden
  • Thema: ANLEITUNG: Mit Smarty Bildgrößen auf Produktseiten auslesen

    Guenter59

    • Viel Schreiber
    • Beiträge: 1.485
    Re: ANLEITUNG: Mit Smarty Bildgrößen auf Produktseiten auslesen
    Antwort #45 am: 16. Oktober 2014, 17:23:25
    Hi Dominik
    Macht allerdings mit responsiven Templates nicht mehr so viel Sinn, weil die Bilder sich ja jeweils an die Bildschirmgrösse anpassen müssen.
    Oder unterliege ich damit einem Denkfehler?
    Greetz
    Günter
    Trade Republic - Provisionsfrei Aktien handeln

    Modulfux

    • Experte
    • Beiträge: 3.590
    • Geschlecht:
    Re: ANLEITUNG: Mit Smarty Bildgrößen auf Produktseiten auslesen
    Antwort #46 am: 16. Oktober 2014, 17:46:39
    Dann muss aber auch für responsive Templates die Funktion xtc_image() um die Parameter height und width gekürzt werden.

    Gruß
    Ronny

    Guenter59

    • Viel Schreiber
    • Beiträge: 1.485
    Re: ANLEITUNG: Mit Smarty Bildgrößen auf Produktseiten auslesen
    Antwort #47 am: 16. Oktober 2014, 17:58:01
    Hi Ronny
    Zitat
    Dann muss aber auch für responsive Templates die Funktion xtc_image() um die Parameter height und width gekürzt werden.
    Ist es denn besser das zu tun, oder doch besser die Bildgrössen angeben?

    Die Bildgrössen würden am PC ja trotzdem noch Sinn machen und dürften bei kleineren Geräten nicht unbedingt stören oder?

    Bei responsiven Templates auf der Basis von Mediaqueries müßte man zum entfernen dann ja trotzdem noch was zusätzlich machen ( php, javascript oder ....) .

    Gruß
    GMS

    noRiddle (revilonetz)

    • Experte
    • Beiträge: 13.707
    • Geschlecht:
    Re: ANLEITUNG: Mit Smarty Bildgrößen auf Produktseiten auslesen
    Antwort #48 am: 20. Oktober 2014, 18:26:35
    Am Besten wäre mobilen Geräten andere (kleinere) Bilder zu servieren.
    Da dies aber meist sehr aufwändig ist:
    Wenn man seinen Shop speed-optimiert
    - kein Javascript "above the fold"
    - diverse Javascript-Scripts und CSS-Dateien jeweils in eine Datei wo möglich und minify-en
    - GZIP benutzen
    - E-tags deaktivieren
    - Cache-Control Header setzen

    dann sollte die Nicht-Angabe von width und height bei Bildern ein kleines Restproblemchen sein welches kaum zum Tragen kommt.
    Mittels "Lazy Load" oder "Unveil" kann man ja außerdem für Produkt-Listing-Seiten noch etwas tun.

    Gruß,
    noRiddle

    noRiddle (revilonetz)

    • Experte
    • Beiträge: 13.707
    • Geschlecht:
    Das eigtl. Thema des Threads scheint untergegangen zu sein.
    GooglePagespeed moniert die fehlenden width- und height-Angaben bei den Produkt- und Kategorie-Bildern.
    Stand das nicht auf der Roadmap (hier im Thread von GTB und Tomcraft bestätigt) ?
    In der 2.0.6.0 sehe ich noch nichts davon.

    Gruß,
    noRiddle

    Markus

    • modified Team
    • Beiträge: 1.361
    • Geschlecht:
    Hi noRiddle,

    das ist so nicht ganz korrekt mit den Größenangaben für Bilder und Tante Google.
    Google moniert das nur dann wenn dadurch die Layoutsprüge zustande kommen. Und die kommen natürlich im Normalfall dann auch zustande. Das lässt sich nicht verhindern.  Abhilfe würde da nur "width" und "height" Angaben schaffen.

    Ddaruch bist du aber nicht mehr wirklich felxibel bzw. brauchst dann 5 oder 6 Bilder um je nach Viewport das passende Bild laden zu können. Und da kommst du dann nicht mehr mit 2 oder 3 Produktbilder aus.

    Wenn man jetzt aber um die Bilder einen Div-Container baut mit dem Seitenverhältnis der Bilder und das Bild darin geladen wird (wichtig ist dabei dass das Bild absolut positioniert wird) ... dann meckert Google auch nicht mehr rum.  Dann sind Google auf einmal "height" und "width" egal.

    Der Vorteil von dem ganzen ist die einfache Handhabung und die Bilder bleiben nachwievor responsive und skalieren frei in dem vorgesehenen Container. :-)

    Das ganze wurde so auch für die Produktbilder in der 2.0.6.0 umgesetzt. Zusätzlich kam da in den Listings noch der "pciture" Tag hinzu der dann bei schmaleren Viewports auch die kleineren Bilder laden kann.

    Markus

    noRiddle (revilonetz)

    • Experte
    • Beiträge: 13.707
    • Geschlecht:
    Hi Makus.
    Okay, du hast offensichtlich mehr Erfahrung und dich eingehender damit befasst.

    Die Bilder skalieren allerdings auch mt width- und height-Angaben "frei in dem vorgesehenen Container", wenn das CSS dazu stimmt. Was Google mit den Angaben will verstehe ich allerdings ohnehin nicht, eben wegen der Responsivität. Der Browser kann die Angaben ja eigtl. nur in der größt möglichen Ansicht verwerten.

    Einen Container um die Bilder mit den Seitenverhältnis derselben sehe ich nicht in der 2..0.6.0 im tpl_modified_responsive.
    Mag aber sein, daß ich etwas nicht verstanden habe.

    Gruß,
    noRiddle

    Markus

    • modified Team
    • Beiträge: 1.361
    • Geschlecht:
    Hi noRiddle,

    ich versuche es mal anhand vom CSS zu erklären.

    Wir haben diese Angaben:

    Code: CSS  [Auswählen]
    .lb_image {
        display: block;
        vertical-align: middle;
        text-align: center;
        position: relative;
        overflow: hidden;
        margin: 0 0 10px 0;
    }

    Das ist der äussere Image-Container.
    Ich denke das ist soweit klar.
    Der ist 100% breit und hat ein overflow hidden damit nichts übersteht.
    Die Höhe ist flexibel. Das "relative" wird für das Bild gebraucht um es dann richtig zu positionieren.

    Dann haben wir diese before-Anweisung:

    Code: CSS  [Auswählen]
    .lb_image:before {
        content: "";
        display: block;
        padding-top: 78%;
    }

    Die bewirkt, dass lb_image immer eine Höhe von 78% im Verhöltnis zur Breite bekommt.
    Als Beispiel ... bei einer Breite von 200px wird der Container immer 156px hoch sein.

    Jetzt kommt das eigentliche Bild:

    Code: CSS  [Auswählen]
    .lb_image img {
        margin: auto;
        position: absolute;
        font-size: 0px;
        top: 0;
        left: 0;
        bottom: 0;
        right: 0;
        max-width: 20%;
        max-height: 20%;
        -webkit-transform: scale(5.0);
        -moz-transform: scale(5.0);
        -ms-transform: scale(5.0);
        -o-transform: scale(5.0);
        transform: scale(5.0);
    }

    Wichtig ... es wird absolut innerhalb von lb_image positioniert.
    Höhe und Breite von lb_image sind ja bereits berechnet.
    Die 0 Werte von top, left, bottom und right sorgen in Verbindung mit dem margin: auto dafür dass das Bildelement zentriert wird. Das funktioniert aber nur richtig wenn das Bild auch kleiner ist wie der eigentliche Container.

    Jetzt kommt ein kleiner "Kniff".
    Mit width: 100% und height: 100% kann ich hier nicht arbeiten da ich sonst ein verzerrtes Bild bekomme.
    Wenn ich nur width:100% und height: auto mache kann es sein, dass "Hochkant" Bilder abgeschnitten werden.
    (objet-fit wäre auch eine Lösung wenn da nicht der IE11 wäre)

    Mit max-width bzw. max-height von 20% werden für das Bild erstmal kleinere Werte für Höhe und Breite berechnet welche dann mit transform 5 wieder vergößert werden. Der Vorteil dabei ist dass dadurch auch Hochkantbilder sauber zentriert und nicht abgeschnitten werden. Wenn ich nur die beiden max-width und max-height Angaben mit 100% nutzen würde, wäre genau das  der Fall.

    So klarer was hier passiert? :-)

    Markus

    noRiddle (revilonetz)

    • Experte
    • Beiträge: 13.707
    • Geschlecht:
    'n Morgen Markus.
    Zuesrt vielen Dank für die aufwändige Erklärung.
    Okay, verstehe, ist so ähnlich wie man auch embedded YouTube-Vids responsive bekommt.
    Wenn Tante G. das so akzeptiert obwohl doch weit komplexer als die direkte width- und height-Angabe im Bild-tag...

    vertical-align: middle auf .lb_image allerdings verstehe ich nicht. Das dürfte keine Wirkung haben bei einem Block-Element.

    Gruß,
    noRiddle

    Markus

    • modified Team
    • Beiträge: 1.361
    • Geschlecht:
    Hi noRiddle,

    das ist korrekt ... das könnte raus.

    vertical-align: middle auf .lb_image allerdings verstehe ich nicht. Das dürfte keine Wirkung haben bei einem Block-Element.

    Markus

    noRiddle (revilonetz)

    • Experte
    • Beiträge: 13.707
    • Geschlecht:
    Ich möchte das hier nochmals aufgreifen.
    Bei den Kategoriebildern ist die Sache mit dem umgebenden Container im Seitenverhältnis der Bilder nicht angewendet.
    Da moniert PageSpeed auch die Dimensions-Angaben.
    Ich frage mich nur wie man die in den source-tag einbetten soll.

    Bei den Produkt-Listing moniert PageSpeed übrigens trotz deiner Erklärung die fehlenden Dimensions.
    Irgenwie geht mir Tante G. auf den Zeiger...

    Gruß,
    noRiddle

    Markus

    • modified Team
    • Beiträge: 1.361
    • Geschlecht:
    Hi noRiddle,

    Zitat
    Irgenwie geht mir Tante G. auf den Zeiger...
    Willkommen im Club :-) Ich habe schon viel Zeit mit den ganzen Dokus verbracht um nahezu jede noch so kleine Meldung verschwinden zu lassen bzw. Möglichkeiten zu finden diese zu fixen.

    Ich weiss dass das nicht drin ist und wie hier beschrieben ist nicht die Technik das Problem.
    https://www.modified-shop.org/forum/index.php?topic=35736.msg384481#msg384481

    Wir wissen nicht welche Banner- oder Kategoriebildgrößen jemand verwendet. Aus dem Grund ist es nicht möglich hier eine vernünftige Lösung mit Allgemeingültigkeit zu schaffen. Einzige Ausnahme wäre wenn wir die Bildgrößen vorschreiben.
    Ob das dann der bessere Weg wäre ist eine andere Diskussion.

    Es wird dir auch nicht viel helfen wenn du die Bildgrößen ausliest und ins Template einfügst. Du wirst immer das Problem haben die richtige Bildgröße zu erwischen und auch mit dem CSS mussst du dir dann einige "Krücken" basteln damit die Bilder responsive bleiben. An der Stelle mit Javascript anzufangen Bildgrößen zu berechnen halte ich ebenfalls für den falschen Weg.

    Es geht google dabei nicht um die Bildgrößen ... es geht um die Layoutverschiebungen.

    Hier steht was interessantes ..
    https://web.dev/optimize-cls/?utm_source=lighthouse&utm_medium=lr#images-without-dimensions

    Zitat
    Images without dimensions 🌆 #
    Summary: Always include width and height size attributes on your images and video elements. Alternatively, reserve the required space with CSS aspect ratio boxes. This approach ensures that the browser can allocate the correct amount of space in the document while the image is loading.

    Dass er das dann trotzdem anmeckert ... tja .. .was soll ich sagen. Auf jeden Fall werden deine Werte bei page-speed nicht besser werden auch wenn du da eine width und height Angabe in den Bildern unterbringst.

    Markus

    P.S. gehört nur indirekt zu dem Thema ... aber damit lassen sich die Layoutverschiebungen beheben.
    https://www.modified-shop.org/forum/index.php?topic=35736.msg384497#msg384497

    noRiddle (revilonetz)

    • Experte
    • Beiträge: 13.707
    • Geschlecht:
    Verstanden.
    Ich danke dir für deine sehr ausführliche Antwort und dein unermüdliches Forschen sowie deine Bereitschaft Anregungen und Verbesserungsvorschläge zu durchdenken und ggfls. anzunehmen. Das ist imnsho vorbildlich.

    Gruß,
    noRiddle

    Scubi

    • Mitglied
    • Beiträge: 220
    Re: ANLEITUNG: Mit Smarty Bildgrößen auf Produktseiten auslesen
    Antwort #58 am: 03. August 2021, 22:00:44
    Nabend,

    ich habe da auch noch eine Frage. Pagespeed in Google Chrome nutz ja das Lossy Compressing. Da habe ich immer wieder Verbesserungsvorschläge von Google, egal wie gut und womit ich vorher meine Bilder komprimiert habe.

    Kann das Lossy Compressing irgendwie direkt im Shop oder auf dem Server eingebaut werden, damit man zumindest hier keine Fehler mehr ausgegeben bekommt oder ist das ein Google eigenes Verfahren zur Komprimierung?

    Gruß Scubi
    rechtstexte für onlineshop
    3 Antworten
    3647 Aufrufe
    07. August 2014, 08:45:39 von hbauer
    4 Antworten
    3776 Aufrufe
    05. September 2011, 21:40:14 von hedon02
    4 Antworten
    5672 Aufrufe
    27. Januar 2013, 21:41:19 von phil1337
               
    anything