Website-Bilder auch auf Retinas anbieten?

...komplette Frage anzeigen

2 Antworten

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.

Antwort bewerten Vielen Dank für Deine Bewertung
go4java 26.02.2015, 11:41

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?

0
FaronWeissAlles 26.02.2015, 12:02
@go4java

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

0

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

Antwort bewerten Vielen Dank für Deine Bewertung
go4java 25.02.2015, 21:22

...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)?

0
NerdyByNature 25.02.2015, 22:55
@go4java

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?

1
go4java 26.02.2015, 11:39
@NerdyByNature

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

0
NerdyByNature 26.02.2015, 16:19
@go4java

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 ;) )

0
NerdyByNature 27.02.2015, 03:09
@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

0

Was möchtest Du wissen?