Retina Displays und Bandbreite
Retina Displays
Alle Jahre wieder beglücken uns diverse Hardwarehersteller mit neuen Technologien. Seit dem iPhone4 hat der Begriff Retina Display seine Runde gemacht: Bilder und Videos können durch diese Technologie besonders scharf dargestellt werden, weil diese Displays mehr Pixel pro Fläche zur Verfügung haben.
Allerdings muss das Quellmaterial natürlich auch entsprechend größer zur Verfügung stehen. Während das bei lokalen Daten auf dem eigenen Rechner kein Problen darstellt, muss man für Webseiten und Onlineanwendungen entsprechende Lösungen bereit stellen.
So kann man z.B. den CSS Formatvorlagen einer Website einen CSS-Selektor hinzufügen der einzelne Bilder in doppleter Auflösung bereitstellt wenn das Endgeraät sich als Retina Display Besitzer „entlarvt“. Man muss lediglich den Dateinamen des Originalbildes mit @2x vor der Dateiendung (also zum Beispiel name@2x.jpg) ergänzen und dann das Bild in doppleter Größe in den gleichen Ordner wie das Original legen.
@media only screen and (-webkit-min-device-pixel-ratio: 2),
only screen and (-moz-min-device-pixel-ratio: 2),
only screen and (-o-min-device-pixel-ratio: 2),
only screen and (min-device-pixel-ratio: 2)
{ .div-class {
background-image: image-url(‚image-name@2x.png‘);background-size: 200px 200px; }
}
Wenn die Bilddateien nicht via CSS eingebunden sind, wie z.B. Bilder im Contentbereich von CMS Systemen, kann man diese mit entsprechenden Scripten wie retina.js retina-tauglich machen. WordPress 3.5 bringt das sogar von Haus aus mit.
Bandbreite
Klingt alles erstmal einfach und gut, aber ein nicht zu vernachlässigendes Problem entsteht dadurch für User die mobil mit einem Gerät mit Retinadisplay im Netz unterwegs sind: Die Bandbreite steigt natürlich erheblich durch die größeren Bilder und das kann zu höheren Kosten und langsameren Darstellungen führen. Auch das Hosten und der Einkauf von höher aufgelösten Bildern macht sich schnell im Geldbeutel bemerkbar. Eine Lösung für das Bandbreitenproblem wäre dem User die Möglichkeit zu geben, zwischen normalen und hochaufgelösten Bilderen zu wählen, eventuell sogar als globale Einstellung für den gesamten Websitebesuch.
