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

UliHF · 28.07.2023

Hallo Foristi,
mit der Suche komme ich noch nicht so klar - es könnte also sein, das es bereits Antwort(en) auf die Frage gibt. Bitte ggfs. um Nachsehen...
Unabängig also von der Möglichkeit von loading="lazy" muss der Browser die Größen von Bildern an den dafür zur Verfügung stehenden Platz anpassen (also umrechnen), falls diese nicht bereits pixelgenau passen, bzw. auf dem Server vorliegen. So meine Vorstellung der Materie..
Gleich, ob die Abweichung des vorliegenden Orignals nur wenige Pixel beträgt oder große Unterschiede vorliegen muss der Browser jedes Pixel neu rechnen.

Der Kern der Frage ist:
Ab welcher Abweichung beginnnt der Browser zu rechnen? Bereits ab einem Pixel?

Der Anwendungsfall dazu ist folgender:

Wenn der Browser z. B. hier auf der Startseite 'landet', muss er auf jeden Fall sofort einige kleine Bilder für die Nav-Buttons laden.

Die Anzeigegröße dieser Bilder im Browser soll im CSS fixiert sein (zumindest ist das derzeit so).

1) Müssen nun diese Bilder pixelgenau (nur eine Seite) auf dem Server vorliegen, um ein Umrechnen zu vermeiden?
2) Müssen für 2k- und 4k-Bildschirme grössere Bilder vorgehalten werden?

Eine Klärung wäre toll - sehe den Wald vor lauter Bäumen manchmal nicht so richtig...

Grüße
Uli

Sempervivum · 28.07.2023

Guten Abend, Namenskollege!

Die Anzeigegröße dieser Bilder im Browser soll im CSS fixiert sein (zumindest ist das derzeit so).

1) Müssen nun diese Bilder pixelgenau (nur eine Seite) auf dem Server vorliegen, um ein Umrechnen zu vermeiden?

Dass Bilder eine feste Größe haben kann vorkommen, ist aber meistens nicht der Fall, denn in Zeiten von responsivem Layout müssen sie sich meistens an das Browserfenster anpassen. D. h. der Browser muss sie umrechnen. Wenn sie eine feste Größe haben ist es natürlich optimal, wenn sie in dieser Größe auch auf dem Server vorliegen. Meistens hat man aber genug damit zu tun, ein responsives Layout hin zu bekommen und solche Gesichtspunkte sind dann weniger entscheidend.

2) Müssen für 2k- und 4k-Bildschirme grössere Bilder vorgehalten werden?

Wenn eine optimale Darstellung gewünscht ist, schon, und HTML und CSS bieten auch die Möglichkeiten dafür. In der entgegengesetzten Richtung muss man aber auch kleine Bildschirme auf Mobilgeräten im Auge haben. Da kann es aus Gründen der Ladezeit angebracht sein, kleinere Bilder zu verwenden.

Beste Grüße, Ulli

UliHF · 29.07.2023

Sempervivum schrieb:
Guten Abend, Namenskollege! ... Wenn sie eine feste Größe haben ist es natürlich optimal, wenn sie in dieser Größe auch auf dem Server vorliegen. Meistens hat man aber genug damit zu tun, ein responsives Layout hin zu bekommen und solche Gesichtspunkte sind dann weniger entscheidend. ... muss man aber auch kleine Bildschirme auf Mobilgeräten im Auge haben. Da kann es aus Gründen der Ladezeit angebracht sein, kleinere Bilder zu verwenden. ...

Hallo Namenskollege

,
ich denke einigermassen ist das verstanden - dieser Ansatz könnte sich jedoch in der Praxis als fast wertlos herausstellen.
Was sicher gut ist, ist das Angebot einer möglichst passenden Bildgröße, um viel Rechnerei (groß auf klein) zu vermeiden.
Wenn ich jetzt (unbestätigtermassen) davon ausgehe, dass unterschiedlich große Displays für denselben, in rem deklarierten Größeneindruck auf den Nutzer auch unterschiedlich große Bilder benötigen, um ein Umrechnen zu erübrigen, dann kann ich eigentlich eine genaue Passung nur noch auf die statistisch häufigste Displaygröße ausrichten.
Bei den wenigen betroffenen Bildern wäre dies kein Problem.

Was die Arbeit an einem netten responsiven Layout betrifft bin ich erleichtert, dass dies nicht nur mir (als Halblaie) so geht und sehe dies mit den Bildern genauso ...

Ein schönes Wochenende, Uli

Sempervivum · 29.07.2023

Wenn sie eine feste Größe haben

Damit habe ich an solch eine Situation gedacht wie in deiner Nav auf der linken Seite: Hier scheint die Breite fest zu sein und es wäre möglich, ein Bild zu verwenden, das genau angepasst ist. Sobald ein Bild angepasst werden muss, ist das natürlich nicht mehr möglich.
Ich wünsche ebenfalls ein angenehmes Wochenende!

UliHF · 06.08.2023

HTML und CSS sind - wie viele andere Zusammenhänge auch - ein komplexes, weites Feld. Vermutlich könnte man damit auch Jahre zubringen. Wenn eine Sache in Ordnung scheint, gerät eine andere außer Kontrolle..

Nach vielem Lesen und immer noch nicht viel schlauer geworden weiss mir nicht anders zu helfen, als hier an diesen Thread weiter anzuhängen.

Was gewünscht ist:
- ein Bild automatisch einbinden / skalieren in einen übergeordneten Container OHNE dessen als fest zu betrachtende Grenzen / Abmessungen zu überschreiten
(falls etwas nicht reinpasst, ist der Coder wieder an der Reihe)

aus diesem Grunde mit:
- overflow hidden (als 'Notbremse' für's Layout gedacht)
- tatsächliche img-Abmessungen und Seitenverhältnis kann geliefert werden, falls dies hier etwas bringt

Nachdem die Navigations-Buttons nun furchtbar aussehen (hier) und
- der W3-Validator meint nun: OK
- der inspektor sagt bei vielen Elementen: "das Element versucht einen overflow" (kann ich sinngemäß nachvollziehen)
- der hinter dem Rechner sitzt sagt: so ein Mi.., wie das aussieht, jetzt, nachdem andere Agenten zufriedener sind

Hoffe, das Thema ausreichend beschrieben zu haben und kann nur auf das Prinzip Hoffnung schalten

Bearbeitung (07.08.23):
Ich möchte das Problem gerne von der anderen Seite her angehen:
Auf einer isolierten Basis, gefunden bei tutorialrepublic, soll das Beispiel einschließlich aller tatsächlich gewünschten Aspekte erzeugt werden.

Der Code sieht so aus und funktioniert wie gewünscht (img src... wäre auf einem anderen Rechner zu ersetzen):

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Resize Image Proportionally with CSS</title>
<style>
img{
max-width: 100%;
max-height: 100%;
display: block; /* remove extra space below image */
}
.box{
width: 250px;
border: 5px solid black;
}
.box.large{
height: 300px;
}
.box.small{
height: 100px;
}
</style>
</head>
<body>
<h2>Image inside Auto-height Div</h2>
<div class="box">
<img src="bbf-PII.531.001.0600x0755.jpg" alt="Cloudy Sky">
</div>
<br>
<h2>Image inside Portrait Div</h2>
<div class="box large">
<img src="bbf-PII.531.001.0600x0755.jpg" alt="Cloudy Sky">
</div>
<br>
<h2>Image inside Landscape Div</h2>
<div class="box small">
<img src="bbf-PII.531.001.0600x0755.jpg" alt="Cloudy Sky">
</div>
<p><strong>Note:</strong> The original size of the image is 500x300 pixels, but using the "max-width" and "max-height" property we are still able to show the complete image inside the DIVs having different width.</p>
</body>
</html>

Nachdem auf diese Art alles wie gewünscht funktioniert, soll es in den aktuellen Bestand eingebaut werden.
In diesem durchkreuzen voraussichtlich nur die für mich noch sehr undurchsichtigen Vererbungsregeln den Plan...

Sobald dies fertig ist, kann leichter danach geschaut werden.

Danke für die erforderliche Geduld
Uli

Sempervivum · 07.08.2023

Guten Morgen Uli!

Was gewünscht ist:
- ein Bild automatisch einbinden / skalieren in einen übergeordneten Container OHNE dessen als fest zu betrachtende Grenzen / Abmessungen zu überschreiten
(falls etwas nicht reinpasst, ist der Coder wieder an der Reihe)

Heute gibt es in CSS object-fit, damit kannst Du genau das erreichen, was Du beschreibst:
https://www.html-seminar.de/css-object-fit-object-position.htm
Meist ist es aber gar nicht nötig, das Bild horizontal und vertikal einzupassen sondern nur horizontal. Dann braucht es object-fit nicht und man muss die Nachteile, es wird entweder ab geschnitten oder es entsteht leerer Raum, nicht in Kauf nehmen:
https://jsfiddle.net/Sempervivum/mvw2rhna/1/

UliHF · 07.08.2023

Bitte verzeih - dein Beitrag hatte sich mit meinem überschnitten / nicht rechtzeitig bemerkt.
Werde das nun auf die in die in der Änderung beschriebene Art in Ruhe versuchen.

(Auf object-fit war ich bereits gestossen ohne e versucht zu haben, denke jedoch, dass dies eine sehr 'neue' Erweiterung von CSS / HTML ist, bei Weitem nicht auf allen Browsen implementiert.)

Danke, bis bald!

Sempervivum · 07.08.2023

denke jedoch, dass dies eine sehr 'neue' Erweiterung von CSS / HTML ist, bei Weitem nicht auf allen Browsen implementiert.

Relativ neu trifft zu aber keine Sorge, was die Browserunterstützung betrifft, alles im grünen Bereich:
https://caniuse.com/object-fit

Sempervivum · 07.08.2023

Ja, das hatte sich überkreuzt.

Nachdem auf diese Art alles wie gewünscht funktioniert, soll es in den aktuellen Bestand eingebaut werden.

Bei dem Bestand fällt mir auf, dass der genutzte Bereich sehr schmal ist, jedenfalls auf meinem FullHD-Monitor. Besser den ganzen Bereich ausfüllen lassen aber mit "max-width" für einen sehr großen Monitor die Breite begrenzen.

UliHF · 10.08.2023

Danke für die zwei wertvollen Hinweise! Zur Größe auf höher auflösenden Bildschirmen: Mir ist es selbst auf meinem 1920 xx Monitor etwas zu schmal. Anpassung(en) stehen auf der ToDo-Liste

Zum Thema Einbindung von Abbildungen gehe ich nochmals zurück auf Los, um dies per Liquid (als Preprocessor) weitgehend zu automatisieren. So können auch Flüchtigkeitsfehler oder Gedächtnislücken besser kompensiert werden...

Die Programmlogik für die Einbindung soll die wesentlichen Fallunterscheidungen machen und auf Basis der Fälle dann alles weiter Benötigte errechnen.

Bisher habe ich diese unterschiedlichen HTML/CSS-Fälle auf dem Plan:
1. inline (ohne wrapper)
2. width-Basis
3. height-Basis
4. object-fit-Basis
5. ...else... (Fehlerfall)

Wären diese Haupt-Unterscheidungsfälle bzw. -gruppen sinnvoll, um nachfolgend darauf basierende effektive und vor allem valide Deklarationen zu machen?

Sempervivum · 10.08.2023

Guten Morgen Uli,
das mit der Programmlogik und den Fallunterscheidungen verstehe ich nicht ganz: Ich kenne es mehr so, dass ich oder jemand anders eine Vorstellung hat, wie man Bild und Text anordnen und darstellen will und dann versuche ich, geeignetes HTML und CSS zu finden, um es zu erreichen.

UliHF · 10.08.2023

Sempervivum schrieb:
Guten Morgen Uli,
das mit der Programmlogik und den Fallunterscheidungen verstehe ich nicht ganz: ...

Vielleicht habe ich mich wieder mal nicht sehr verständlich ausgedrückt...

Es geht primär um die (mir sehr neuen) Regeln von HTML/CSS, nicht um deren Umsetzung in einer Programmlogik.

Mein Hauptproblem mit HtML/CSS ist die 'Schlamperei' bzw. Fehler, die du dir leisten kannst, ohne dass der Browser abstürzt...

Der Browser fällt einfach auf defaults zurück und du hast das Problem immer noch bzw. noch viel mehr als zuvor. Ich kann z. B. ein object-fit delarieren und den Browser interessiert das einfach nicht, weil es z. B. keinen Eltern-Container gibt, auf den diese Deklaration anwendbar wäre.

Deshalb die Liste der unterschiedlich zu behandelnden Fälle bei HTML/CSS im Forum hier. Programmiertechnisches gehört nicht hierher, das ist verstanden und respektiert.

Unter diesen Voraussetzungen gesehen:
Meinst du, dass die genannte Fall-Liste Sinn macht um dann dazu passende, valide Deklarationen zu schreiben oder gäbe es Fälle hinzuzufügen bzw. zu streichen / zu ändern?

Hoffe, dies etwas verständlicher dargestellt zu haben...

Viele Grüße
Uli
P.S.:
Das könnte evtl. auch anderen bei der Strukturierung der Deklarationen helfen.

Sempervivum · 10.08.2023

Irgend wie verstehe ich es immer noch nicht richtig. Möchtest Du dir einen Überblick verschaffen über die verschiedenen Varianten wie man ein Bild einbinden und die Größe fest legen kann?

Mein Hauptproblem mit HtML/CSS ist die 'Schlamperei' bzw. Fehler, die du dir leisten kannst, ohne dass der Browser abstürzt...

Das trifft zu, die Browser sind sehr fehlertolerant und versuchen, aus jedem Unsinn noch etwas halbwegs brauchbares zu machen. So weit es Syntaxfehler betrifft, verlasse ich mich da auf meinen Editor VS-Code, der zeigt sie mir zuverlässig an. Ich versuche jedoch nicht, im CSS Fallbacks oder ähnliches zu implementieren, wie man es beim Programmieren tut. Statt dessen den Seiteninspektor benutzen, um das Layout zu erreichen, das ich mir wünsche.

UliHF · 10.08.2023

Sempervivum schrieb:
Irgend wie verstehe ich es immer noch nicht richtig. Möchtest Du dir einen Überblick verschaffen über die verschiedenen Varianten wie man ein Bild einbinden und die Größe fest legen kann? ...

Genau so treffend kann man das sagen - oh mei.

(Zur Info: Solcherart fallbacks gibt es auf meiner Seite nur im vorhersehbaren programm-logischen Fehlerfall, und auch das nicht immer - zu viel Arbeit..)

Und diese Varianten (diese entspächen der obigen Liste falls ich das meinerseits ein Stück weit verstanden habe) können dann dazu benutzt werden, um hoffentlich valide Deklarationen zu machen.

UliHF · 10.08.2023

Zusatz zum Obigen:
Verstehe das jetzt selbst etwas besser - die Denk- und Lösungsansätze in diesem Fall sind komplett verschieden, zwei verschiedene Welten.

Mache das erst mal so fertig und komme zurück wegen der Anwendung von srcset. Es gibt da noch 'Merkwürdigkeiten'. Danach ist das voraussichtlich fast vollständig (unter Beibehaltung des Seitenverhältnisses als Voraussetzung).

Bis dann,
Uli

Sempervivum · 10.08.2023

die Denk- und Lösungsansätze in diesem Fall sind komplett verschieden, zwei verschiedene Welten.

Den Eindruck habe ich allerdings auch, ich muss gut überlegen, um zu verstehen, worauf Du hinaus willst. Und über das meiste, was dich beschäftigt, habe ich mir kaum je Gedanken gemacht.

UliHF · 11.08.2023

Sempervivum schrieb:
Den Eindruck habe ich allerdings auch, ich muss gut überlegen, um zu verstehen, worauf Du hinaus willst. Und über das meiste, was dich beschäftigt, habe ich mir kaum je Gedanken gemacht.

Um Verwirrungen - auch für mich - zu vermeiden lasse ich den Aspekt 'Liquid' nun komplett weg.
Noch zum Verständnis an dieser Stelle ein Link auf Jekyll.
Damit (und einem Editor) versuche ich den Blog zu erstellen. In Jekyll spielt Liquid als prozedurale Sprache - je nach Wunsch - eine Rolle.

Zur Sache:
Beim Aufhübschen und vervollständigen des Themas 'Bild einbinden' bin ich auf eine scheinbare(?) Ungereimtheit betr. Verwendung von srces & sizes gestoßen..
1) MDN sagt nichts von einer zwingend geinsamen Verwendung von srces und sizes
2) Der Kulturbanause in Berlin dagegen schon

Sehe ich diese Ungereimtheit verkehrt?

Grüße Uli

Sempervivum · 11.08.2023

Das ist jetzt eine sehr spezielle Frage und ich kann sie aus dem Stand nicht beantworten weil ich mich damit bisher kaum beschäftigt habe. An diesem Wochenende stehen erst Mal einige nicht-technische Aktivitäten an, vielleicht kann ich mir das nächste Woche mal ansehen. Oder jemand anders nimmt sich der Sache an.

UliHF · 11.08.2023

Sempervivum schrieb:
Das ist jetzt eine sehr spezielle Frage ...

Danke für die Info!

Diese Dinge im Zusammenhang mit der EInbindung von Bildern scheinen auf meiner Seite so langsam zusammenzukommen. Die Hoffnung dabei ist, das Thema wenigstens für klar umrissene Zwecke einigermaßen 'in den Griff' zu bekommen, um es dann teilweise automatisieren zu können. Nur so kann ich das dann wieder fast ganz wieder vergessen und muss nicht jedesmal wieder ein paar Schritte zurück...

Ein schönes Wochenende!
Uli

UliHF · 14.08.2023

Hallo Foristi,
nach einigem Lesen kam ich mir vor als ob ich in ein Wespennest gestochen hätte - sehr komplex, das Einbinden von Bildern

Bin nicht sicher, ob ich ein bestimmtes Detail zur Darstellung / Auflösung eines Bildes richtig verstanden habe.

1. Variante
Gegeben ein Bild mit einer physikalischen Auflösung von 1 Mio px (oder Bildpunkte) auf einer Fläche von 10cm² (die Werte hier nur fürs Beispiel).
Dargestellt ohne weitere Skalierung oder Zoom auf einem herkömmlichen 1k Bildschirm ergibt sich ein Bild 10cm breit und 10cm hoch.

1.b
Falls dies so zutrifft, wird dasselbe Bild nun unverändert auf einem 2k Bildschirm dargestellt:
Das Bild wäre dann lediglich noch 5cm breit und 5cm hoch.

2. Variante
Falls dies wiederum zutrifft, wird dieses Bild jetzt mit einem Faktor von 2 skaliert und erneut auf dem 2k Bildschirm dargestellt.
Nun müsste das Bild wieder die Breite und Höhe von 10cm haben.

Nun die eigentiche Unsicherheit:
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".

Viele Worte um wenig Inhalt - bitte verzeiht.
Viele Grüße
Uli