Auf welche Größe ein Bild skalieren für NULL 'render'-Zeit des Browsers?

UliHF · 28.08.2023

Danke für die Offenheit - sehe das Wachstum der Komplexität mitsamt den Konsequenzen durchaus.

Dafür gibt es im statischen Website-Generator Jekyll wie gesagt unter anderem Liquid. Dazu kommen weitere wesentliche Elemente wie z. B. Template ähnliche Layouts etc.

Liquid ermöglicht preprocessing der zu erzeugenden HTML-Dateien vor dem Hochladen auf den Server. Sobald z. B. die Art der EInbindung von Bildern in viell. drei, vier wesentliche Kategorien eingeteilt werden konnte (siehe ganz oben im Thread) und stabil steht, werden lediglich die wenigen entscheidenden Parameter an das Liquid-script übergeben, das dann einiges rechnet und als output die korrekte HTML-Code-Sektion erzeugt und in die Datei für's Hochladen einfügt. Nachdenken kann ich dann an anderer Stelle wieder, so lange es keine Fehler gibt.

Hoffe, Vorgehen und Werkzeug zur Erzeugung in dieser Sache nachvollziehbar umrissen zu haben.

Es macht schon Sinn...

Sempervivum · 29.08.2023

Ich habe mich mal bei Wikipedia über Jekyll und Liquid informiert. Scheint ein gut eingeführtes Werkzeug zu sein, um statische Webseiten zu erstellen und Liquid ist eine Vorlagensprache mit der gängigen Syntax mit doppelten geschweiften Klammern. Auch Github setzt es ein.
Ich kann da aber keinen Zusammenhang mit dem Thema "um den dafür benötigten Platz im Display bereits beim Bildaufbau reservieren zu können" erkennen.

UliHF · 29.08.2023

Sempervivum schrieb:
Ich habe mich mal bei Wikipedia über Jekyll und Liquid informiert. Scheint ein gut eingeführtes Werkzeug zu sein...

ist 'ausentwickelt', 'Hugo' könnte es evtl. mal ersetzen - kenne Hugo jedoch nicht

Sempervivum schrieb:
...
Ich kann da aber keinen Zusammenhang mit dem Thema "um den dafür benötigten Platz im Display bereits beim Bildaufbau reservieren zu können" erkennen.

Ich neige leider gerne zu Gedankensprüngen, die ein aneinander vorbeireden fördert

Fakten:

- Ich möchte aus genanntem Grund das Seitenverhältnis von Bildern deklarieren

- falls dies etwas Arbeit benötigt, gibt es dafür Liquid

Das Teil-Problem andersherum:

Wie würde ein erfahrener Nutzer bei Verwendung von figure vorgehen, um die gewünschte Darstellungsbreite *und* das Seitenverhältnis zu deklarieren?

Einzuhalten im Layout sind (Fall1, für (edit) ca. 95% der Browser und Geräte - es ist Sache des Nutzers darauf zu achten, dass alles auch reinpassen kann..):

- eine *gesamte Zeile* bzw. block für das übergeordnete Element

- erlaubt sind *keine* Überlappungen mit *keinen* anderen Inhalten

- die Breiten von figure, img und -caption sind identisch

- das figcaption ist *immer* direkt unterhalb des img positioniert

- mittige Positionierung des gesamten figure-Elements einschl. der Inhalte

Standard halt - leider bis dato in Verbindung mit den nötigen Breite / Höhe Angaben für das img nicht zufriedenstellend gelöst bzw. überhaupt 'sauber' gechafft.

Sempervivum · 30.08.2023

Dies sollte alle Anforderungen erfüllen:

Code:

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>Layout Figure Image Figcaption</title>
    <style>
        body {
            margin: 0:
        }

        figure {
            margin: 0 auto;
            padding: 0.5em;
            max-width: 50em;
        }

        figure img {
            width: 100%;
        }
    </style>
</head>

<body>
    <figure>
        <img src="images/dia0.jpg">
        <figcaption>
            Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et
            dolore
            magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita
            kasd
            gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur
            sadipscing
            elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At
            vero eos et
            accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum
            dolor sit
            amet.
        </figcaption>
    </figure>
</body>

</html>

*keine* Überlappungen mit *keinen* anderen Inhalten

Verzichtet man auf absolute Positionierung, negative Margins etc. ist das immer gegeben.

Es ist keine Angabe des Seitenverhältnisses erforderlich, der Browser kennt es und richtet das Layout so ein, dass das Bild nicht verzerrt wird.

UliHF · 30.08.2023

Sempervivum schrieb:
Dies sollte alle Anforderungen erfüllen:
...

So einfach das Beispiel ist, erfüllt es aufgrund der defaults fast alle Anforderungen.
Konnte dadurch den Wald trotz all der vielen Bäume wieder besser sehen und beschränke die Version 1 des Blogs in Sachen images nun radikal. Hat viel geholffen in diesem Fall.

Sempervivum schrieb:
... Es ist keine Angabe des Seitenverhältnisses erforderlich, der Browser kennt es und richtet das Layout so ein, dass das Bild nicht verzerrt wird.

Der Browser kennt im obigen Beispiel das Seitenverhältnis erst, nachdem er das Bild bereits vollständig heruntergeladen hat.
Genau das wollte ich vermeiden, um die UX zu verbessern.

Auf Mediaevent hatte ich vor 'ner halben Stunde das bisher einzige Beispiel gefunden, das figure, img, loading lazy, srcset und sizes in einem vollständigen Codeblock vereint (s. u.).

Das war die Idee - die ist jetzt bis auf Weiteres beiseite gelegt.

Quelle:
https://www.mediaevent.de/lazy-loading/
Source:

Code:

<figure class="wp-block-image alignwide size-large">
<img loading="lazy" width="1024" height="471"
    src="…/null-eins-1024x471.jpg" alt="" class="wp-image-6726"
    srcset="…/null-eins-1024x471.jpg 1024w,
            …/null-eins-300x138.jpg 300w,
            …/null-eins-768x353.jpg 768w,
            …/null-eins-1536x707.jpg 1536w,
            …/null-eins-1200x552.jpg 1200w,
            …/null-eins.jpg 1960w"
    sizes="(max-width: 1024px) 100vw, 1024px">
</figure>

Das war der Traum - auch diesen konnte ich jedoch nicht ans Laufen bringen.

Sowohl Opera als auch Firefox ignorieren loading="lazy" komplett und weiter Folgendes dazu.

Viele Grüße
Uli

Entwarnung.
Fehlerursache bezgl. loading="lazy" ist gefunden:
In einer der CSS-Deklarationen war eine HTML-formatierter Kommentar enthalten. Flüchtigkeits- bzw. Anfängerfehler

Der Traum kann also doch weitergehen

UliHF · 01.09.2023

Hallo zusammen,
u.a. beim Thema 'Retina Display' habe ich noch einige Kopfschmerzen und hoffe auf die hilfe von erfahrenen Mitgliedern.

Zu beachten dabei ist eine Besonderheit:
Viele meiner mit dem Handy erstellten Bilder sind nicht sehr scharf, sondern zeigen bereits im Original Unschärfen.
In solchen Fällen möchte ich vermeiden, dass der Browser solche Bilder ~~effektiv~~ auch noch hochskaliert.

Mit dem Pixel Density Descriptor bei srcset (1k, 2k, 3k etc.) lässt sich das nun abhängig von der jeweiligen Display-Auflösung zu ladende Bild deklarieren.

Bis jetzt habe ich dafür diese Rechnung für benötigte Bildgrößen (Hochskalieren soll vermieden werden).
Ausgehend vom 'Normal' eines 92 dpi Monitors = Faktor 1, entsprechend 1k, gilt dann für 460dpi (denke ich):

1 * 460dpi / 92dpi = 5

~~Ergänzung:~~
Und dann, um denselben Sehwinkel z. B. für ein Handy zu erhalten im Vergleich zu einem PC-Monitor diesen Wert z. B. wieder durch 4 teilen (für ein Viertel der Sehentfernung)?
Dann wäre der Faktor nur noch 5/4.

~~Ergänzung2:~~
Durch den Beitrag hier erst wird das klarer...
Es fehlt noch die optische Warhnehmung der Bildschärfe (Einfluss durch 1. Schritt: verkleinern, 2. Schritt: vergrößern), um das hoffentlich vollständig zu machen.
Habe deshalb etwas durchgestrichen, um die Problemstellung m. Berechnung baldigst zu vervollständigen.

Stimmt die Berechnung so?
Müsste dannn bei einem 100px breiten Ausgangs-Bild idealerweise auch ein 500px breites für ein Apple Retina Display mit 460ppi zur Verfügung gestellt werden (wenn es denn so breit wäre wie ein Standard-PC-Monitor)?

Wäre schön, wenn diese Rechnungsweise bestätigt werden könnte. Wie das dann jeweils in der Praxis gehandhabt wird, steht auf einem anderen Blatt..

Grüße
Uli

UliHF · 01.09.2023

Der obige Beitrag ist nach weiterem Nachdenken komplett durchgestrichen - es stellt sich verm. eine einzige Frage:
Kann es sein, dass im vorliegenden Fall *ausschließlich* der gerätetypische Betrachtungsabstand für die benötigten Bildgrößen entscheidend ist?

Gegeben ist:
- das Bild ist von schlechter Qualität und soll daher *optisch bemerkbar* nicht hochskaliert werden
- das Bild soll auf jedem Gerät (bei gerätetypischem Betrachtungsabstand) im selben Sehwinkel erscheinen (also größer in größerer Entfernung etc.)
- die CSS-Größe wird dem entsprechend deklariert
- es werden dafür per scrset unterschiedliche Bildgrößen zur Verfügung gestellt

Als Gedankenexperiement bzw. Ausgangsberechnungsbasis kann man hilfsweise verwenden:
Einen Standard Monitor, 1930*1080, 92dpi Auflösung bei einem typischen Abstand von ca. 75cm.

Ausgehend vom Fall des unveränderten Schärfeeindrucks (geklärt in diesem Beitrag) sehe ich das dann so:
Da sich ein > 1k bedingtes Herunter- und CSS-bedingtes wieder Hochskalieren für Displays > 1k optisch für den Betrachter neutralisiert, ist im vorliegenden Fall alleine der Betrachtungsabstand für die Berechnung der jeweils benötigten Pixelgrößen des Bildes entscheidend.

Falls diese Logik zutrifft, käme ich ohne Media-Query betr. Bildschirmgrößen (die Bildschirmgröße bedingt dabei den typischen Betrachterabstand) leider nicht aus.

Alles Andere lässt sich unschwer bestimmen / berechnen.

Hoffe sehr auf eure Sicht, Dank im Voraus!

Grüße
Uli

Zusatz-Erkenntnis:
Die (viell. überholte - aber weshalb?) Hoffnung, per Media-Query die Größe des Geräts und damit den typischen Betrachtungsabstand ermitteln zu können, schwindet rasant.
"device-width" ist laut MDN deprecated und soll nicht mehr verwendet werden.
Der Begriff 'width' bezeiht sich m. W. auf den Viewport, der nur sehr eingeschränkt mit der Gerätegröße korreliert werden kann.

UliHF · 04.09.2023

Gibt es eine Erklärung dafür, weshalb der Browser in diesem Beispiel das Default-img (60px) nimmt?

Ich denke, dass er aufgrund des scrsets von "dummy-mit-schriftzug.0120x0144.jpg 1k" auf meinem 1920x1080, 96dpi Monitor dieses größere Bild laden sollte.

Code:

<!DOCTYPE html>
<html>

  <head>
      <meta charset="UTF-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">

      <title>Drei Fälle der Einbindung eines Bildes</title>
      <style>
        img-medium { width: 70vw }
      </style>
  </head>

  <body>
    <p>Fall 1, default-Bildbreite = src = 60px, auf 50px Breite darzustellen.<br>
    Deklariert wird jedoch, auf einem 1k Bildschirm das 120px breite Bild aus dem srcset zu verwenden.</p>
    <img
      width="50px"
      height="60px"
      src="dummy-mit-schriftzug.0060x0072.jpg"
      srcset="
        dummy-mit-schriftzug.0120x0144.jpg 1k
      "
    >
  </body>
</html>

Auf meinerm System lädt er nur das 60px breite Bild. Im Inspektor habe ich nichts dazu sehen können.

Würde mich über eine Klärung sehr freuen, Grüße
Uli

Gelöst:
Mea culpa - hatte die Angabe 1x mit 1k verwechselt! Mit '1x' lädt der Browser das größere Bild, obwohl der Monitor nur Full HD ist, also etwas unter den 1x.
Was für mich merkwürdig bleibt: Der Firefox Inspektor sagte nichts dazu - in Opera hab ich's nicht versucht.