Der richtige Weg zur Retinafy Ihrer Websites

Die Vorbereitung Ihrer Website für das Retina-Display muss kein Aufwand sein. Unabhängig davon, ob Sie eine neue Website erstellen oder eine bestehende aktualisieren, hilft Ihnen dieses Handbuch dabei, Ihre Arbeit reibungslos zu erledigen.

Wenn Sie nach einer schnellen Lösung suchen, sehen Sie sich die Retina-ready-Themen auf dem Envato-Markt an, beispielsweise das Rebound - Responsive Multipurpose Retina Theme.

Rebound - Responsive Multipurpose Retina Theme

Machen Sie es zuerst Retina

Die einfachste und zeitsparendste Möglichkeit, die Retina-Unterstützung hinzuzufügen, besteht darin, ein für Retina-Geräte optimiertes Bild zu erstellen und es auch für Nicht-Retina-Geräte bereitzustellen.

Inzwischen verwendet jeder moderne Browser das bikubische Resampling und leistet mit dem Downsampling von Bildern gute Dienste. Hier ist ein Vergleich der Neuberechnung in Photoshop mit Google Chrome anhand eines Bildes von unserer Growth Engineering 101-Website.

Es gibt zwei Möglichkeiten, den Browser Bilder für Sie herunterrechnen zu lassen: img Tags oder CSS-Hintergrundbilder.

Du kannst haben img Tags dienen dem Retina-optimierten Bild und setzen die Breiten- und Höhenattribute auf die Hälfte der Auflösung des tatsächlichen Bildes (z. 400 x 300 wenn die Bildmaße sind 800x600).

Wenn Sie Bilder als CSS-Hintergründe verwenden, können Sie CSS3 verwenden Hintergrundgröße Eigenschaft zum Downsample des Bildes für Nicht-Retina-Geräte.

.Foto Hintergrundbild: URL (Retina-Bild-800x600-2x.png); Hintergrundgröße: 400px 300px; Hintergrundwiederholung: keine Wiederholung; Bildschirmsperre; Breite: 400px; Höhe: 300px; 

Achten Sie in beiden Fällen darauf, dass Sie in beiden Dimensionen gerade Zahlen verwenden, um eine Verschiebung der Pixel zu verhindern, wenn das Bild vom Browser neu berechnet wird.


Wenn Downsampling nicht gut genug ist

Normalerweise sollte das Downsampling von Browsern gut funktionieren. Allerdings gibt es Situationen, in denen das Downsampling im Browser zu verschwommenen Bildern führen kann.

Hier haben wir eine Menge 32px soziale Symbole.

Und so werden sie erscheinen, wenn sie heruntergerechnet werden 16px sowohl von Photoshop als auch von Google Chrome's bikubischen Filter. Es scheint, dass wir in diesem Fall bessere Ergebnisse mit Photoshop erzielen.

Um die besten Ergebnisse für unsere Benutzer zu erzielen, können wir zwei Versionen desselben Bildes erstellen: eine für Retina-Geräte und eine, die von Photoshop für Nicht-Retina-Geräte heruntergezählt wurde.

Jetzt können Sie CSS-Medienabfragen verwenden, um abhängig von der Pixeldichte des Geräts Retina- oder Nicht-Retina-Bilder zu liefern.

/ * CSS für Geräte mit normalen Bildschirmen * / .icons background-image: url (icon-sprite.png); Hintergrundwiederholung: keine Wiederholung; 
/ * CSS für hochauflösende Geräte * / @media only Bildschirm und (Website-Min-Device-Pixel-Verhältnis: 1,5), nur Bildschirm und (-Moz-Min-Device-Pixel-Verhältnis: 1,5), nur Bildschirm und (-o-min-Gerät-Pixel-Verhältnis: 3/2), nur Bildschirm und (Min-Gerät-Pixel-Verhältnis: 1,5) .icons Hintergrundbild: URL (icon-sprite-2x.png) ; Hintergrundgröße: 200px 100px; Hintergrundwiederholung: keine Wiederholung; 

Wenn Sie jedoch eine Hintergrundfarbe für kleine Symbole verwenden, funktioniert das Downsampling durch den Browser eher gut. Hier ist dasselbe Downsampling-Beispiel mit weißem Hintergrund.


Polieren Ihrer unterabgetasteten Bilder

Wenn Sie mit den Ergebnissen des Downsamplings von Photoshop immer noch nicht zufrieden sind, können Sie die Extra-Meile und handoptimieren Die Nicht-Retina-Version für extrem scharfe Ergebnisse.

Nachfolgend finden Sie einige Beispiele für Bilder von der Blossom-Produktwebsite, die ich handoptimiert für diejenigen, die sich noch auf Nicht-Retina-Geräten befinden.


Grenzen und Striche

Hier ist ein Beispiel für Probleme mit dem Downsampling mit Haarlinien, bei denen ich die Linien des abgetasteten Bildes neu zeichne.

Sehen Sie sich die Retina-Version dieses Bildes auf Dribbble an.


Text

Als nächstes kommen wir zu einem Beispiel für das Downsampling von Problemen mit Text. In diesem Fall habe ich den Text „Feature Pipeline“ manuell neu geschrieben, um das Ergebnis so scharf wie möglich zu machen.

Retina-Version

Wenn Details, gestochen scharfe Schriftarten und saubere Haarlinien wichtig sind, möchten Sie möglicherweise mehr leisten.


Versuchen Sie, Bilder zu vermeiden

Die größten Nachteile gerasterter Bilder sind ihre beträchtliche Dateigröße und ihre Skalierung auf verschiedene Größen, ohne die Bildqualität zu beeinträchtigen. Eine gute Alternative zu gerasterten Grafiken sind CSS, Scalable Vector Graphics (SVG) und Icon Fonts.

Wenn Sie die Möglichkeit haben, die grafischen Elemente für Ihre Website in CSS zu erstellen, wählen Sie es aus. Damit können Sie Verläufe, Ränder, abgerundete Ecken, Schatten, Pfeile, Elemente drehen und vieles mehr hinzufügen.

Hier sind einige Beispiele für Interaktionselemente in Blossom, die in CSS implementiert sind. Der subtile Farbverlauf wird von CSS-Farbverläufen unterstützt. Die auf dieser Schaltfläche verwendete benutzerdefinierte Schriftart ist Kievit, die über Typekit bereitgestellt wird. Keine Bilder.

Im folgenden Screenshot werden nur der Benutzer-Avatar und der blaue Stempel verwendet. Alles andere - das eingekreiste Fragezeichen, der dunkelgraue Pfeil daneben, der Popover, sein Schatten und der Pfeil darüber - sind reines HTML und CSS.

Hier können Sie sehen, wie Projekte in Blossom angezeigt werden. Es ist ein Screenshot der Website eines Projekts, die als Deckblatt auf einem Stapel Papierbogen verwendet wird. Die Papierblätter werden mit implementiert divs, die mit CSS gedreht werden.

Der eingekreiste Pfeil auf der rechten Seite des Screenshots ist reines CSS.

Werkzeuge

Hier sind einige großartige Tools, die beim Erstellen von Effekten mit CSS Zeit sparen.

  • CSS Generator: Browserübergreifende CSS3-Syntax von @RandyJensen.
  • CSS-Pfeile: CSS für Tooltip-Pfeile von @ShojBerg.
  • CSS für Sprites generieren: Sprite Cow hilft Ihnen, die Hintergrundposition, Breite und Höhe von Sprites in einem Spritesheet als ein schönes kopierbares CSS zu erhalten. Es wurde von TheTeam gebaut und spart viel Zeit - definitiv einen Versuch wert.

Der Hauptvorteil von SVG besteht darin, dass sie im Gegensatz zu gerasterten Grafiken auf verschiedene Größen einigermaßen skaliert werden können. Wenn Sie mit einfachen Formen arbeiten, sind diese normalerweise kleiner als PNGs. Oft werden sie für Dinge wie Diagramme verwendet.

Symbolschriftarten werden häufig als Ersatz für Image-Sprites verwendet. Ähnlich wie SVG können sie ohne Qualitätsverlust unendlich skaliert werden und sind im Vergleich zu Image-Sprites in der Regel kleiner. Darüber hinaus können Sie mit CSS ihre Größe und Farbe ändern und sogar Effekte wie Schatten hinzufügen.

Sowohl SVG- als auch Icon-Fonts werden von modernen Browsern gut unterstützt.


Retina-Ready Favicons

Favicons sind sehr wichtig für Benutzer, die eine einfache Möglichkeit benötigen, um sich zu merken, welche Website zu welchem ​​Browser-Tab gehört. Ein Retina-fähiges Favicon ist nicht nur einfacher zu identifizieren, sondern zeichnet sich auch durch eine Vielzahl pixelierter Favicons aus, die noch nicht optimiert wurden.

Um Ihre Favicon Retina-ready zu machen, empfehle ich X-Icon Editor. Sie können entweder ein einzelnes Bild hochladen und die Größe des Editors für verschiedene Dimensionen ändern lassen, oder Sie können separate Bilder hochladen, die für jede Größe optimiert sind, um optimale Ergebnisse zu erzielen.


Wie man vorhandene Bilder retina-ready macht

Wenn Sie eine Website mit vorhandenen Bildern aufrüsten möchten, ist etwas mehr Arbeit erforderlich, da Sie alle Bilder neu erstellen müssen, um sie retina-ready zu machen. Dies muss jedoch nicht zu viel Zeit verschwenden.

Versuchen Sie zunächst, Bilder zu identifizieren, die Sie vermeiden können, indem Sie, wie bereits erwähnt, Alternativen wie CSS, SVG und Image Fonts verwenden. Schaltflächen, Symbole und andere gebräuchliche UI-Widgets können normalerweise durch moderne Lösungen ersetzt werden, für die keine Bilder erforderlich sind.

Falls Sie gerasterte Bilder tatsächlich neu erstellen müssen, möchten Sie natürlich zu den Quelldateien zurückkehren. Sie können davon ausgehen, dass die Größe Ihrer gerasterten Bitmap-Bilder einfach doppelt so groß ist, dass die Aufgabe nicht erledigt wird, da alle Details und Ränder pixeliert werden.

Keine Verzweiflung nötig - Bildkompositionen, die meistens Vektoren enthalten (d. H. In Adobe Photoshop oder Illustrator), sind recht einfach zu vergrößern. Vergessen Sie jedoch nicht zu überprüfen, ob Ihre Photoshop-Effekte in den Überblendoptionen wie Striche, Schatten und Abschrägungen immer noch wie beabsichtigt angezeigt werden.

Erstellen Sie Photoshop-Kompositionen im Allgemeinen direkt aus Vektoren (Formen) und Photoshop-Bildern Intelligente Objekte spart Ihnen in Zukunft viel Zeit.


So optimieren Sie die Dateigröße von Bildern

Durch die Optimierung der Dateigröße aller Bilder in einer Anwendung oder Website können Sie schließlich bis zu 90% der Ladezeiten von Bildern einsparen. Bei Retina-Bildern wird die Reduzierung der Dateigröße sogar noch wichtiger, da sie eine höhere Pixeldichte aufweisen, die ihre jeweiligen Dateigrößen erhöht.

In Photoshop können Sie die Dateigröße der Bilder über die Funktion „Für Web speichern“ optimieren. Darüber hinaus gibt es ein hervorragendes kostenloses Tool namens ImageAlpha, mit dem Sie die Größe Ihrer Bilder mit nur geringem Qualitätsverlust noch weiter reduzieren können.

Im Gegensatz zu Photoshop kann ImageApha 24-Bit-Alpha-Kanal-PNGs in 8-Bit-PNGs mit Alphakanal-Unterstützung konvertieren. Das i-Tüpfelchen ist, dass diese optimierten Bilder Cross-Browser-kompatibel sind und sogar für IE6 funktionieren!

Sie können mit verschiedenen Einstellungen in ImageAlpha herumspielen, um den richtigen Kompromiss zwischen Qualität und Dateigröße zu erhalten. Im folgenden Fall können wir die Dateigröße um fast 80% reduzieren..

Wenn Sie mit dem Einstellen der gewünschten Komprimierungsstufen fertig sind, bietet ImageAlphas Speicherdialogfeld auch die Option "Mit ImageOptim optimieren" - ein weiteres hervorragendes und kostenloses Tool.

ImageOptim wählt automatisch die besten Komprimierungsoptionen für Ihr Bild aus und entfernt unnötige Metainformationen und Farbprofile. Im Fall unserer Stempeldatei konnte ImageOptim die Dateigröße um weitere 34% reduzieren..

Nachdem wir alle Assets bei Blossom.io für hochauflösende Displays aktualisiert und ImageAlpha und ImageOptim zur Optimierung der Dateigröße verwendet haben, haben wir tatsächlich ein paar Kilobyte im Vergleich zu den vorherigen Assets eingespart.


Zeit sparen, dieses Buch lesen

Wenn Sie mehr darüber erfahren möchten, wie Sie Ihre Apps und Websites für Retina-Displays vorbereiten können, empfehle ich Ihnen "Retinafy your websites & apps" von Thomas Fuchs. Es ist eine direkte und schrittweise Anleitung, die mir viel Zeit und Nerven erspart hat.


Tolle Retina-Ready Sites im Web


http://kickoffapp.com/

http://www.layervault.com


http://www.apple.com


http://www.panic.com

Danke fürs Lesen! Irgendwelche Fragen?