Nico R.: Bilder für Retina-Displays

Hallo zusammen,

hier im Wiki wird ja recht hübsch erklärt, wie sich das mit den verschiedenen Displaygrößen und der dpi (bzw. der dpr) verhält. Was mir in dem Beitrag noch fehlt, ist ein Hinweis dazu, in welcher Dichte man Bilder nun am besten anbieten sollte. Als 2@, 3@ oder für die Zukunft gleich als 4@?

Aktuell verdoppele ich einfach immer die Pixel. Auf meinem Uralt-Smartphone mit normalem "geviertelten" Retina-Display (das ich eigentlich nach wie vor für den Gipfel der Schöpfung halte) sieht das dann super aus. Unlängst musste ich erfahren, dass aktuelle Smartphones inzwischen "neunteln" und irgendwann wahrscheinlich "sechzehnteln"...

Jetzt ist die Frage, stelle ich ein 50x50-Bild jetzt als 100x100 bereit oder besser als 150x150? Ein 100x100-Bild würde sich auf einem 2@Retina perfekt einpassen, auf einem 3@Retina wird es vom Gerät hochskaliert (von 4 auf 9 "Kästchen" -> siehe Link oben). Wenn ichs als 150x150 bereit stelle, muss es umgekehrt für ein 2@Retina "krumm" (von 9 auf 4 Kästchen) herunterskaliert werden. Bedeutet das dann einen Qualitätsverlust? Ist es besser, per Mediaquerie zwei Bildversionen anzubieten? Den Aspekt größerer Dateigrößen lasse ich jetzt mal außen vor.

Entschuldigt bitte, wenn das etwas verwirrend formuliert war. Ich hoffe, ihr wisst, worums mir geht. Ich hab dazu leider nichts konkretes gefunden. Vielleicht habt ihr ja auch einen Tipp zum Nachlesen.

Schöne Grüße

Nico

  1. @@Nico R.

    Jetzt ist die Frage, stelle ich ein 50x50-Bild jetzt als 100x100 bereit oder besser als 150x150?

    Nimm dir ein Nicht-Uralt-Smartphone und probier es aus. Den Unterschied zwischen 50×50[1] und 100×100 wirst du sehen. Bei Icons, Logos, Textgrafiken u.ä. auf jeden Fall; bei Fotos vermutlich auch. Aber siehst du einen gravierenden Unterschied zwischen 100×100 und 150×150? Wenn ja, kannst du dir über 150×150 Gedanken machen. Wenn nein, bist du mit 100×100 bestens bedient.

    Aber für Icons, Logos, Textgrafiken u.ä. sind i.d.R. Vektorgrafiken (SVG) die bessere Wahl.

    Kwakoni Yiquan

    --
    Ad astra per aspera

    1. Die Forumsoftware bietet bei der Eingabe von * das richtige Mal-Zeichen zur Auswahl an: ↩︎

    1. @@Gunnar Bittersmann

      Den Unterschied zwischen 50×50 und 100×100 wirst du sehen.

      Und das ist nicht an den Haaren herbeigezogen.

      Kwakoni Yiquan

      --
      Ad astra per aspera