Unterschiedliche Bilder für unterschiedliche Screengrößen

[Kerstin1]

Hallo,
könnt Ihr mir, einer Anfängerin in der Webentwicklung, anhand eines einfachen Beispiels erläutern, wie ich je nach Screengröße

<img src="/bilder/Kgross.PNG" alt="Kerstin"/>
bzw.
<img src="/bilder/Kklein.PNG" alt="Kerstin"/> anzeigen kann?
Mit lieben Grüßen
Kerstin

[Gunnar Bittersmann]

@@Kerstin1

könnt Ihr mir, einer Anfängerin in der Webentwicklung, anhand eines einfachen Beispiels erläutern, wie ich je nach Screengröße

<img src="/bilder/Kgross.PNG" alt="Kerstin"/>
bzw.
<img src="/bilder/Kklein.PNG" alt="Kerstin"/> anzeigen kann?

Das hängt davon ab, worin sich die beiden Bilder unterscheiden.

Wenn sich die Bilder lediglich in ihrer Auflösung unterscheiden, ansonsten aber gleichen Bildinhalt und gleiches Seitenverhältnis haben: Resolution Switching mit srcset

<img srcset="…" src="…" alt="Kerstin"/> 

Wenn das kleine Bild aber bspw. ein Ausschnitt des großen ist und ein anderes Seitenverhältnis hat: Art_Direction

<picture>
  <source media="(min-width: …)" srcset="/bilder/Kgross.PNG"/>
  <source srcset="/bilder/Kklein.PNG"/>
  <img src="…" alt="Kerstin"/>
</picture>

LLAP 🖖

[Kerstin1]

Hintergrund:
Am PC lief der Aufbau der Seite mit dem (großen) Bild zügig, auf meinem Smartphone aber sehr langsam.
Deshalb habe ich das große Bild verkleinert und bin daher von MB- auf KB-Größe gekommen.
Das Seitenverhältnis ist gleich geblieben.

[Gunnar Bittersmann]

@@Kerstin1

Deshalb habe ich das große Bild verkleinert und bin daher von MB- auf KB-Größe gekommen.

Auch für große Bildschirme sollte ein Bild nicht im Megabyte-Bereich sein, sondern maximal im unteren dreistelligen Kilobyte-Bereich. Mit Bildbearbeitung und geeigneter Kompression (Qualität) lässt sich das hinbekommen.

Das Seitenverhältnis ist gleich geblieben.

Dann bist du mit der einfachen Variante mit srcset bestens bedient.

LLAP 🖖

[Kerstin1]

Hi, vielen Dank für die guten Tipps,
jetzt habe ich in wiki.selfhtml.org weiter geforscht und etwas gefunden, was mich stutzig macht.
Dort steht u.a.
<source media="(min-width: 80em) .......
Wie aber kann ich z.B. die Breite des Viewports meines Smarthones umrechnen in "em", wenn em doch abhängig ist vom verwendeten font?

[Matthias Apsel]

Hallo Kerstin1,

Wie aber kann ich z.B. die Breite des Viewports meines Smarthones umrechnen in "em", wenn em doch abhängig ist vom verwendeten font?

Gar nicht. Der Sinn ist folgender: Wenn zum Beispiel eine Überschrift nicht mehr einzeilig sein würde (vielleicht weil sie breiter wird als 30em) kann ein Bild nicht mehr davor stehen, sondern es soll dann zentriert oberhalb der Überschrift platziert werden.

Du legst also anhand der Inhalte die Gestaltung fest und nicht anhand irgendwelcher Handybildschirmbreiten.

Bis demnächst
Matthias

[Linuchs]

Deshalb habe ich das große Bild verkleinert und bin daher von MB- auf KB-Größe gekommen.

Eine weitere Verkleinerung der Bilddateigröße bekommst du durch [Bild] - [Modus] - [Indiziert], so heisst es bei Gimp.

Ich reduziere menschliche Gruppenfotos auf 255 Farben (statt ??? von der Kamera) und die Dateigröße locker auf 20%.

Linuchs

[Gunnar Bittersmann]

@@Linuchs

Ich reduziere menschliche Gruppenfotos auf 255 Farben

Das ist nicht das, was man bei Fotos machen sollte.

LLAP 🖖

[Auge]

Hallo

Eine weitere Verkleinerung der Bilddateigröße bekommst du durch [Bild] - [Modus] - [Indiziert], so heisst es bei Gimp.

Das ist aber nicht für jedes Bild geeignet.

Ich reduziere menschliche Gruppenfotos auf 255 Farben (statt ??? von der Kamera) und die Dateigröße locker auf 20%.

Fotos werden typischerweise mit 24 Bit Farbtiefe (entspricht 16.7 Mio. Farben) gespeichert. Wenn du die Farbtiefe auf 8 Bit (256 Farben) reduzierst, gehen auf Fotos üblicherweise viele Details verloren. Mit geeigneter Kompression bei voller Farbtiefe (24 Bit) kommt man auch auf recht annehmbare Dateigrößen.

Die Reduzierung der Farbtiefe käme für mich nur bei Bildern mit vielen (annähernd) gleichfarbigen Flächen infrage (beispielsweise für Logos) aber da kann man oft auch gleich auf SVG umsteigen. Für Fotos ist das aber keine Option (Ausnahmen mögen die Regel bestätigen).

Tschö, Auge

[encoder]

Bedenke dass ein Browser nicht nur im Vollbildmodus laufen kann. Daher ist die tatsächliche Größe des Browserfensters für diese Unterscheidung ein besserer Kandidat als die dann unbedeutende Größe des Bildschirms.

[Matthias Scharwies]

Servus!

Bedenke dass ein Browser nicht nur im Vollbildmodus laufen kann. Daher ist die tatsächliche Größe des Browserfensters für diese Unterscheidung ein besserer Kandidat als die dann unbedeutende Größe des Bildschirms.

Ich Lehn mich jetzt mal aus dem (Browser)Fenster und behaupte, dass sich die Browser danach richten.

Herzliche Grüße

Matthias Scharwies

[Gunnar Bittersmann]

@@Matthias Scharwies

Bedenke dass ein Browser nicht nur im Vollbildmodus laufen kann. Daher ist die tatsächliche Größe des Browserfensters für diese Unterscheidung ein besserer Kandidat als die dann unbedeutende Größe des Bildschirms.

Ich Lehn mich jetzt mal aus dem (Browser)Fenster und behaupte, dass sich die Browser danach richten.

Bei media queries schon. Wenn du aber mit JavaScript rumfuhrwerkst, hast du durchaus die Chance, das Falsche abzufragen.

LLAP 🖖