Der Mythos von DPI
Die Größe eines Bildes in einem Website-Layout ist wichtig. Von der richtigen Ausrichtung bis hin zur richtigen Menge an Leerraum ist die richtige Größenanpassung von Fotos und Grafiken unerlässlich, um ein ausgewogenes Erscheinungsbild zu erzielen.
Bilder im Internet werden in Pixel gemessen . Viele Menschen haben jedoch die Mühe, ihre Bilder auf 72 Punkte pro Zoll zu setzen (
Das Missverständnis bezüglich der Auflösung in digitalen Bildern, die an das Web gebunden sind, besteht darin, dass sie eine bestimmte Anzahl von Punkten pro Zoll treffen müssen.
Beim Drucken wirken sich Pixel pro Zoll und Punkte pro Zoll auf die Größe eines Bilds auf einer Seite aus. DPI gilt nicht für das Layout im Internet.
Wenn jemand ein Bild in 72 DPI konvertiert, fügen sie einen zusätzlichen Schritt ohne Nutzen hinzu. Webseiten werden in Pixeln gemessen, nicht in realen Einheiten wie Zoll.
Wenn jemand nach einem Web-Bild fragt, das beispielsweise zwei Zoll breit ist, schätzen sie, wie es auf ihrem eigenen Monitor aussehen würde. Ohne die Pixelgröße des Bildes zu ändern, würde dieses Bild auf verschiedenen Monitoren größer oder kleiner erscheinen - und würde sogar auf demselben Monitor bei einer anderen Auflösungseinstellung anders aussehen.
Pixelgröße hängt vom Kontext ab
Ein Pixel (kurz für "Bildelement") ist die kleinste Maßeinheit auf einem Raster, die ein digitales Bild anzeigt. DPI misst, wie groß diese Pixel oder Punkte sind, wenn sie gedruckt werden.
Das Bild unten wird in verschiedenen DPI angezeigt.
36 DPI
150 DPI
3,096 DPI
Laden Sie sie herunter und öffnen Sie sie in einem Bildbearbeitungsprogramm, um selbst zu sehen. Alle drei sehen gleich aus, weil sie in der Größe geändert wurden und nicht neu abgetastet wurden.
Größe ändern Pixelgrößen; Resampling Ändert die Anzahl der Pixel
Es gibt zwei Möglichkeiten, ein Bild zu vergrößern: Fügen Sie mehr Pixel hinzu oder vergrößern Sie die Pixel. Ebenso können Sie die Bildgröße verringern, indem Sie Pixel abschneiden oder Pixel verkleinern. Aber Schrumpfen und Rasieren sind zwei verschiedene Prozesse.
Wie oben dargestellt, verändert die Größenänderung eines Bildes die Größe seiner Pixel und nicht die Anzahl der Pixel. Wir erhöhen oder verringern die Anzahl der Pixel nicht, sondern ändern nur, wie groß diese Pixel beim Drucken sind. Es ist eine inverse Beziehung: Bilder mit größeren Pixeln haben beim Drucken eine geringere Pixeldichte (weniger Pixel in der gleichen Anzahl von Zoll).
Wie oben dargestellt, ändert das Resampling die Bildgröße, indem es die Anzahl der Pixel erhöht oder verringert. Bilder mit mehr Pixeln enthalten mehr Informationen und sorgen oft für sattere Grafiken.
Beim Webdesign geht es um das Resampling, nicht um die Größenänderung, da jedes Pixel auf einer Webseite immer die gleiche Größe hat. Eine Webseite mit einer Breite von 800 Pixeln kann Bilder mit einer Breite von bis zu 800 Pixeln aufnehmen. Jedes Pixel breiter zu machen ändert nichts daran, dass das Layout nur 800 davon enthalten kann.
Sie können ein Bild auf dem Bildschirm nicht größer erscheinen lassen, indem Sie die Größe seiner Pixel ändern, da jedes Pixel auf demselben Bildschirm immer die gleiche Größe hat.
Größenänderung und Resampling in Photoshop
Das Feld "Bildgröße" von Photoshop ( Bild, Bildgröße ) steuert sowohl die Größenanpassung als auch die Neuberechnung von Bildern.
Das Kontrollkästchen "Resample" ändert, wie viele Pixel in einen linearen Zoll passen - im wahrsten Sinne des Wortes die Pixel pro Zoll. Wenn wir das Resampling ausschalten, besteht die einzige Möglichkeit, die Bildgröße zu ändern, darin, die Pixel zum Drucken zu vergrößern.
Wenn das Kontrollkästchen "Resampling" nicht aktiviert ist, ändert das Ändern des Felds "Auflösung" die physische Größe des Bilds beim Drucken, nicht jedoch die Anzahl der Pixel. Beim Drucken erscheint ein Bild größer oder kleiner. Auf einer Webseite würde es die gleiche Größe haben.
Ein Experiment
Ob ein DPI in Web-Layouts eine Rolle spielt, kann durch ein kleines Experiment herausgefunden werden. Wenn wir ein Bild von 300 x 100 Pixel bei 72 DPI auf 300 x 100 Pixel bei 144 DPI ändern, wie viele Pixel hätten wir?
- Machen Sie ein Bild mit 300 Pixel Breite und 100 Pixel Höhe, bei 72 DPI .
- Lass uns etwas Mathe machen. Wie viele Pixel wäre das?
- Verändern Sie nun das Bild bei 144 DPI auf 300 x 100 Pixel.
- Lasst uns etwas mehr Mathe machen. Wie viele Pixel ist das?
Die Antworten sind:
- 300 x 100 = 30.000
- 300 x 100 sind immer noch 30.000
Pixel pro Zoll auf dem Bildschirm
Die Anzahl der Pixel pro Zoll ist online noch relevant, aber die DPI-Einstellungen haben keinen Einfluss darauf, wie ein Bild angezeigt wird.
Computermonitore können physikalisch in Zoll gemessen werden, und jeder zeigt eine bestimmte Anzahl von Pixeln an. Nehmen wir an, ein 19-Zoll-Monitor zeigt 1280 x 1024 Pixel. Der Benutzer könnte es so ändern, dass 1600 x 1200 Pixel angezeigt werden, wodurch sein PPI (dh das Hinzufügen von mehr Pixeln in der gleichen Anzahl von Zoll) erhöht wird. Der wichtige Unterschied beim Drucken ist, dass Sie die Pixel pro Zoll eines Bildes steuern können.
Sie können dies auf den meisten modernen Computern versuchen. Auf einem Mac gehen Sie zum Apple-Menü, "Systemeinstellungen" , und klicken Sie dann auf "Anzeigen", um die verschiedenen Auflösungen zu sehen, auf denen Sie Ihren Monitor einstellen können. Unter Windows klicken Sie mit der rechten Maustaste auf den Desktop und wählen Sie "Personalisieren" und dann "Anzeigeeinstellungen". Ändern Sie die Bildschirmauflösung (Anzahl der Pixel) und sehen Sie zu, wie die Objekte auf Ihrem Mac oder PC größer oder kleiner werden.
Offensichtlich ändert sich Ihr Monitor nicht in der Größe. Wenn Sie jedoch ein Lineal auf dem Bildschirm halten, sehen Sie, dass die Größe der Symbole und Fenster umgekehrt proportional zur Anzahl der angezeigten Pixel ist. Zum Beispiel ein 13 "-Laptop, ein 17" CRT-Monitor und ein 21 "-Flachbildschirm können alle einen Desktop darstellen, der 1024 x 768 Pixel misst. Mehr Pixel bedeuten kleinere Symbole; Weniger Pixel bedeuten größere Symbole. Mehr Pixel auf demselben Monitor bieten eine höhere Pixeldichte. weniger Pixel sind niedriger.
Der Unterschied wird bei anderen Arten von Displays deutlicher:
- Eine digitale Werbetafel, die 47 x 12 Fuß misst, könnte nur 888 x 240 Pixel (ungefähr 1,6 PPI) verwenden.
- Ein iPhone Bildschirm heute misst 2 x 3 Zoll und hält 320 x 480 Pixel (ca. 160 PPI) .
Eine einzelne PNG-Datei mit den Maßen 100 x 100 Pixel würde sowohl auf die Werbetafel 888 x 240 als auch auf das iPhone 320 x 480 passen. Aber es würde auf der Reklametafel viel größer erscheinen, weil die Pixel des Brettes hundertmal größer sind als die des iPhones (1.6 vs. 160).
Die folgende Abbildung zeigt zwei Geräte mit unterschiedlichen Pixeldimensionen.
Das gleiche Bild wird auf zwei verschiedenen Displays angezeigt. Die Unterschiede im PPI der einzelnen Bildschirme lassen das Bild auf dem rechten Display größer erscheinen, obwohl insgesamt weniger Pixel vorhanden sind.
Sie können das selbst testen:
- Erstellen Sie ein JPG mit einer Pixeldichte von 960 x 100 Pixel.
- Messen Sie es von Hand mit einem Lineal.
- Betrachten Sie dasselbe Bild auf einem Computer mit einem größeren oder kleineren Monitor. Wenn Sie beispielsweise das Bild auf einem 20-Zoll-Bildschirm erstellt haben, testen Sie es auf einem 13-Zoll-Laptop.
- Drucken Sie die gleiche Anzahl von Pixeln bei unterschiedlichen Pixeldichten, um verschiedene Größen auf Papier zu sehen.
Das Ergebnis ist, dass dieses eine Bild die gleiche Anzahl von Pixeln, aber eine andere Breite in Zoll haben würde. Das Layout der Website würde trotz identischem Code in verschiedenen Größen erscheinen. (Für einen Extremfall sehen Sie sich die gesamte Seite eines iPhone an; 960 Pixel passen zu drei Zoll oder weniger, ohne dass die Datei selbst geändert wird.)
Warum 72 ist signifikant
Viele Dateiformate, einschließlich JPG, TIF und PSD, speichern die Einstellung für die Pixeldichte eines Bildes. Wenn Sie ein JPG mit 200 Pixel / Zoll speichern, bleibt es bei 200.
Andere Formate, einschließlich GIF und PNG, verwerfen die Pixeldichte. Wenn Sie ein 200 DPI-Bild als PNG speichern, wird dieses DPI nicht gespeichert. Viele Bildbearbeitungsprogramme, einschließlich Adobe Photoshop, gehen davon aus, dass ein Bild 72 ist
Zweiundsiebzig ist eine magische Zahl in Druck und Typografie. 1737 verwendete Pierre Fournier Einheiten, die Ciceros genannt wurden , um den Typ zu messen. Sechs Ciceros waren 0,998 Zoll.
Um 1770 verwendete François-Ambroise Didot etwas größere Ciceros, um dem Standard-französischen "Fuß" zu entsprechen. Didots Pica war 0,1766 Zentimeter lang und gleichmäßig in 12 Abschnitte unterteilt. Heute nennen wir sie Punkte.
Im Jahr 1886 etablierte das American Point System eine "Pica" als 0,166 Zoll. Sechs davon sind 0,996 Zoll.
Keine der Einheiten ist jemals weit von 12 Punkten pro Pica abgewichen: 6 Picas pro Zoll = 72 Punkte pro Zoll. Es war ein wichtiger Standard, als Apple 1984 den ersten Macintosh-Computer vorstellte. Die Benutzeroberfläche des Mac wurde entwickelt, um Menschen dabei zu helfen, den Computer mit der physischen Welt in Verbindung zu bringen. Softwareingenieure verwendeten die Metapher eines Schreibtisches, um die arkanen Funktionen eines Computers zu beschreiben, bis hin zu "Papier", "Ordner" und "Abfall" -Symbolen.
Jedes Pixel auf dem Mac-Bildschirm mit 9 Zoll (diagonal) und 512 x 342 Pixeln maß genau 1 x 1 Punkt. Halten Sie ein Lineal an das Glas, und Sie würden sehen, dass 72 Pixel tatsächlich 1 Zoll füllen würden. Wenn Sie auf diese Weise ein Bild oder ein Stück Text drucken und es neben dem Bildschirm halten, haben das Bild und die Druckkopie die gleiche Größe.
Aber frühe digitale Bilder waren klobig und gezackt. Mit verbesserter Bildschirmtechnologie und verbessertem Speicher konnten Computer mehr Pixel auf demselben Monitor anzeigen. Die Übereinstimmung eines Ausdrucks mit dem Bildschirm wurde noch unsicherer, wenn Raster- und Vektor-Apps es Benutzern erlaubten, Pixel näher heranzuzoomen und zu untersuchen. Mitte der 1990er Jahre konnte Microsoft Windows zwischen 72 und 96 Pixel pro Zoll auf dem Bildschirm wechseln. Dies machte kleinere Schriftgrößen lesbarer, weil mehr Pixel pro Punktgröße verfügbar waren.
Heute verstehen Designer und Kunden, dass die Größe der Elemente auf dem Bildschirm nicht absolut ist. Unterschiede in der Bildschirmgröße und Zoom-Funktionalität sind alltäglich. Aber 72 ist immer noch der Standard.
Höhere Bildschirm-PPI bedeutet bessere Lesbarkeit bei kleineren Punktgrößen
Bildschirme mit einem höheren PPI sind gut für die Lesbarkeit. Mehr Pixel pro Zoll erleichtern das Lesen von Buchstaben. Es bedeutet auch, dass Bilder und Text größer (in Pixel) sein müssen, um lesbar zu sein.
Das obige Textbeispiel wurde von zwei verschiedenen Bildschirm-PPI-Einstellungen geändert. Die obere Reihe hat kleinere Pixel (dh einen höheren PPI auf dem Bildschirm), so dass 8 Punkte die kleinste lesbare Schriftgröße sind. Der Text in der unteren Zeile ist unter 10 Punkten kaum lesbar.
Da PC-Monitore Mitte der 1990er Jahre die Pixeldichte von Mac-Monitoren übertrafen, wiesen auf Windows gebaute Websites kleinere Schriftgrade auf, was Mac-Nutzern sehr zu schaffen machte. Heute genießen Bildschirme für beide Plattformen Pixeldichten, die hoch genug sind, um Unterschiede zu vermeiden.
Elastische Web-Bilder mit modernen Browsern
Wir wissen jetzt, dass DPI allein die Größe eines Bildes im Web nicht ändert, und wir haben keine Kontrolle darüber, auf welchem Gerät ein Bild angezeigt wird. Sind also die Pixelmaße eines Bildes das einzige, was zählt? Ja für jetzt.
Flüssigkeitsbreiten-Layouts, die sich je nach Größe des Browsers ändern, können eine Reihe von Geräten und Monitoren besser aufnehmen. Moderne Browser, von FireFox 3, Safari 3 und Internet Explorer 7 und höher, sind besser als ältere Versionen bei der Skalierung von Bildern im laufenden Betrieb. Das max-width Die CSS-Eigenschaft zwingt Bilder so, dass sie in ihren Container passen, aber nicht über ihre tatsächliche Größe hinaus wachsen. Beispielsweise:
p { width: 25% } / * Ein Viertel des Inhaltsbereichs * / img { max-width: 100% }
p { width: 50% } / * Die Hälfte des Inhaltsbereichs * / img { max-width: 100% }
p { width: 75% } / * Drei Viertel des Inhaltsbereichs * / img { max-width: 100% }
/ * Keine Breite für den Absatz gesetzt * / img { max-width: 100% }
Hier sehen wir ein 800 Pixel breites Bild passt in vier verschieden große Absatzelemente. Wenn die Seitenbreite flexibel wäre, würde die Größenanpassung des Browserfensters das Bild erweitern - aber nicht die ursprünglichen Abmessungen von 800 x 323 Pixeln. Es würde niemals von einer Überexpansion verzerrt oder "gepixelt" werden.
Das Vorbereiten von Bildern für das Web bedeutet eine Planung in Pixel. Wenn jemand nach einer 2-Zoll-Grafik für das Web fragt, nicht nach dem Ausdruck, frage ihn: "Wie groß sind deine Pixel?"
Geschrieben exklusiv für WDD von Ben Gremillion . Ben ist ein freiberuflicher Webdesigner, der Kommunikationsprobleme mit besserem Design löst.
In welchen Medien zählt die Auflösung? Wie lassen sich Online-Bilder am besten dimensionieren? Teilen Sie Ihre Ideen unten.