Wie mache ich Retina Bilder für meine Website
Mightybytes Entwickler Stephanie Daniels bietet eine kurze Erklärung, was Retina ist, wie Bilder für sie zu machen, und warum es ist alles so verdammt verwirrend.
Aber Retina Bilder sind etwas, das jeder, der Dinge für digitale Geräte macht sollte darüber nachdenken. Es ist wichtig, wie klar die Dinge auf jedem Bildschirm schauen, nicht nur Ihre eigene.
In diesem Beitrag werde ich die Komplexität der Retina brechen, so dass Sie weniger Zeit damit verbringen, was es herauszufinden, alle Mittel und mehr Zeit tatsächlich Dinge zu machen. Ich habe dies in drei Teile ausgebrochen:
- definieren von Retina
- Herstellung von Retina Bilder
- Die Umsetzung Best Practices
definieren von Retina
Mit anderen Worten, „Retina“ beschreibt wirklich scharfe und klare Bildschirme, die in vielen, vielen Pixel stopfen.
Für den Zweck dieser Stelle, wenn ich „Retina Display“, sage ich beschreibe Gerät Bildschirme mit einer ausreichend hohen Pixeldichte, dass alles, was für das menschliche Auge scharf sieht. Als ich „Retina Bild“, sage ich beschreibe ein Bild, das speziell auf einem Retina display.These sind zwei verschiedene Dinge scharf aussehen gemacht wurde.
Einige geeky Statistiken über Retina Display
Der Sweet Spot für scharf-to-the-Mensch-Augen-Retina-Displays liegt bei etwa 300 Pixeln pro Zoll (PPI) laut Apple, Inc.
Ein iPhone 3GS Display verfügt über 163 PPI (nicht Retina) vs. iPhone 4 Display, das 326 PPI (Retina) hat. Diese Zahl scheint zufällig, aber sie sind nicht: 326 PPI gleich 2 x 163 PPI.
Diese Zahlen scheinen auch weniger zufällig, wenn wir auf das metrische System als Pixel pro Zentimeter (PPCM) umwandeln: 64 und 128 PPCM PPCM, respectively. Jeder Computer-Nerd oder mathematisch-veranlagter Mensch sollte diese Zahlen erkennen! Wenn nicht, sind sie Potenzen von zwei. Baby! (Wenn Sie immer noch verwirrt, oder fasziniert, oder wollen mehr darüber wissen, warum diese Zahlen ausgewählt wurden. Ingenieur fragen. Oder fragen Sie den Google, gibt es Antworten in auch da.)
Herstellung von Retina Bilder
Mess Bilder in einem Grafikprogramm zu gewährleisten, dass sie für Retina dicht genug sind,
Wenn Sie können, verwenden Sie vektorbasierte Bilder (SVG) oder ersetzen Bilder mit CSS. Diese Formate sind immer skalierbar dank der mathematischen Daten in ihnen enthalten sind, und sind in der Lage sich zu strecken die PPI / PPCM aller Display-Bildschirm anzupassen, ohne die Bildqualität zu opfern. Wenn Sie mit SVG oder CSS für Bilder, congrats! Du bist Retina-ready.
Wo sind wir in Schwierigkeiten geraten, wenn wir Bitmap-Bilder verwenden. Viele gängigen Bildformate speichern Bitmap-Bilder wie JPEG, TIFF, PNG und GIF. Bitmaps sind Bilder von kleinen Punkten, auch Pixel genannt konstruiert, nicht mathematische Punkte wie Vektoren. Mit Bitmaps Größe eines Pixels konstant ist. Dies bedeutet, dass Bitmap-Bilder sind nicht skalierbar. Sie haben wahrscheinlich über dieses Problem kommen, wenn Sie jemals versucht haben, ein Bitmap-Bild größer zu machen und erkannten, dass die größere Version des Bildes sieht, na ja, pixelig. Dies liegt daran, dass die einzelnen Pixel werden in größere Bereiche werden ausgestreckt. Es ist wie eine Tätowierung, wenn Sie in Spitzenform sind dann an Gewicht zunehmen und mit der Tätowierung aussieht ausgestreckt. Das Tattoo hat Set-in-Steingrößen Tintenpunkt und wenn die Haut erstreckt, so dass die Punkte tun.
Nun, da wir wissen, dass Vektor-Bilder können wegen Mathe Magie gedehnt werden und dass die Bitmap-Bilder sind wirklich nur eine Ansammlung von Pixeln, machen sie weiter darüber zu sprechen, wie ein Bitmap-Bild von einem Retina-Bildschirm interpretiert wird.
Wie Bitmap-Bilder erhalten durch Retina-Bildschirme interpretiert
Der Ausgabebereich von einem Pixel auf einer typischen Retina Display paßt tatsächlich vier Bitmap-Pixel. Aus diesem Grunde Retina-Bildschirm Pixel dicht angesehen werden. Auf einer Retina Display, wobei jedes Pixel in einem Bitmap-Bild wird in einen Bereich von vier Pixeln gestreckt (2 x 2) - der Grund Bitmap-Bilder, die auf dem unteren Pixeldichte Bildschirmen scharf aussehen und aussehen „fuzzy“ auf höheren Pixeldichte-Bildschirmen.
Wie man Bitmap-Bilder für Retina Display optimiert
Wenn Sie ein Bitmap-Bild mögen, die 100px von 100px ist auf einem Retina-Display scharf zu sehen, werden Sie mit zusätzlichen Pixel für den Retina-Display arbeiten liefern müssen. Dies wird erreicht, indem das Bitmap-Bild doppelt so groß zu beginnen getan. (In diesem Fall würden wir das Anfangsbild 200px von 200px machen.) Der nächste Schritt beinhaltet eine Programmierung mit dem großen Bild zu nehmen und es skalieren, indem 100px Größe auf die gewünschte 100px nach unten.
Retina Implementation Best Practices
Wie programm große Bitmap-Bilder schrumpfen für Retina-Geräte
Es gibt viele Möglichkeiten, dies zu erreichen. Aber einige sind besser als andere.
Die Ordnung Option
Die bessere Option
Verwenden Sie ein serverseitiges Skript wie Retina-Bild die entsprechende Retina oder Nicht-Retina Bild auf den Bildschirm zu dienen.
Wie man Retina Bilder in einem Content Management System (CMS) verwenden
Wie werden Inhalte Eintrag Menschen in der Lage sein, ihre Köpfe zu wickeln um das alles? Ich habe festgestellt, dass das Beste, was zu tun, um Inhalt Eintrag Menschen zu erklären ist, dass ihre anfänglichen Bilder doppelt so groß ist wie die Größe sein, müssen sie wirklich wollen. Im Content Management System (CMS), ist es am besten, die Mindestgrößenanforderungen der Bildeingabefelder zu definieren, so dass es zur Verfügung immer ein Retina-Bild ist. Nach einem Content-Editor ein großes Bild hochgeladen, können Sie die CMS kümmern Verarbeitung lassen, Komprimieren und Ändern der Größe des Bildes sowohl für Retina und Nicht-Retina-Geräte.
Es gibt einige Plugins für viele, die für Sie die schmutzige Arbeit tun. Hier sind ein paar, die ich verwendet habe, die gut funktionieren: