Wenn Sie schon eine Weile mit Computern und digitalen Bildern beschäftigt sind, insbesondere wenn Sie als Webdesigner oder Fotograf Ihre Fotos online veröffentlichen, haben Sie zweifellos gehört, dass die richtige Auflösung für im Web angezeigte Bilder oder angezeigt wird Auf Computerbildschirmen sind es im Allgemeinen 72 Pixel pro Zoll (ppi).
Möglicherweise haben Sie sogar gehört, dass für Bilder, die auf einem Mac angezeigt werden, 72 ppi korrekt sind, für einen Windows-basierten PC jedoch eine Auflösung von 96 ppi erforderlich ist.
Einige sagen, es ist "ppi" ( Pixel pro Zoll), andere sagen, es ist "dpi" ( Punkte pro Zoll), und das Ganze würde sehr verwirrend werden, wenn es nicht eine kleine Tatsache gäbe - es ist alles völliger Unsinn! In diesem Tutorial erfahren Sie, warum es einfach keine Standard-Web- oder Bildschirmauflösung gibt und warum Sie sich keine Gedanken über die Bildauflösung machen müssen, wenn Ihre Bilder für das Web bestimmt sind!
Eine kleine Geschichte…
Der Ursprung der 72-ppi-Bildschirmauflösung reicht bis in die Mitte der 1980er Jahre zurück, als Apple seine ersten Macintosh-Computer herausbrachte. Diese Computer verfügten über ein eingebautes 9-Zoll-Display mit einer Bildschirmauflösung von 72 Pixel pro Zoll. Warum 72 Pixel pro Zoll? Dies liegt daran, dass die Macintosh-Bildschirme speziell für die Verwendung mit den ImageWriter-Druckern von Apple entwickelt wurden, die eine Druckauflösung von 144 Punkten pro Zoll aufwiesen - genau das Doppelte der Bildschirmauflösung. Dies machte es einfach, die Bildschirmanzeige auf die gedruckte Seite zu skalieren, was bedeutete, dass Ihr Text und Ihre Grafiken auf dem Bildschirm in der exakten Größe angezeigt werden konnten, wie sie beim Drucken erscheinen würden. Später, als Apple begann, größere Bildschirme für den Macintosh zu entwickeln, wurde darauf geachtet, dass die Bildschirmauflösungen auf die gleichen 72 Pixel pro Zoll eingestellt wurden, damit die Benutzer immer eine genaue Vorschau des gedruckten Dokuments auf dem Bildschirm sehen konnten (solange sie es waren) mit einem ImageWriter-Drucker).
Die Bildschirmauflösung von 72 Pixel pro Zoll war jedoch nur bei Apple Standard und hielt nicht lange an. Fremdfirmen, die Monitore für den Macintosh verkaufen, hielten sich nicht an den Standard und konkurrierende PC-Monitore auch nicht. Heute, fast drei Jahrzehnte später, hat sich die Technologie erheblich verbessert, und die Zeiten von Bildschirmen mit einer Auflösung von nur 72 ppi sind lange vorbei. Sogar Apple, die Firma, die das Ganze ins Leben gerufen hat, verkauft ihre Displays jetzt mit viel höheren Auflösungen. Niemand stellt mehr Bildschirme mit 72 ppi her. Niemand verwendet mehr 72-ppi-Bildschirme. Und obwohl diese alte Technologie weit hinter uns liegt, glauben immer noch viele Menschen, dass wir die Auflösung unserer Bilder in Photoshop auf 72 Pixel pro Zoll einstellen müssen, bevor wir sie ins Web hochladen. Die meisten Leute glauben, dass der Grund dafür ist, dass die Bilder auf dem Bildschirm richtig angezeigt werden. Beginnen wir also damit, dass Sie auf einfache Weise nachweisen können, dass Ihr Computermonitor zusammen mit jedem modernen Computermonitor eine Auflösung von deutlich über 72 ppi hat.
Den 72-PPI-Standard auf den Prüfstand stellen
Wie alle anderen heutzutage hat Ihr Computerbildschirm (unabhängig davon, ob es sich um einen eigenständigen Monitor, ein All-in-One-System wie einen iMac oder einen Teil eines Laptops handelt) eine höhere Bildschirmauflösung als 72 Pixel pro Zoll mein Wort dafür zu nehmen. Sie können es einfach selbst testen. Sie benötigen lediglich ein Lineal oder ein Maßband. Wenn Ihnen ein Geschäft einen Computermonitor verkauft, wird die Größe in der Regel anhand der Diagonalen angegeben. Einige gängige Größen sind 17 Zoll, 19 Zoll, 24 Zoll und so weiter. Das ist in Ordnung, aber für unseren Test hier müssen wir uns nicht um diese Zahl kümmern. Was wir herausfinden müssen, ist die tatsächliche Breite Ihres Bildschirms in Zoll. Nehmen Sie dazu einfach Ihr Lineal oder Maßband und messen Sie den Bildschirmbereich von links nach rechts. Stellen Sie sicher, dass Sie nur den Bildschirmbereich selbst messen. Fügen Sie keinen Rand um den Bildschirm ein. Wir benötigen die tatsächliche Bildschirmbreite (Computerbildschirmfoto von Shutterstock):
Messen Sie die Breite Ihres Bildschirms (ohne den äußeren Rand).
Nachdem Sie die Breite gemessen haben, müssen Sie außerdem sicherstellen, dass Ihr Monitor auf die native Anzeigeauflösung eingestellt ist. Hierbei handelt es sich um die tatsächliche Anzahl der Pixel, die Ihr Bildschirm von links nach rechts und von oben nach unten anzeigen kann. Beispielsweise enthält ein Monitor mit einer nativen Anzeigeauflösung von 1920 x 1080 (heutzutage allgemein als "Full HD" bezeichnet) 1920 Pixel von links nach rechts und 1080 Pixel von oben nach unten. Ich verwende derzeit einen Monitor mit einer nativen Anzeigeauflösung von 2560 x 1440, aber mein Laptop hat eine native Anzeigeauflösung von 1920 x 1200, daher variieren die Werte. Daher müssen Sie die native Anzeigeauflösung Ihres spezifischen Monitors kennen und stellen Sie sicher, dass der Monitor auf die Anzeigeoptionen Ihres Betriebssystems eingestellt ist.
Nachdem Sie die tatsächliche Breite Ihres Bildschirms gemessen und sichergestellt haben, dass Ihr Monitor mit der nativen Bildschirmauflösung betrieben wird, können Sie die tatsächliche Bildschirmauflösung (in Pixel pro Zoll) ermitteln, indem Sie einfach die erste Zahl vom nativen Bildschirm eingeben Bildschirmauflösung, die die Breite Ihres Bildschirms in Pixel angibt und durch die Breite Ihres Bildschirms in Zoll dividiert. Zum Beispiel ist meine native Bildschirmauflösung 2560 x 1440, also nehme ich diese erste Zahl, 2560, was der Breite des Bildschirms in Pixeln entspricht, und dividiere sie durch die Breite in Zoll, was in meinem Fall der Fall war 23.4 (oder zumindest ziemlich nah). Mit dem praktischen eingebauten Taschenrechner meines Betriebssystems, 2560 ÷ 23.4 = 109.4, den ich auf 109 abrunden werde. Nur durch diesen schnellen und einfachen Test habe ich bestätigt, dass meine Bildschirmauflösung 109 Pixel pro Zoll beträgt, nicht 72 Pixel pro Zoll. Ihr eigener Test mit Ihrem Bildschirm liefert möglicherweise ein anderes Ergebnis als ich, aber es sei denn, Sie verwenden noch einen dieser Original-Macintosh-Computer aus der Mitte der 80er Jahre, dann liegt dieser weit über 72 ppi.
Wenn Sie möchten, können Sie dasselbe mit der Höhe Ihres Bildschirms tun. Nehmen Sie einfach Ihr Lineal oder Maßband und messen Sie die tatsächliche Höhe des Bildschirms in Zoll (vermeiden Sie erneut den umgebenden Randbereich):
Messen Sie die Höhe Ihres Bildschirms (ohne den äußeren Rand).
Nehmen Sie dann die zweite Zahl aus der nativen Bildschirmauflösung Ihres Bildschirms, die die Höhe in Pixel angibt, und dividieren Sie sie durch die Höhe in Zoll. Auch hier ist meine native Bildschirmauflösung 2560 x 1440, also nehme ich diese zweite Zahl, 1440, und dividiere sie durch meine gemessene Bildschirmhöhe von 13, 2 Zoll. Mit meinem Taschenrechner, 1440 ÷ 13.2 = 109.09, werde ich wieder auf 109 abrunden. Wie wir sehen können, sollten Sie mit der Breite oder Höhe Ihres Bildschirms so ziemlich das gleiche Ergebnis erzielen. In meinem Fall arbeiteten beide mit 109 Pixel pro Zoll und nicht mit 72 Pixel pro Zoll.
Überprüfen wir zum Vergleich die tatsächliche Bildschirmauflösung meines Laptops. Es ist ein MacBook Pro (natürlich von Apple, dem Unternehmen, das uns vor vielen Jahren den ursprünglichen 72-ppi-Standard gab). Mein MacBook Pro hat eine native Bildschirmauflösung von 1920 x 1200. Ich nehme also wie zuvor die erste Zahl, 1920, die mir die Bildschirmbreite in Pixeln angibt, und dividiere sie durch die Breite der Bildschirm in Zoll, die in diesem Fall 14, 4 ist. Also 1920 ÷ 14.4 = 133.3, was ich auf 133 Pixel pro Zoll abrunden werde. Das ist viel höher als 72 und sogar höher als mein eigenständiger Monitor. Ich mache dasselbe mit der Höhe, nehme die Höhe in Pixel (1200) und dividiere sie durch die Höhe in Zoll (9). 1200 ÷ 9 = 133, 3, wiederum auf 133 Pixel pro Zoll gerundet.
Zwei verschiedene Displays mit jeweils zwei unterschiedlichen Bildschirmauflösungen (109 ppi und 133 ppi), die beide deutlich höher als 72 ppi sind und nach Ansicht vieler Menschen die branchenübliche Auflösung für die Anzeige von Bildern im Internet und auf dem Bildschirm darstellen. Wenn mein Bildschirm, Ihr Bildschirm und der aller anderen Bildschirme eine Auflösung von mehr als 72 ppi haben, ganz zu schweigen von der Tatsache, dass beide meiner Bildschirme sehr unterschiedliche Auflösungen hatten und Ihr Bildschirm möglicherweise auch eine andere Auflösung hat, dann natürlich nicht nur gibt es keinen offiziellen standard mehr für die bildschirmauflösung, aber selbst wenn es einen gäbe, wären es nicht mehr 72 ppi. Diese Tage sind wie die ursprünglichen Macintosh-Computer, für die sie entwickelt wurden, Geschichte.
Plugin für Shortcodes, Aktionen und Filter: Fehler im Shortcode (ads-essentials-middle)
Die Bildauflösung wirkt sich auf die Druckgröße und nicht auf die Bildschirmgröße aus
Wenn die Tatsache, dass Computerbildschirme heutzutage alle Bildschirmauflösungen von mehr als 72 ppi haben, Sie nicht davon überzeugt hat, dass es keinen 72-ppi-Bildschirmauflösungsstandard mehr gibt, ist hier eine weitere wichtige Tatsache zu berücksichtigen. Wenn Sie zuvor unser Tutorial Bildauflösung, Pixelabmessungen und Dokumentgröße gelesen haben, wissen Sie bereits, dass die Bildauflösung absolut nichts damit zu tun hat, wie Ihr Bild auf Ihrem Bildschirm angezeigt wird. Tatsächlich hat ein digitales Bild für sich genommen überhaupt keine inhärente Auflösung. Es sind nur Pixel. Es hat eine bestimmte Anzahl von Pixeln von links nach rechts und eine bestimmte Anzahl von oben nach unten. Die Breite und Höhe eines Bildes in Pixeln wird als Pixelgröße bezeichnet, und das ist alles, was einen Computerbildschirm ausmacht.
Die Größe, mit der ein Bild auf Ihrem Bildschirm angezeigt wird, hängt nur von zwei Faktoren ab: den Pixelabmessungen des Bildes und der Anzeigeauflösung Ihres Bildschirms. Solange Sie Ihren Bildschirm auf die zuvor beschriebene native Anzeigeauflösung eingestellt haben, wird ein Bild Pixel für Pixel angezeigt. Mit anderen Worten, jedes Pixel im Bild nimmt genau ein Pixel auf Ihrem Bildschirm ein. Beispielsweise würde ein Bild mit 640 x 480 Pixeln einen Bereich mit 640 x 480 Pixeln auf Ihrem Bildschirm ausfüllen. Ein 800 Pixel breites Banner auf einer Website würde 800 Pixel breit auf dem Bildschirm erscheinen. Nicht mehr und nicht weniger. Unabhängig davon, auf welche Auflösung Sie das Bild in Photoshop eingestellt haben, ob 72 ppi, 300 ppi oder 3000 ppi, hat dies keinerlei Einfluss darauf, wie groß oder klein das Bild auf dem Bildschirm angezeigt wird.
Dies liegt daran, dass die Bildauflösung nur einen Einfluss hat - die Größe des Bildes beim Drucken . Durch Festlegen der Auflösung in Photoshop legen wir fest, wie viele Pixel des Bilds nicht auf dem Bildschirm, sondern auf einem Zoll Papier gedruckt werden sollen. Je mehr Pixel Sie in jeden Zoll Papier drücken, desto kleiner wird das Bild beim Drucken. Und im Allgemeinen ist die Druckqualität umso höher, je mehr Pixel pro Zoll gedruckt werden.
Wir können anhand einer bestimmten Bildauflösung leicht herausfinden, wie groß ein Foto sein wird. Nehmen Sie einfach die Breite des Fotos in Pixel und dividieren Sie sie durch Ihre Bildauflösung. Nehmen Sie dann die Höhe des Fotos in Pixel und dividieren Sie sie ebenfalls durch die Bildauflösung. Wenn Sie ein Bild mit 640 x 480 Pixeln als Beispiel nehmen und die Auflösung in Photoshop auf 72 ppi einstellen, können Sie die Breite und Höhe des Fotos durch seine Auflösung dividieren, um zu bestimmen, dass es mit ungefähr 8, 9 x auf Papier gedruckt wird 6, 7 Zoll. Wenn wir die Auflösung in Photoshop auf 240 ppi erhöhen, was eine häufigere Druckauflösung ist, dann wissen wir, dass das Foto in einer Größe gedruckt wird, wenn wir die Pixelbreite und -höhe durch 240 ppi dividieren von 2, 7 x 2 Zoll, was viel kleiner ist, als wenn wir es mit 72 ppi gedruckt hätten, aber die Gesamtdruckqualität wäre viel besser. Es ist jedoch wichtiger zu verstehen, dass wir durch die Änderung der Auflösung in keiner Weise das Erscheinungsbild des Bildes auf dem Bildschirm beeinflussen.
Um klarer zu sehen, wie sich die Auflösung auf die Druckgröße und nicht auf die Bildschirmgröße auswirkt, habe ich ein Bild in Photoshop geöffnet. Dieser kleine Kerl hat auch versucht, all das 72-ppi-Webauflösungsmaterial zu verstehen, aber es sieht so aus, als ob er es ein wenig überdenkt (denkendes Kinderfoto von Shutterstock):
Die Bildauflösung ist wirklich nicht so kompliziert, aber definitiv ein A für Mühe.
Ich öffne das Dialogfeld "Bildgröße" von Photoshop, indem ich in der Menüleiste oben auf dem Bildschirm zum Menü "Bild" gehe und " Bildgröße" wähle:
Gehen Sie zu Bild> Bildgröße.
Oben im Dialogfeld "Bildgröße" befindet sich der Abschnitt "Pixelmaße", der die Breite und Höhe des Bildes in Pixel angibt. Hier sehen wir, dass mein Foto sowohl eine Breite als auch eine Höhe von 500 Pixeln hat, was es zu einer anständigen Größe für die Anzeige im Web macht. Dies ist der einzige Teil des Dialogfelds "Bildgröße", um den sich Ihr Computerbildschirm kümmert - die tatsächlichen Pixelmaße des Bildes:
Der Abschnitt Pixelmaße zeigt uns die Breite und Höhe in Pixel.
Unterhalb der Pixelmaße befindet sich der Abschnitt Dokumentgröße, in dem angegeben ist, wie groß das Bild derzeit auf Papier erscheinen würde, wenn wir es drucken würden. Dieser Abschnitt befasst sich ausschließlich mit der Druckgröße und hat keinerlei Einfluss darauf, wie das Bild auf dem Bildschirm angezeigt wird. Es ist auch die Heimat der wichtigen Auflösungsoption (der Grund, warum wir alle hier sind!), Die sinnvoll ist, da die Auflösung die Druckgröße und nicht die Bildschirmgröße beeinflusst. Wie wir sehen können, hat Photoshop die Auflösung meines Fotos auf 72 Pixel pro Zoll festgelegt (ja, sogar Photoshop trägt zum Mythos von 72 ppi bei) und direkt über der Auflösungsoption in den Feldern Breite und Höhe Ich kann sehen, dass mein 500 x 500 Pixel großes Foto bei 72 ppi mit 6, 944 x 6, 944 Zoll auf Papier gedruckt wird (500 ÷ 72 = 6, 944):
Im Abschnitt "Dokumentgröße" wird die Druckgröße basierend auf der aktuellen Auflösung angezeigt. Dies hat keine Auswirkung auf die Bildschirmgröße.
Mal sehen, was passiert, wenn ich die Bildauflösung erhöhe. Bevor ich das mache, deaktiviere ich schnell die Option Bild neu abtasten am unteren Rand des Dialogfelds, damit das Bild seine ursprünglichen Pixelmaße beibehält, wenn ich die Auflösung ändere:
Deaktivieren Sie die Option Resample Image.
Wenn das Kontrollkästchen „Bild neu abtasten“ deaktiviert ist, erhöhe ich die Auflösung von 72 Pixel pro Zoll auf 240 Pixel pro Zoll . Im Abschnitt Pixelmaße oben können Sie erkennen, dass sich durch Erhöhen der Auflösung die tatsächlichen Pixelmaße nicht geändert haben. Es sind immer noch 500 x 500 Pixel, was bedeutet, dass der Bildschirm immer noch 500 x 500 Pixel groß ist. Bei 240 ppi wird jetzt auf Papier mit einer Größe von nur 2, 083 x 2, 083 Zoll (500 × 240 = 2, 083) gedruckt . Durch Ändern der Auflösung wurde die Druckgröße des Fotos geändert, sonst nichts:
Das Bild würde jetzt kleiner gedruckt, aber auf dem Bildschirm genau die gleiche Größe von 500 x 500 Pixel beibehalten.
Ich werde die Bildauflösung noch einmal erhöhen, diesmal auf etwas Verrücktes wie 500 Pixel pro Zoll, nur um die Mathematik wirklich einfach zu machen. Ein 500 x 500 Pixel großes Bild, das auf eine Auflösung von 500 Pixel pro Zoll eingestellt ist, wird als 1 x 1 Zoll großes Bild auf Papier gedruckt (500 x 500 = 1). Auch hier haben sich die tatsächlichen Pixelmaße des Bildes nicht geändert. Selbst bei 500 ppi würde mein Bild auf dem Bildschirm nicht größer oder kleiner erscheinen als bei 72 ppi oder 240 ppi oder bei einer beliebigen Auflösung, da es sich immer noch um ein Bild mit 500 x 500 Pixel handelt, unabhängig von der Auflösungseinstellung und den Pixelabmessungen Ihr gesamter Computerbildschirm ist wichtig für:
Mit 500 ppi würde das Bild zwar sehr klein gedruckt, aber immer noch als 500 x 500 Pixel großes Bild auf dem Bildschirm angezeigt.
Abschließend finden Sie hier einen Nebeneinander-Vergleich des Bildes, wie es in allen drei oben genannten Auflösungen angezeigt wird. Ich habe das Bild verkleinert (es ist jetzt nur noch 200 x 200 Pixel groß), damit ich alle drei Versionen nebeneinander anordnen kann, aber die erste Version auf der linken Seite wurde mit 72 ppi gespeichert. Die Version in der Mitte wurde mit 240 ppi und die Version rechts mit 500 ppi gespeichert:
Eine Version des Bildes mit 72 ppi (links), 240 ppi (Mitte) und 500 ppi (rechts).
Wie wir deutlich sehen können, hat die Auflösung keinerlei Einfluss darauf, wie das Bild auf dem Bildschirm aussieht. Alle drei Versionen belegen unabhängig von der Auflösungseinstellung jeweils genau 200 x 200 Pixel. Die Qualität jeder Version ist auch genau gleich. Aufgrund der unterschiedlichen Auflösungseinstellungen wird jede Version in einer sehr unterschiedlichen Größe gedruckt, es spielt jedoch keine Rolle für die Bildschirmgröße oder die Bildqualität.
Obwohl es zweifelhaft ist, dass dieser Unsinn mit 72 ppi Web- und Bildschirmauflösung bald verschwinden wird, hoffe ich, dass dieses Tutorial es zumindest einfacher gemacht hat, zu erkennen, warum es an diesem Punkt tatsächlich Unsinn ist. Computerbildschirme haben heutzutage alle eine höhere Bildschirmauflösung als 72 ppi, und die Bildauflösungsoption in Photoshop wirkt sich nur auf die Druckgröße eines Fotos aus, nicht auf dessen Bildschirmgröße.
Jedes Foto mit Pixelmaßen, die klein genug sind, um im Web angezeigt zu werden, ist zu klein, um eine qualitativ hochwertige Version in einer nützlichen Größe herunterzuladen und auszudrucken. Wenn Ihr Foto also nur auf dem Bildschirm angezeigt wird, ist dies der Fall Es ist im Internet, in einer E-Mail oder wie auch immer der Fall sein mag, es gibt einfach keinen logischen Grund, warum Sie die Auflösung in Photoshop auf 72 ppi einstellen müssten. Wenn Sie das Foto nicht drucken, müssen Sie sich überhaupt keine Gedanken über die Bildauflösung machen. Und da haben wir es!