In einem aktuellen Blogpost erklärt Chris Nolet, Mitgründer von Kickfolio, wie Webdesigner Grafiken für das Retina-Display des neuen MacBook Pro optimieren können. Ziel der Anleitung ist, hochauflösende Bilder zur Verfügung zu stellen, ohne per se zusätzliche Bandbreite in Anspruch zu nehmen.
Die hohe Bildqualität des Retina-Displays stand auch im Mittelpunkt der ersten Tests des MacBook Pro. Dessen größere Verbreitung wird wahrscheinlich nicht mehr lange auf sich warten lassen, es empfiehlt sich deshalb, schon jetzt die notwendigen Vorkehrungen zu treffen. Der erwähnte Blogpost liefert dafür den notwendigen HTML- und CSS-Code und erklärt dessen Einbindung.
Die vollständige Anleitung findet ihr bei den Jungs von Kickfolio.
Weitere Informationen:
- How To Set Retina Graphics For Your Website - Kickfolio Blog
- MacBook Pro mit Retina Display – Das sagen die ersten Tests - t3n News
![MacBook Air: Frischzellenkur bringt Haswell-Prozessoren und 1 Tag Akkulaufzeit [WWDC 2013]](http://t3n.de/uploads/t3n-news-post-472167_macbook-air-2013-wwdc-500_medium.jpg)
von Martin Brüggemann 16.06.2012 (16:33Uhr) 1.
Ist ja nicht nur für das MacBook Pro interessant, sondern generell für Laptops mit hochauflösenden Bildschirmen.
von Moritz 16.06.2012 (18:12Uhr) 2.
Es geht ja nicht um das optimieren können, es geht ja laut ersten Testberichten schon um das müssen. Wenn ich meine Mac - App nicht anpasse wird sie sofort negativ auffallen.
Und das neue Mac Book ist ja nur der Anfang, andere Modelle werden dazu kommen und wie vor mir schon erwähnt, werden auch andere Hersteller nachziehen.
Ich weiss noch nicht ob ich so glücklich damit bin...
von michsch 16.06.2012 (23:38Uhr) 3.
Das ist leider wenig hilfreich, da das nur bei Webkit-Browsern (z.B. Safari & Chrome) funktioniert. Nutzt aber jemand Firefox auf einem MacBook - ja das gibt es auch - dann kommt man mit dem -webkit Präfix nicht sehr weit.
@derShepp hat mich aber auf folgenden Beitrag hingewiesen: HOW TO UNPREFIX -WEBKIT-DEVICE-PIXEL-RATIO. Getestet habe ich das allerdings nicht. Der Ansatz, die Pixel-Ratio mit der Auflösung in dpi zu umgehen, ist zwar etwas unkonventionell, könnte aber durchaus funktionieren.
Bedenkt man, dass andere Hersteller nachziehen und auch Retina Displays auf den Markt bringen, die nicht zwangsweise in einem Apple Mac verbaut sind, dann macht das -webkit Präfix für den Media Query noch weniger Sinn. Auf Windows Computern sind Webkit-Browser wohl deutlich in der Unterzahl.
von Peter Holländer via facebook 18.06.2012 (08:40Uhr) 4.
Danke für den Tipp, aber will ich das? ;-)
von Andreas Winterer via facebook 18.06.2012 (08:42Uhr) 5.
Neuer Trend: Auf die Nische in der Nische optimieren...
von Putzi Mühlinger via facebook 18.06.2012 (08:43Uhr) 6.
Für alle die nicht in einer Apple-zentrieten Welt leben, empfehle ich als Web-Dev die aus der Mode gekommene Browser-Weiche mit dem Hinweis "Ihr Gerät/Browser wird leider nicht unterstützt" ;-)
von Alexander Schestag via facebook 18.06.2012 (08:56Uhr) 7.
Tja, wenn alle Geräte das haben, müssen die User eine schlechtere Auflösung hinnehmen. Es ist für den Seitenbetreiber nicht hinnehmbar, deswegen erheblich längere Ladezeiten in Kauf zu nehmen.
von Thomas Schürmann via facebook 18.06.2012 (08:57Uhr) 8.
Statt Browser- nun eben Bildschirmoptimierung. Keiner will das wahrscheinlich aber wir kommen alle nicht drumherum.
von Ivan Ushmorov via facebook 18.06.2012 (09:12Uhr) 9.
Jeder vernünftige Seitenbetreiber hätte sich schon seit dem iPad3 mit diesem Thema beschäftigen müssen. Da sind "Apple-Zentrierte-Welt" oder "erheblich längere Ladezeiten" keine Ausrede.
von Anton Meier via facebook 18.06.2012 (09:18Uhr) 10.
Wie verhält sich das dann mit dem Page-Speed-Rank? Irgenwelche Einschränkungen?
von Björn 18.06.2012 (09:23Uhr) 11.
Jetzt sind wir aus dem Gröbsten raus was Browser-Optimierung angeht, und schon stehen dank iPad(3)/MacBook Pro/tbc… die nächsten Hacks ins Haus. Und das ausgerechnet ein Gerät aus dem Mobile-Sektor jetzt 4x größere Grafiken benötigt um sie scharf darzustellen ist schon Ironie pur. Als WebDev hab ich irgendwie das Gefühl wir drehen uns im Kreis...
von Florian 18.06.2012 (09:24Uhr) 12.
Kommts Leute, Apple hat vielleicht 10% Marktanteil. Bei dem Preis von dem Gerät wird wohl kaum eine große Masse gleich zuschlagen, wir reden hier also potentiell von 1% User. Da müssten wir unsere Seite aber echt für alles optimieren.
von Steve Brauer via facebook 18.06.2012 (09:49Uhr) 13.
"Erheblich längere Ladezeiten keine Ausrede" ... na Holla die Waldfee. Wenn ich bedenke wie Haarscharf die Qualität von Weboptimierten Bildern an Inakzeptabel vorbeischrammt (und das auf ganz normalen Displays), dann kommt bei Retinaoptimierter Darstellung bestimmt die doppelte Ladezeit zusammen.
In einigen Bereichen wird es bestimmt auch ziemlich spaßig Bilder fürs Web zu oragnisieren, die mit 2000er Breite daher kommen. Vernünftige Seitenbetreiber lassen welche schießen, aber vernünftige Fotografen kosten halt auch vernünftig Geld.Also ich würde diese Tage eher auf Content optimieren, als für die Minderheit, einer weiteren Minderheit.
von Andreas Krüger via facebook 18.06.2012 (09:50Uhr) 14.
"Jeder normale Seitenbetreiber" schaut erstmal nach seiner Zielgruppe, dann in die Webstatistik und entscheidet dann, ob sich diese Optimierung überhaupt lohnt. Für mich kann ich aktuell sagen "nein", für 0,x% der Besucher höher aufgelöste Bilder bereit stellen? Dafür ist kein Budget da.
von Dennis Stelloh via facebook 18.06.2012 (10:05Uhr) 15.
Die Internetabdeckung in Deutschland ist ausserhalb der Großstädte nach wie vor so mieserabel, dass sich das nicht lohnt.
Zur Zeit der Röhrenmonitore und Aufrüstwahn gab es alle paar Monate höhre Bildschirmauflösungen. Seit einigen Jahren bleibt die Bildschirmauflösung (wahrscheinlich aus gutem Grund) relativ konstant. Nun kommt plötlich Apple daher, gibt dem ganzen nen hippen Namen und alle findens wieder total geil.
von Matthias Reinholz via facebook 18.06.2012 (10:14Uhr) 16.
Eine "Retina-Anpassung" macht doch absolut keinen Sinn. Dieser kurzzeitige Minderheiten-Hype wird nie in einer breiten Masse genutzt werden. Der mit "Retina" eingeführte Trend hin zu extrem hohen Pixeldichten stammt nicht von Apple, sondern von den Display-Herstellern. Dass Samsung aktuell zwar Apple-Retinas fertigt, doch selbst nicht verbaut, hat sicher (für uns gebildeten und technikversierten Kunden unverständliche) diverse Gründe, doch sicher ist, dass die Pixeldichte des "Retina-Displays" geringer ist, als die, die sich in der nächsten Generation von Displays als Standard durchsetzen wird. LG hat ja bereits im Mobilbereich vorgelegt und Samsung wird da spätestens wenn der 3D-TV Hype abflacht sicher die nächste Generation des TV einläuten und damit gleich alle Displays auf diese Stufe heben. Erst dann macht es Sinn, wirklich anzupassen - so erspart man sich einen unnötigen Zwischenschritt.
von Fabian Watt via facebook 18.06.2012 (10:46Uhr) 17.
Wer sich ein Gerät zulegt dass mehr verarbeiten will als vorhanden ist, muss eben warten bis der Rest mitzieht.. das war schon bei Dual-/Quadcore und der Umstellung auf x64 so und ist jetzt vorerst Apples, dann euer und später überhaupt kein Problem mehr...
von WebCode: Zeichenprogramm generiert HTML-… 29.04.2013 (19:31Uhr) 18.
[...] So optimierst du Grafiken für das Retina-Display des neuen MacBook Pro – t3n News [...]