Kerstin1: Unterschiedliche Bilder für unterschiedliche Screengrößen

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

  1. @@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 🖖

    --
    „Man kann sich halt nicht sicher sein“, sagt der Mann auf der Straße, „dass in einer Gruppe Flüchtlinge nicht auch Arschlöcher sind.“
    „Stimmt wohl“, sagt das Känguru, „aber immerhin kann man sich sicher sein, dass in einer Gruppe Rassisten nur Arschlöcher sind.“

    —Marc-Uwe Kling
    1. 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.

      1. @@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 🖖

        --
        „Man kann sich halt nicht sicher sein“, sagt der Mann auf der Straße, „dass in einer Gruppe Flüchtlinge nicht auch Arschlöcher sind.“
        „Stimmt wohl“, sagt das Känguru, „aber immerhin kann man sich sicher sein, dass in einer Gruppe Rassisten nur Arschlöcher sind.“

        —Marc-Uwe Kling
        1. 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?

          1. 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

            --
            Pantoffeltierchen haben keine Hobbys.
            ¯\_(ツ)_/¯
      2. 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

        1. @@Linuchs

          Ich reduziere menschliche Gruppenfotos auf 255 Farben

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

          LLAP 🖖

          --
          „Man kann sich halt nicht sicher sein“, sagt der Mann auf der Straße, „dass in einer Gruppe Flüchtlinge nicht auch Arschlöcher sind.“
          „Stimmt wohl“, sagt das Känguru, „aber immerhin kann man sich sicher sein, dass in einer Gruppe Rassisten nur Arschlöcher sind.“

          —Marc-Uwe Kling
        2. 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

          --
          Ein echtes Alchimistenlabor musste voll mit Glasgefäßen sein, die so aussahen, als wären sie beim öffentlichen Schluckaufwettbewerb der Glasbläsergilde entstanden.
          Hohle Köpfe von Terry Pratchett
  2. 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.

    1. 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

      --
      25 Jahre SELFHTML → SELF-Treffen 05.-07. Juni 2020 in Mannheim
      1. @@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 🖖

        --
        „Man kann sich halt nicht sicher sein“, sagt der Mann auf der Straße, „dass in einer Gruppe Flüchtlinge nicht auch Arschlöcher sind.“
        „Stimmt wohl“, sagt das Känguru, „aber immerhin kann man sich sicher sein, dass in einer Gruppe Rassisten nur Arschlöcher sind.“

        —Marc-Uwe Kling