Frage von go4java, 4

Website-Bilder auch auf Retinas anbieten?

Wenn man auch Punktdichten von bis zu 400ppi unterstützen möchte, was ist das ideale Eingangsformat für Fotografien bzw. Stock-Bilder? Die Regel, Bilder einfach in doppelter Breite und Höhe zu speichern, scheint mir zu einfach gedacht. Diese Regel stammt doch noch aus einer Zeit, wo PC-Monitore 100ppi und Mobile Devices 200ppi hatten. Was ist die beste Vorgehensweise, auch im Hinblick auf Dateiablage, Dateiformat etc.?

Antwort
von FaronWeissAlles, 4

Wenn du ein großes Bild im Web platzierst (z.B. in einer Webseite) wird gar nichts herunterskaliert - weder vom Server noch vom Browser. Nur du bist der der das Bild skaliert (in deinem Bildbearbeitungsprogramm). Lediglich die Darstellung des Bildes kann skaliert geschehen. Der Browser vergrößert oder verkleinert das Bild wenn du im img-Tag von HTML eine gewünschte Größe angibst. Senden tut der Server aber immer das Originalbild in voller Auflösung, so wie dus auf dem Server platziert hast.

Allerdings gerät man da schnell in Probleme. Für Displays mit hohen Pixeldichten benötigt man entsprechend große Bilder. Benutzt man kleine werden die ggf. am Browser vergrößert dargestellt und sehen sehr unscharf aus. Im Grunde gibt es 2 (kombinierbare) Möglichkeiten das bestmögliche Ergebnis zu bekommen:

  • Nutzen von Thumbnails. Du erstellst 2 Versionen des gleichen Bilds. Ein kleines das für Vorschau-Ansichten benutzt wird und eine Full-Size Version, die allerdings entsprechend groß ist und ggf. lange dauert bis sie komplett vom Browser heruntergeladen wurde
  • Progressive-Encoding. Das PNG-Format (evtl auch andere) erlaubt sowohl Interlaced- als auch Progressive Encoding. Speicherst du das PNG interlaced ab, werden die Bilddaten zeilenweise gespeichert. Bei großen Bildern und langsamen Internetleitungen kann man dann sehen wie sich das Bild auf dem Bildschirm Zeile für Zeile aufbaut. Progressive geht anders vor, es speichert nicht zeilenweise sondern "detailweise". Das Bild kann am Browser sofort in voller Größe gezeigt werden, ist aber noch verschwommen. Je mehr Bilddaten im Ladevorgang empfangen werden desto detaillierter und schärfer wird das Bild bis es vollständig ist.

Progressive wirkt auf den User i.d.R. besser. Es hat nicht diesen "Langsames Internet"-Flair, wenn du verstehst was ich meine. Es wirkt mehr wie eine stetige Verbesserung des Bildes während er noch lädt und behindert auch nicht den Aufbau des Seitenlayouts während des Ladevorgangs.

Kommentar von go4java ,

Kann man also zusammenfassend sagen, dass PNG für Retina-Bilder besser als JPG ist, oder sollte man - um sehr große Files zu vermeiden - z.B. auf JPEG 50% drosseln?

Kommentar von FaronWeissAlles ,

Nein. PNG und JPEG sind für verschiedene Einsatzzwecke konzipiert worden. JPEG ist ideal for Fotos, PNGs für Grafiken und Logos (wobei hier SVG noch besser wäre, auf jeden Fall bei der Konstruktion). JPEG braucht weniger Platz als PNG, hat dafür eine verlustbehaftete Komprimierung (wodurch die Qualitätseinbußen kommen). Bei Fotos fallen die aber deutlich weniger auf als bei Grafiken oder Logos, die präzise sein müssen. Auch Transparenz kann JPEG nicht (gibts auch nicht bei Fotos).

Ich hab grade gesehen, dass auch JPEG den Progressive-Mode unterstützt, nicht nur PNG. In Photoshop muss man da wohl "Speichern für Web" auswählen, damit man progressiv speichern (oder es zumindest auswählen) kann.

Also, wähl dein Format anhand deines Einsatzgebietes und verwende für dieses Format die progressive Speicherung. Gff. musst du schauen ob und wie das in deinem Bildbearbeitungsprogramm geht

Antwort
von NerdyByNature, 3

Hey go4java,

die Angabe der ppi (pixel per inch) ist eine rein rechnerische Sache und sagt nichts über die Qualität des Bildes als solches aus. Hier muss Du die absolute Größe eines Bildes in horizontaler und vertikaler Richtung betrachten!

ppi sagt Dir nur, wie groß Du ein Bild ausdrucken respektive darstellen kannst. Also ganz einfach:

Absolute Länge/Breite des Bildes (pixel) / ppi = Druckbare (darstellbare) Größe des Bildes bei gewünschter Anzahl der ppi

Um also ein Bild mit 400 ppi darzustellen musst Du nur rechnen.

Hat Dein Bild z.B. 2000x3000 pixel bei 72ppi und Du erhöhst die ppi in einem Programm wie z.B. gimp auf 400ppi, dann ändert sich nur die darstellbare Größe des Bildes ohne Qualitätsverlust.

2000px / 72ppi = 27,8 inch 
2000px / 400ppi = 5 inch

Hoffe ich konnte Dir dadurch weiterhelfen.

Lieben Gruß,

NerdyByNature

Kommentar von go4java ,

...das war soweit verstanden. Mir geht es aber auch um die Abbildung eines "großen" Bildes (z.B. 3000x1000px) im Web. Wenn diese größe das Basisbild darstellt und z.B. eine Größe von 3MB hat (JPEG 90%), wie wird ein solches Bild im Web runterskaliert (am besten serverseitig)?

Kommentar von NerdyByNature ,

Das kommt auf den Server an und auf die Programmierung...

Im Browser wird erstmal garnichts skaliert. Da hängt es einzig und alleine an den Zoom Einstellung des Browsers...

Was genau hast Du vor? Dann kann ich Dir vielleicht eine bessere Antwort geben...

Warum möchtest Du 3GB große Bilder im Web veröffentlichen und diese dann runter skalieren? Warum nicht als größeres "Thumbnail" darstellen und dahinter das Bild in Originalgröße verlinken?

Kommentar von go4java ,

Die Website wird Banner der Größe 1000px Breite haben, die sollen auch auf Retinas scharf abgebildet werden.

Kommentar von NerdyByNature ,

Bei 400ppi wären das also 2,5" Breite. Somit ungefähr 6,25cm... (Habe ganz frech einfach mit 2,5 multipliziert, weil ich keinen Taschenrechner anstrengen wollte ;) )

Kommentar von NerdyByNature ,

Das Format ist im Endeffekt nicht wirklich ausschlaggebend. Das jpg auf 50% zu reduzieren und von Darstellung auf Retina zu reden allerdings schon :D Qualitätsverlust und 400ppi Darstellung passt nicht wirklich zusammen. Das was Faron dazu alles wusste ist nett, aber nicht wirklich zielgerichtet (sorry Faron ;) ) Gut zu wissen ist es allemal

Keine passende Antwort gefunden?

Fragen Sie die Community