Bessere Bilddarstellung auf iPad 3 bzw. Retina-Display?

**Michael Stifter** · 26.03.2012, 11:31

Hallo zusammen,

da ja in Zukunft, und nun auch schon auf dem iPad 3, immer höher aufgelöste Displays verwendet werden, ist auch die Darstellungsqualität von Website erheblich verbessert worden. Vor allem werden Schriften sehr scharf dargstellt, ohne dass man auch nur einen Pixel sehen kann. Das gleiche Ergebnis hat man bei Vektor-Dateien.
Wie verhält es sich aber bei Bildern? Das Retina-Display hat eine doppelt so hohe Auflösung, d.h. ein Pixel wird in vier kleine Pixel aufgeteilt. Ein Bild das man mit einer Größe von 200 x 300 Pixel auf die Website packt, wird in der gleichen Größe wie bisher dargestellt, wobei ein Bildpixel nun auf vier Display-Pixel verteilt wird. Wenn ich nun dasselbe Bild in einer Größe von 400 x 600 Pixel hochlade und z. B. in einem Bildelement mit Werten von 200 x 300 Pixel einbette, müsste es doch auf dem iPad 3 schärfer dargestellt werden, oder liege ich da falsch?

Gruß, Michael!

**bongartz120** · 27.03.2012, 15:03

Da würde ich sagen, dass musst du ausprobieren. Hier ein CSS Code der die Retina Auflösung verbearbeiten kann.

Code:

@media only screen and (-webkit-min-device-pixel-ratio: 2) {

h1.logo a {

background-image: url(images/logo2x.png);

-webkit-background-size: 300px 80px;

}

Es wäre aber großartig, wenn deine Möglichkeit funktionieren würde, ohne dass man immer den CSS Code verändern müsste.

**andreasisaak** · 27.03.2012, 15:23

Nein so funktioniert das nicht. Es sind dann immer noch 200x300px für das iPad. Bessere wäre 2 Bilder hochzuladen und den Server anhand des Geräts entscheiden zu lassen wer welches bekommt. Oder man lädt das größere hoch, skaliert es mit der Contao Funktionalität für alle "normalen" Bildschirme und Retine-Displays bekommen das große Bild.

**filmemacher** · 27.03.2012, 17:15

Habe zu diesem Thema gerade einen Artikel im Block "html5-mobile" gefunden: http://bit.ly/GUf3CW

**andreasisaak** · 27.03.2012, 20:18

Und diese Methode willst du so wirklich durchziehen? Ich arbeite bereits an einer anderen Lösung weil ich ca. 3000 Bilder austauschen muss und das muss automatisiert ablaufen. Ganz bestimmt werde ich das nicht via CSS handhaben

**bongartz120** · 29.03.2012, 18:55

Hi,

kannst du uns an deinem Ansatz teil haben?

Ich habe überlegt, es per Javascript zu machen, aber irgendwie fehlt mir hierfür gerade so der Ansatz. Ich bin sehr gespannt wie du es löst.

**juschenten** · 01.04.2012, 15:19

Zitat von andreasisaak

Nein so funktioniert das nicht. Es sind dann immer noch 200x300px für das iPad. Bessere wäre 2 Bilder hochzuladen und den Server anhand des Geräts entscheiden zu lassen wer welches bekommt. Oder man lädt das größere hoch, skaliert es mit der Contao Funktionalität für alle "normalen" Bildschirme und Retine-Displays bekommen das große Bild.

@andreasisaak Gute Idee, dass mit den zwei Bildern – aber wie setzte ich das in Contao um?

**bongartz120** · 01.04.2012, 15:55

Den CSS Code hierfür habe ich weiter oben gepostet. Jetzt iet nur noch die Frage wie man elegant diesen CSS Code in contao bekommt.

**andreasisaak** · 01.04.2012, 15:59

Zitat von juschenten

@andreasisaak Gute Idee, dass mit den zwei Bildern – aber wie setzte ich das in Contao um?

Ich melde mich diesbezüglich nächste Woche. Aber soviel sei gesagt, CSS ist es definitiv nicht!!

**juschenten** · 03.04.2012, 08:12

Zitat von andreasisaak

Ich melde mich diesbezüglich nächste Woche. Aber soviel sei gesagt, CSS ist es definitiv nicht!!

Andreas, ich bin echt gespannt!

**andreasisaak** · 03.04.2012, 11:26

Es ist ein Mix aus JS und PHP. Ich habe es bei einem Projekt bereits im Einsatz, würde daraus gerne noch eine Extension schreiben.

**Michael Stifter** · 03.04.2012, 16:05

Ich bin ebenfalls gespannt! Über CSS wäre es nicht praktikabel, da man es für jedes Bild separat machen müsste.

Vielen Dank im Voraus!

**herr rilke** · 16.04.2012, 07:23

moin,

fand diesen link auf dr. web, als JS lösung.

zumindest für nicht-hintergrund-bilder eine feine sache?

viele grüße!

**Thomas** · 16.04.2012, 09:49

Lohnt sich das wirklich?

Durchaus eine ernst gemeinte Frage!
Gegenüber Desktop-Usern dürfte der iPad-User doch eine schwindend geringe Zahl haben oder täuscht das?

Ich finde diesen Aufwand mit 2 Bildern etc., für Redakteure, Seitenbetreiber und Administratoren einfach mal zu groß und zum Teil auch zu Ressourcen lastig. Zumal dafür wieder mal JS zum Einsatz kommt und einen User dazu zwingt, dieses Script auch wieder zu zu lassen. Was die Funktionalität von Webseiten ohne aktiviertem JS wieder ein Stück weit unmöglich macht. ^^

Für mich ist diese Frage jetzt nur informeller Natur, eine Diskussion muss es also nicht werden.

**bongartz120** · 16.04.2012, 10:02

Eine gute Frage. Also wenn ich sehen das dass iPad im letzten Qual 15 Million mal verkauft wurde und einen schnellerer Wachstum als das iPhone hat, würde ich schon sagen, dass es sich lohnt. Vorallem werden wohl bald auch Notebooks so eine Auflösung haben, zu minntest sind die Gerüchteküchen in der Hinsicht sehr laut.

Ich habe für mich selber entscheiden das ich alles Projekte mit Retina Auflösung unterstützen werde, da die Seiten ohne extrem schlecht aussehen. Ich weiß ja nicht wie du es deinem Kunden erklärst, wenn er es auf seinem iPad anschaut und alles verschwommen und unscharf ist ;-)

Und her zwei Bilder sind ja noch ok, aber schau dir mal html5 Video an, da musste mindestens zwei videos hochladen einmal mp4 und dann noch ogv bzw. webm. Dann haste aber nur SD oder HD. Wenn du jetzt noch SD und HD anbieten willst musste noch mal zwei hochladen.

**Thomas** · 16.04.2012, 11:09

Gibt es dafür Bildbeispiele?

Mir fehlt gerade etwas das technische Verständnis!
Ich kann einen Monitor bzw. Desktop-PC jetzt schon hoch auflösend betreiben und sehe keine Seite verschwommen.
Wo läge da jetzt der Unterschied zum iPad?
Außer, dass dort nicht wirklich hochwertige Komponenten verbaut wurden und das Display einfach mal viel zu klein ist, fällt mir dazu nicht sehr viel ein.

Ich muss dabei gestehen, ich habe noch nie einen iPad angefasst. Ich werde es wohl auch niemals tun, da mir das Teil eine reine Modeerscheinung ist. Sieht man sich mal die beschränkten Nutzungsmöglichkeiten an. Auf dem Schreibtisch ist es schlecht zu nutzen (schräge Ansicht), auf dem Schoß ist es mir lästig, durch die Gegend tragen muss ich den auch noch und arbeiten geht damit auch nur beschränkt. Das ist einfach nichts für mich.

Das ist nur meine Meinung und die braucht für andere nicht Aussage kräftig zu sein, vielleicht kommt aber daher meine fehlende Akzeptanz für solche Geräte.

Mir fällt dazu noch was ein!

Was machen denn Personen, die nur langsame Internetverbindungen haben?
Gibt es für solche Situationen eine Art Fallback-Funktion?
Ich glaube es gibt wesentlich mehr Haushalte mit langsamen Leitungen, als 15 mio. verkaufte iPads. ^^

Das würde bedeuten, dass ich hier auf dem Lande, mit einer 3000er Anbindung ewig lange Ladezeiten hätte. Die ich logischer Weise auch noch etwas versuche zu optimieren, indem ich möglichst wenig JS aktiviere. Zumal ich hier 3 - 4 Rechner am Netzwerk hängen habe, die teilweise intensiv Ressourcen lastige Seiten aufsuchen (meine Kids halt).

Fragen über Fragen, aber vielleicht überzeugt Ihr mich ja doch.

**FloB** · 16.04.2012, 21:09

Kleiner Tipp: Geh mal in nen Apple Store (oder Reseller) und spiel 15 Minuten mit dem Teil. Nur so allgemein. Und dann surfe auf ein paar Seiten (Achtung, viele haben schon Retina-Grafiken drinne). Dann siehst du, dass zumindest an manchen Stellen Grafiken optimiert werden sollten, um einen hochwertigen Eindruck zu hinterlassen. Und ja, hochwertig, denn der Nutzer erwartet ein angenehmes Erscheinungsbild. Da ist es egal, ob derjenige an einem iPad sitzt oder nicht, oder aus welchen Gründen man sich ein iPad gekauft hat.

Zur Problematik: Es gibt nicht nur das iPad, das eine so hohe Auflösung hat. Auch das iPhone 4, viele Androids, neue Windows Phones, andere Bildschirme … die hohe Auflösung auf deinem Computer ist nicht mit Retina-Bildschirmen zu vergleichen (ich nutze diesen Term mal zur Vereinfachung, es geht eigentlich um High-DPI-Bildschirme). Die Essenz ist, dass erstens so viele Pixel auf einer Fläche sind, dass man einzelne nicht mehr aus einer bestimmten Distanz (-> normale Benutzung) erkennen kann, und zweitens die Zahl der angezeigten Pixel aber nicht der physischen Pixelzahl entspricht (bei iOS-Geräten Faktor 2). Wenn du an deinem Laptop die Auflösung erhöhst, verkleinern sich auch gleichzeitig sämtliche Elemente auf deinem Bildschirm – bei Retina bleiben sie effektiv gleich, es kommt zu einer neuen Form des Subpixel-Renderings. Das hilft z. B. bei Texten, die in größerem Detail (und von Print kaum zu unterscheiden) angezeigt werden können; desweiteren können auch alle Elemente in höherem Detail angezeigt werden (anstatt simples Upskaling – dann kommen unschöne Artefakte). Am besten siehst du das, wenn du mal ein iPhone 3GS und ein iPhone 4/S (oder iPad 2 und das neue iPad) nebeneinander vergleichst (insbesondere auch, wenn du nicht-optimierte Apps und Webseiten vergleichst).

Bez. "Modeerscheinung": Schau dir mal die Absatzzahlen von Tablets an, schau dir deren Entwicklung an (nicht allein vom iPad, aber das ist schon mal ein starker Indikator). Dann siehst du auch ohne marktwirtschaftlichen Hintergrund und Marketing-Drang, dass das definitiv keine Modeerscheinung ist (sowohl Tablet als auch Retina-Bildschirme). Wenn du dann noch die Laptop-Absatzzahlen anschaust, wirst du sehen, wie (ich bitte um Entschuldigung) blödsinnig deine Meinung ist.
Und zu guter Letzt ein Experiment: Setze einem beliebigem Senioren, der wenig mit Technik zu tun hat, ein iPad vor (funktioniert auch bei allen anderen wenig / gar nicht Technik-affinen Menschen, sogar Primaten) – der wird sich (evtl. nach ganz kurzer Einführung) stundenlang damit beschäftigen können und Dinge tun, die er sich nie vorgestellt hat. Und das ganz allein ist der Grund, warum Tablets (und insbesondere iPads) ein Erfolg und alles andere als eine Modeerscheinung sind.

**andreasisaak** · 16.04.2012, 21:12

Vor einem halben Jahrhundert war das Fernsehen auch nur eine Modeerscheinung. Genauso wie die Rockmusik. Gut das sich beides nicht durchgesetzt hat!

Soviel zu eigenen/subjektiven Meinungen.

**dtptiger** · 17.04.2012, 00:36

Endlich richtig verkaufbare modifikationen, und das für "pillepalle", nur views :-)
Das wollen die Leute vermutlich wirklich! Sicherheit und systemupdates sind schlechter zu verkaufen.
Die Welt spinnt, war schon immer klar, aber Geld "riecht" nicht.

Wunderbar, freut sich dtptiger :-)

**bongartz120** · 15.06.2012, 12:36

Ich wollte mal Fragen wie denn jetzt der Stand der Erweiterung ist?

Jetzt wo Retina auch auf Notebooks und bald auf alle Geräte kommen wird, ist es ein wirklich sehr wichtiges Thema.

**psren** · 15.06.2012, 13:02

Davon handelt auch dieses Ticket in dem Tristan diese Erweiterung vorstellt.
Ich habe sie noch nicht getestet, sieht aber sehr toll aus :-)

**bongartz120** · 15.06.2012, 13:18

Danke.

Ist die schon freigeben?

**psren** · 15.06.2012, 13:24

Zitat von bongartz120

Ist die schon freigeben?

Ich finde sie nicht im ER, daher vermute ich nicht.
Kannst ja mal Tristan fragen.

**andreasisaak** · 15.06.2012, 19:15

Mit einer einfachen Suche könnte man sie auf Github finden: https://github.com/InfinitySoft/contao-lazyResize

**psren** · 15.06.2012, 22:30

Zitat von andreasisaak

Mit einer einfachen Suche könnte man sie auf Github finden: https://github.com/InfinitySoft/contao-lazyResize

Naja, das beantwortet nicht seine Frage ob die Extension freigegeben ist. Den Link zu Github habe ich vorher auch schon gepostet ;-)

**bongartz120** · 07.07.2012, 22:09

So ne ganz blöde Frage, aber wie kann ich testen oder die Erweiterung wirklich arbeitet und wie muss ich die Bilder vorbereiten?? Muss ich die Grafiken hochladen und mit @2x benennen?

**bongartz120** · 08.07.2012, 08:13

Nachdem ich die Erweiterung installiert habe komme ich nicht mehr in die Einstellungen von Contao. Hier der Fehlerlog:

Code:

Fatal error: Could not load class MetaPalettes in /www/htdocs/w00b5928/contao/system/functions.php on line 104
#0 [internal function]: __error(256, 'Could not load ...', '/www/htdocs/w00...', 104, Array)
#1 /www/htdocs/w00b5928/contao/system/functions.php(104): trigger_error('Could not load ...', 256)
#2 /www/htdocs/w00b5928/contao/system/modules/lazyResize/dca/tl_settings.php(37): __autoload('MetaPalettes')
#3 /www/htdocs/w00b5928/contao/system/libraries/Controller.php(2776): include('/www/htdocs/w00...')
#4 /www/htdocs/w00b5928/contao/system/modules/backend/Backend.php(194): Controller->loadDataContainer('tl_settings')
#5 /www/htdocs/w00b5928/contao/contao/main.php(120): Backend->getBackendModule('settings')
#6 /www/htdocs/w00b5928/contao/contao/main.php(230): Main->run()
#7 {main}

Danke für die Hilfe.

Gruß

Bongartz120