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

[Sempervivum]

Nach meinem Verständnis ist das Bild in der 1. und 2. Variante für das menschliche Auge gleich 'scharf'. Der Unterschied besteht physikalisch darin, dass auf dem 2k Monitor ein einziges Ursprungs-Pixel zwar nun als 4 Pixel dargestellt werden, dafür bei doppelter Monitor-Pixeldichte auf denselben 10cm".

Gleich scharf dürfte zutreffen. Damit es auf einem 2k-Monitor wirklich schärfer dargestellt wird, muss es auch eine höhere Auflösung haben. Genau dafür gibt es ja diese Dinge mit srcset.
Wichtig ist in diesem Zusammenhang auch das Device-Pixelratio. Der Artikel hier bei MDN sieht viel versprechend aus aber ich habe ihn nicht vollständig durch gelesen. Prüfe ob er deine Fragen beantwortet.
https://developer.mozilla.org/en-US/docs/Web/API/Window/devicePixelRatio?retiredLocale=de

 

[UliHF]

Da die Bilder für den Nutzer auf Anforderung durch Antippen bzw. hover auch vergrößert dargestellt werden sollen nehme ich an, dass so etwas wie klassenname:hover {} dazu verwendet werden kann.

Einen besonderen Weg zum Nachladen eines dazu benötigten größeren Bildes durch den Browser für diesen Fall habe ich bisher nicht gefunden.
Die Voraussetzung dabei ist:
Aus dem scrset hatte der Browser vor dem :hover ein gerade passendes Bild heruntergeladen. Dieses wäre für ein :hover nicht mehr optimal.

Was meint Ihr: Würde der Browser aus dem bereits bekannten srcset ein Bild mit höherer Auflösung nachladen (sofern er dort eins findet..)?

Das Testen aller Anwendungsfälle ist ziemlich schwierig und aufwendig für mich - deshalb wäre eine Vorab-Info für den 'Plan' sehr hilfreich.

Vielen Dank im Voraus und Grüße
Uli

 

[Sempervivum]

Einen besonderen Weg zum Nachladen eines dazu benötigten größeren Bildes durch den Browser für diesen Fall habe ich bisher nicht gefunden.

Den gibt es schon: Ein gängiges Verfahren ist, um das kleinere Bild herum ein a-href-Tag zu legen, das auf das größere Bild verweist und es dann so zu gestalten, dass es über der Seite liegt. Das läuft unter dem Begriff "Lightbox", wird oft und gern angewendet und es gibt ausgereifte Scripts dafür. Mein Favorit ist Fancybox. Hover kann man machen aber es wird dann auf einem Touch-Gerät nicht funktionieren.

 

[UliHF]

Hallo Ulli,
ganz puristisch: no script...

Über Lightbox stieß ich dann darauf, etwas Ähnliches auch mit purem CSS zu bewerkstelligen - wird verschoben auf unbestimmt, zu viel, würde niemals fertig mit den hunderten von Einzelheiten und den vielen Teufeln, die darin stecken...

Es gibt ganz nebenbei auch noch Inhalte einschl. z. B. CAD-Modellierung, die in den Blog sollen

Meine Kernfrage war die: wie kann ich den Browser daran hindern, von vornherein eine 'zu große' Bilddatei zu laden um dies ggfs. erst bei Nutzeranfrage zu machen? Er lädt nach meiner Erfahrung gerne mal eine zu große.

Die daran anschließende Aufgabe wäre: wie ggfs. das größere Bild nachladen?

Vermutlich muss ich das alles erst mal und ganz schilcht dem 'unbekannten' Browser überlassen. Solche Details sind nicht so leicht und überall verfügbar.

Einen schönen abend!

 

[Sempervivum]

ganz puristisch: no script...

Warum das?

würde niemals fertig mit den hunderten von Einzelheiten und den vielen Teufeln, die darin stecken...

Das ist ein typischer Nachteil von Lösungen nur mit CSS.

Meine Kernfrage war die: wie kann ich den Browser daran hindern, von vornherein eine 'zu große' Bilddatei zu laden um dies ggfs. erst bei Nutzeranfrage zu machen? Er lädt nach meiner Erfahrung gerne mal eine zu große.

Die habe ich in meinem vorigen Posting beantwortet: Lightbox ist die Lösung.

 

[UliHF]

Warum das?

Für dieses kleine Blog ist mir eine statische Website viel lieber - WP o. Ä. wäre overkill IMO.

Mit Jekyll bin ich da nach etwas Praxis ganz zufrieden, einschl. der Möglichkeit von Automatisierungen für Wiederholungen im HTML-Bereich.

Wenigstens eines ist dann sicher:
Alles was drinsteht ist auch so gewollt (abgesehen von Irrtümern).

- superschnell - mehr geht nicht (edit: 17.08.)
- praktisch keine Angriffsfläche für Hacker
- individuelles Aussehen kommt praktisch 'von alleine'
- keine unbekannnten Links
- etc. etc.

Grüße
Uli

Edit 17.08.:
Ganz vergessen: Von Java Script hätte ich keinen Schimmer und noch eine Sprache möchte ich mir nicht antun...

 

[UliHF]

Einen schönen guten Abend!

Fast komm ich jezt mit der EInbindung von Bildern zurecht - die Betonung liegt dabei auf fast. Das Problem ist verm. wieder einmal meine Denke bzw. noch vorhandene Verwirrung.

Problemstellung:
Da die Angabe der tatsächlich gewünschten Bildgröße (auf CSS-Basis) in absoluten Maßen für den HTML-Autor nicht immer leicht zu berechnen ist, soll der Browser aus einem scrset das für die benötigte CSS-Größe und die jeweilge Bildschirmauflösung passende Bild laden / einbinden.

Er bräuchte so gesehen eigentlich nur die gewünschte CSS-Größe (Breite) und den srcset mit Breitenangaben.

Also, denke ich, dass in diesem Fall die Angabe von 'x' - Größen nicht weiter bringt:

srcset    ="
        \img-1.0300x0378.jpg 3x,
        \img-1.0120x0151.jpg 2x,
        \img-1.0085x0107.jpg 1x
"

So gesehen könnte srcset nur noch wie folgt Sinn machen:

srcset    ="
        \img-1.0300x0378.jpg 300w,
        \img-1.0120x0151.jpg 120w,
        \img-1.0085x0107.jpg 85w
"

Dem Browser werden die tatsächlichen CSS-Breiten der zur Verfügung gestellten Bilder mitgeteilt.

Jetzt möchte ich z. B. für die Darstellung im Layout eine relative CSS-Größe angeben, z.B. 65% der Breite des übergeordneten Elements (z. B. <div>).

Bei den Beispielen aus dem Netz sind jedoch Bildschirmgrößen verknüpft. Z. B.:

sizes="(max-width: 900px) 90vw, (max-width:1100px) 70vw, 60vw">

Und das verwirrt mich bis jetzt - die vom HTML-Autor gewünschte Darstellung ist nicht abhängig von der Monitor-DPR, sondern einzig von der <div> Breite in diesem Fall.

So wie ich das sehe, hätte der Browser mit z. B. 65% alle Angaben, um eine passende Bildgröße zu finden und zu laden.

Vielleicht habe ich lediglich etwas übersehen?

Viele Grüße
Uli

 

[UliHF]

Hallo Miteinander,
Die Logik der Regeln für scrcset & sizes habe ich noch nicht ausreichend verstanden - nur durch Reduzierung der vielen Möglichkeiten kommt erstmal eine verwendbare Template heraus (s. Problemstellung oben, den verwendeten Stand stelle ich dann rein).

Auch eine andere Sache konnte ich bisher leider nicht herausfinden:
Auf dieser Test-Subdomain kann man sehen, dass die Darstellungsbreite der dem body untergeordneten Elemente je nach Seite etwas unterschiedlich ist.
Z. B. 'Home' und 'Brotbackform in deiner Lieblingsgröße'.

Die Seite Brotbackform wird unerwünscht etwas breiter als der body dargestellt (Kleiner vertikaler Bereich rechts). Weshalb?

Würde mich freuen, Grüße
Uli
Info: Seite ist keine https, da nur zum testen

 

[UliHF]

Wenig Worte - bin am Verzweifeln...:
- habe viel gelöscht und das Hauptproblem jetzt eingegrenzt
- die Index-Seite ist in der Breite OK
- die Datenschutz Seite auch
- die neue Brotbackform NICHT (minimal zu breit)

Und jetzt das völlig Unerklärliche für mich:

Wenn aus der Seite '.. Brotbackform...' nur etwas Text gelöscht wird, wird diese Seite ebenso 'falsch' breiter dargestellt - zu breit um zu 100% in den Viewport eines Handys zu passen.

Die Hoffnung stirbt zuletzt...

Hier..

 

[Sempervivum]

Erst Mal zu diesem:

Auch eine andere Sache konnte ich bisher leider nicht herausfinden:
Auf dieser Test-Subdomain kann man sehen, dass die Darstellungsbreite der dem body untergeordneten Elemente je nach Seite etwas unterschiedlich ist.
Z. B. 'Home' und 'Brotbackform in deiner Lieblingsgröße'.

Da besteht das Problem, dass Du dem Bild in dem main-Container rechts eine feste Größe durch die Attribute width und height gegeben hast. Und weil Du in grid-template-columns die Breite auf auto gesetzt hast, bestimmt diese Breite die Größe des gesamten main-Containers. Feste Größen sind fast nie gut, wenn man ein Layout responsiv anlegen will. Besser die Rechnerei dem Browser überlassen:

.img-exposed-center {
    display: block;
    margin: auto;
    width: 100%;
    height: auto;
}

Durch "height:auto;" passt sich auch die Höhe entsprechend Seitenverhältnis an, so dass nichts verzerrt wird.

 

[UliHF]

Ja danke, die Anpassung der Klasse wie vorgeschlagen löst das Problem bei der Seite 'Brotbackform' ebenso wie das komplette Löschen der <figure>.

Was absolut nicht mit 'Normallogik' zu verstehen scheint ist dasselbe (s. o.) Phänomen auf der Seite Datenschutz (ohne Bilder).

Dort genügt etwas Löschen aus dem übrigebliebenen Rest-Text, um die Browser-Darstellung ungewollt signifikant zu vergrößern.
Dafür muss es noch eine weitere Ursache geben, so weit ich das erkennen kann.

 

[Sempervivum]

Da verstehe ich jetzt nicht, was Du meinst. Wenn ich den Text im ersten h2 und p verkürze:

  <h2> Bestimmungen</h2>
  <p>
    Wir behalten uns vor, ... diese Datenschutzerklärungungung anzupassen, damit sie stets den aktuellen rechtlichen Anforderungen entspricht.
  </p>

passiert in der Breite überhaupt nichts, nur die Höhe verringert sich.

 

[UliHF]

Genau, wenn nur der Text etwas verkürzt wird...
(es gibt da irgendeinen Umschaltpunkt beim Kürzen, den ich jedoch nicht genau herausgefunden habe)

Um das zu zeigen, hier ein vorher und hachher.jpg
- vorher:
Das Wort "Datenschutzerklärungungung" grün hervorgehoben
(links, ca. mittig das Wort, oben rechts im Browser die rechte vertikale Seitenlinie ziemlich direkt unter dem ersten der beiden Rechtspfeile positioniert)

- nachher:
Das hervorgehobene Wort gelöscht
(nun ist oben rechts die Seitenlinie etwas weiter rechts verlaufend als vorher zu erkennen)

Lässt sich das Phänomen auf deiner Seite nicht hervorrufen? Dies würde bereits weiterführen.

(Hab hier noch kein Bild hochgeladen - hoffe die sind technisch in Ordnung)

 

[Sempervivum]

Stimmt, wenn ich mich an dem Doppelpfeil orientiere, erkenne ich, dass der Inhalt ein wenig breiter wird.
Selber hatte ich das im Opera getestet. Ich habe noch Mal ganz genau hin geschaut und kann einen solchen Effekt nicht entdecken.
Auf Verdacht noch ein Hinweis: Du benutzt für die dritte Spalte "auto":

grid-template-columns: 6.65rem 6.65rem auto 3.5rem;

Ersetze das mal durch "1fr" damit sich der Inhalt flexibel an passt.

 

[UliHF]

... Auf Verdacht noch ein Hinweis: Du benutzt für die dritte Spalte "auto":
...
Ersetze das mal durch "1fr" damit sich der Inhalt flexibel an passt.

Bestätigung:
Auf Opera gibt es den Überlauf einfacnen Textes auch auf meinerm Rechner nicht.

Zur Info:
Der Verdacht war zutreffend - 1fr löst das probllem dort jedoch leider nicht.

Hab derzeit leider keine Option, diesen Dingen genauer auf den Zahn zu fühlen, vielen Dank erst mal!

 

[UliHF]

Hallo zusammen,
stecke wieder einmal so richtig fest und hoffe auf eure Hilfe...

Bei figure und img kommme ich mit der Größenfestlegung absolut nicht klar.

Aktueller Code:

<figure
  style="
    display: block; <!-- Element soll eine eigene Zeile im Elternelement einnehmen -->
    margin: auto;  <!-- Element soll horizontal zentriert sein im elternelement -->
    width: fit-content; <!-- das Bild soll die Fiigure ausfüllen, weder überstand noch kleiner -->
  "
>
  <img
    width="350" <!-- beide Werte zusammen ergeben das Seitenverhältnis -->
    height="350" <!-- weiter ergibt sich eine Vorgabe der CSS-Größe für die Darstellung. Hier gibt's sicherlich responsive Probleme. die Einheiten werden auf relativ geändert, sobald das zuvverlässig funktioniert  -->
    ...
    ...
  >
  ...
  ...
  <figcaption style="text-wrap: wrap;" >
        Etwas Text, genügend, um ein wrap auszulösen. Die Textlänge (das erforderliche wrappen) hier könnte eine Rolle spielen bei dem geschilderrten Problem.
  <figcaption>
</figure>

Um Breite und Höhe der Elemente figure (ohne Höhe des caption-Textes) und img jeweils identisch zu machen und um zu erreichen, dass der Browser Breite und Höhe kennt, um den dafür benötigten Platz im Display bereits beim Bildaufbau reservieren zu können, habe ich dies wie oben versucht.

Das figure hält sich jedoch partout nicht an width: fit-content, sondern zeigt sich sowohl in einer größeren Breite als das img und ist auch nicht zentriert im Elternelement... (soeben auch noch mit text-wrap versucht - dasselbe negative Ergebnis)

Grüße
Uli

 

[Sempervivum]

Das ist eine Standardsituation aber ich habe mal wieder Probleme zu verstehen, worauf Du hinaus willst und was Du erreichen willst.

Um Breite und Höhe der Elemente figure (ohne Höhe des caption-Textes) und img jeweils identisch zu machen und um zu erreichen, dass der Browser Breite und Höhe kennt, um den dafür benötigten Platz im Display bereits beim Bildaufbau reservieren zu können, habe ich dies wie oben versucht.

Dies: width="350" height="350"machst Du wahrscheinlich um dies zu erreichen: "um den dafür benötigten Platz im Display bereits beim Bildaufbau reservieren zu können". Das Problem dabei ist, dass bei einem responsiver Layout ein Bild kaum je eine feste Größe hat sondern diese muss dynamisch durch den Browser fest gelegt werden.
Die Attribute width und height war vor Jahrzehnten mal nützlich als man über Modem ins Internet gegangen ist aber heute nicht mehr.

 

[UliHF]

Danke dir sehr für's reinschauen!
Ja, meine Denke uund Sprache passt noch nicht sehr mit den Regeln von HTML und CSS zusammen...
Ja, das ist sicherlich eine Standardsituation, die ich dennoch bis jetzt nicht wie gewünscht stabil ans Laufen bekomme.

Dies ist die Vorstellung bzw. das Gewünschte:
- die tatsächliche Darstellungsgröße eines Bildes darf der Borwser gerne selbst bestimmen, eine relative Größe möchte ich jedoch bezogen auf das Elternelement (in diesem Fall das grid) auf jeden Fall festlegen
- er benötigt auch das Seitenverhältnis, um beim Seitenaufbau bereits den benötigten Platz reservieren zu können, falls der Download lazy ist und etwas länger dauert
- dann fehlt eigentlich nur noch die stabile horizontale Positionierung der figure im Elternelement - in diesem Fall für figure = display: block
- das element figcaption soll genau die Breite der figure erhalten und genau darunter positioniert sein

Unter obigen Bedingungen sehe ich nur zwei Möglichkeiten der Festlegung des benötigten Seitenverhältnisses (Breite und Höhe):
entweder in <figure> oder in <img>

Wäre eine riesen Hilfe, wenn ich da weiterkommen würde und soweit erforderlich übergeordnete Deklarationen machen könnte.

Benötige leider noch sehr viele Worte...

Grüße
Uli

 

[UliHF]

Habe jetzt kommentare im obigen Code-Beispiel eingefügt - das erscheint mir verständlich, ist es nicht? Wie die Engländer so schön sagen

 

[Sempervivum]

um den dafür benötigten Platz im Display bereits beim Bildaufbau reservieren zu können, habe ich dies wie oben versucht.

Ich rate dringend davon ab, diesen Weg bzw. diese Denkweise weiter zu verfolgen. Warum? Bei solch einem einfachen Beispiel ist es noch machbar aber wenn ein Layout nur ein wenig komplexer wird, würde der Aufwand über alle Grenzen wachsen. Du müsstest das, was der Browser automatisch berechnet, mit PHP und Javascript machen und ausprogrammieren. Mit PHP weil mindestens das Seitenverhältnis der Bilder bekannt sein muss und die Bilder sind zunächst nur auf dem Server verfügbar. Und alles manuell auszurechnen wäre erst recht zu kompliziert.
Es gibt so viel zu lernen und so viele Gesichtspunkte beim Layout mit CSS dass es wenig produktiv ist, Energie und Zeit in diese Überlegungen zu stecken.