Jeder Designer kennt diesen Satz: „Ich brauch die Bilder in 72 dpi für Web“.

Egal, ob man seine Weblayouts vorzugsweise in Photoshop, Indesign oder einem anderen Programm seiner Wahl gestaltet, so speichert man seine Bilder am Ende immer mit den gewünschten Pixelmaßen und einer Auflösung von 72 dpi „für Web optimiert“ und lädt sie auf die Website oder schickt sie dem Programmierer.

Warum aber eigentlich nur 72 dpi?
Woher kommt diese Zahl? 

Zunächst einmal sei gesagt, dass die Angabe „dpi“ zur Beschreibung einer Bildauflösung/bzw. einer Display/Bildschirmauflösung falsch ist. „dpi“ heißt „Dots per Inch“ und beschreibt ursprünglich die Fähigkeit von Druckern, mit welcher Dichte sie Bilder auf Papier bringen können. Im Normalfall sollten Bilder für den Druck eine Auflösung von mindestens 300 „dots per inch“ besitzen (kommt natürlich aufs Medium an, Messebanner brauchen eine deutlich geringere Mindestauflösung), damit Sie vom Drucker scharf wiedergegeben werden können.

Spricht man aber von der Auflösung eines Bildes am Bildschirm, so ist der Ausruck „Pixel per inch“, also „ppi“ korrekt.

Zurück zur Frage, woher die Zahl „72“ ihren Ursprung hat. Hierzu müssen wir einen Sprung zurück in die Vergangenheit machen: ins Jahr 1984. In diesem Jahr erschien der original Macintosh Computer, welcher ein 9 Inch Display mit 512 x 324 Bildpunkten hatte. Diese Auflösung entsprach „72 Pixel pro Inch“. Genaugenommen müsste man sagen „Inch hoch 2“, da sich die Angaben “ppi” und “dpi” eher auf eine Fläche beziehen, ähnlich wie Quadratmeter.

Nun stellt sich die Frage, warum die Erfinder des Macintosh sich für exakt dieses Pixelverhältnis entschieden haben. Der Grund dafür ist einfach – in den 80er Jahren, der Anfangszeit der Personal Computer, druckten die Heimcomputer (damals Nadeldrucker) in einer Auflösung von 72 dpi. Damit der Benutzer am Bildschirm exakt einschätzen konnte, wie sein gedrucktes Papier später aussieht, entschied man sich dafür, die Bildschirmauflösung den damaligen Druckern anzupassen.

 

Warum 72 dpi - woher kommt diese Zahl

 

In den 90er Jahren wurden 72 ppi Monitore dann schrittweise ersetzt durch 96 ppi Monitore, da in dieser Auflösung Texte deutlich besser dargestellt werden können und die Lesbarkeit erleichtert wird.
Heutige Monitore (2018) haben je nach Hersteller und Modell verschiedene Auflösungen, von 96 ppi bis hin zu 400 ppi:

MacBook Pro 15“ 2.880 x 1.800: 220.5 ppi (Retina)
Asus Zenbook Prime 1.920 x 1.080: 190 ppi
Lenovo T61p 1.920 x 1.080: 147 ppi
MacBook Pro (2011) 1.920 x 1.200: 133 ppi
MacBook Pro (2014) 2.560 x 1.600: 227 ppi (Retina)
iMac (2014) 5.120 x 2.880: 217 ppi (Retina)
Mac Cinema Montior (2005) 1.680 x 1.50: 96 ppi
iPhone 6 Plus 1.920 x 1080: 401 ppi (Retina)

Wenn man nun bedenkt, dass bei einer 96 ppi Auflösung mehr Pixel pro Inch dargestellt werden können, als bei 72 ppi, dann ist es nur logisch, dass Schriften und Bilder auch entsprechend kleiner dargestellt werden.

Webdesign - Pixeldichte, woher kommt die Zahl 72 dpi?

72 dpi = größere Darstellung des Inhalts

Das wiederum bedeutet, dass – anders als im Druck – Schriftgrößen im Web oder auf mobilen Geräten keine verbindlichen Größenangaben sind. Auf dem einem Gerät hat eine bestimmte Schrift eine Höhe von 5 mm, auf einem anderen Gerät mit höherer Auflösung nur 4 mm, da die Pixeldichte höher ist. Dieser Umstand macht es für Designer schwer, sich das spätere Endergebnis des Layouts exakt vorzustellen, da Bilder und Texte auf fast jedem Gerät verschieden groß dargestellt werden. Mit der Einführung von Retina Displays 2012 (?) kam ein zusätzlich erschwerender Faktor hinzu: die Auflösung/die Pixeldichte ist hier so hoch, dass Inhalte eigentlich viel zu klein angezeigt werden würden, und deswegen interpoliert werden müssen, um ein normales Schriftbild zu generieren. Mehr zu diesem Thema gibt es in unserem Blogbeitrag “Was bedeuten eigentlich Retina und Amoled?”.

„Speicher mir mal das Bild in 72 dpi“
Was aber genau bedeuted das eigentlich für die Datei selbst? Selbstverständlich ist eine Datei mit 500×500 Pixel und einer Auflösung von 300 dpi größer, als die gleiche Datei mit 72 dpi. Oder?

Hier in kurzer Vergleich beim Anlegen einer Photoshop-Datei:

Webdesign mit Photoshop - warum Webbilder in 72 dpi speichern?

 

Wie man sehen kann, hat die Pixeldichte keine Relevanz für die Größe der Datei. Allein die absolute Pixelzahl ist ausschlaggebend für die Größe des Bildes und der Datei. Denn im Web oder auf mobilen Endgeräten bestimmt die Pixeldichte des Displays selbst die angezeigte Größe der Bilder, egal, welche Auflösung in der Datei hinterlegt wurde.

Warum nutzen Grafikprogramme immer noch 72 dpi für Webgrafiken?

Ganz einfach: 72 dpi ist ein alter Standard, der sich aus der Zeit der ersten Personalcomputer bis heute gehalten hat, sozusagen eine Konvention. Eigentlich bedeutet 72 dpi nur: “egal, es ist für digitale Inhalte”. Es könnte theoretisch beim Erstellen einer neuen Datei ein Auswahlfeld erscheinen, bei dem man zwischen “Bild für Print” oder “Bild für Web” unterscheiden müsste. Ist “Bild für Web” aktiviert oder ausgewählt, so könnte das Feld “Auflösung” erst gar nicht erscheinen, und Photoshop speichert im Hintergrund irgendeinen Wert.

Programme, die für das Betrachten am Bildschirm optimiert sind (zb: Alle Browser) ignorieren die dpi-Angaben von Photoshop und Indesign (und anderen Programmen) und bilden ein Bildpixel immer auf ein Bildschirmpixel ab. Da aber Dateien irgendeinen Wert im Feld „Auflösung“ benötigen (für Print wird diese Angabe ja auch benötigt), wird sozusagen als Standard 72 dpi eingetragen.

Man könnte also sagen, dass die Angabe “72 dpi” ein Relikt aus alten Zeit ist – jedenfalls wenn es um das Bearbeiten von Bildern für digitale Medien geht.