{"id":798,"date":"2019-12-03T21:02:59","date_gmt":"2019-12-03T20:02:59","guid":{"rendered":"https:\/\/mainetcare.de\/?p=798"},"modified":"2024-08-04T11:44:05","modified_gmt":"2024-08-04T09:44:05","slug":"wie-gross-muessen-eigentlich-fotos-sein-die-man-am-rand-oder-in-einer-galerie-platziert","status":"publish","type":"post","link":"https:\/\/mainetcare.de\/website-pflege\/wie-gross-muessen-eigentlich-fotos-sein-die-man-am-rand-oder-in-einer-galerie-platziert\/","title":{"rendered":"Wie gro\u00df m\u00fcssen eigentlich Fotos sein, die man am Rand oder in einer Galerie platziert?"},"content":{"rendered":"\n

1. Welche Gr\u00f6\u00dfe?<\/h2>\n\n\n\n

Aus technischer Sicht allgemeing\u00fcltige Vorgaben zu machen f\u00fcr die Mindest- oder H\u00f6chstgr\u00f6\u00dfen von Bildern im Web ist zunehmend schwierig. Die sich weiterentwickelnde Display-Technik mit immer besserer Darstellungsqualit\u00e4t einerseits und immer h\u00f6here Geschwindigkeiten bei der Daten\u00fcbertragung andererseits machen sowohl die immer kleinere, als auch immer gr\u00f6\u00dfere Darstellung von Bildern in sinnvoller Weise m\u00f6glich, von Thumbnails mit winzigen 80 Pixel Kantenl\u00e4nge bis zu bildschirmf\u00fcllenden Fotos. Es gibt aber nat\u00fcrlich technische Belange, die es bei der Auswahl der richtige Bildgr\u00f6\u00dfe zu beachten gilt.<\/p>\n\n\n\n

Bei der Frage der Bildgr\u00f6\u00dfe ist zun\u00e4chst zwischen der Dateigr\u00f6\u00dfe und der Darstellungsgr\u00f6\u00dfe der Bilddatei zu unterscheiden. Beide Gr\u00f6\u00dfen h\u00e4ngen zusammen: Die Bitmap-Datei besteht aus einer bestimmten Anzahl von Bildpunkten, von denen jeder einen bestimmten Farbwert haben kann. Somit nimmt das Bild nach Einbindung in die Website den Platz der entsprechenden Anzahl von Bildschirmpunkten ein – das ist die Darstellungsgr\u00f6\u00dfe. Jeder der Bildpunkte wird mit einem passenden Zahlenwert f\u00fcr seine Farbe in einer Bilddatei gespeichert. Dabei kommen verschiedene Methoden zur Kompression, also zur Verringerung der Datenmenge, zum Einsatz – so ergibt sich die Dateigr\u00f6\u00dfe.<\/p>\n\n\n\n

Gro\u00df dargestellte Bilder sehen toll aus, am besten mit vielen Farben und wenig Kompression. Die dabei anfallenden Datenmengen gehen aber zulasten der \u00dcbertragungszeit der Bilddatei. Da die Ladezeit aber ebenfalls ein wichtiges Qualit\u00e4tskriterium einer Website ist, sucht der ge\u00fcbte Web-G\u00e4rtner stets den optimalen Kompromiss von m\u00f6glichst hoher Darstellungsqualit\u00e4t bei m\u00f6glichst kleiner Dateigr\u00f6\u00dfe.<\/p>\n\n\n\n

Bei der Aufbereitung von Bilddateien f\u00fcr die Ver\u00f6ffentlichung im Web ist es zun\u00e4chst wichtig festzulegen in welcher Pixelgr\u00f6\u00dfe das Bild nach der Ver\u00f6ffentlichung auf dem Bildschirm dargestellt werden soll. Soll zum Beispiel ein vorhandenes Bild ersetzt werden, so empfiehlt es sich, die Pixelgr\u00f6\u00dfe der zu ersetzenden Grafik zu ermitteln und als Zielgr\u00f6\u00dfe f\u00fcr das neue Bild zu verwenden. (Praktisch gel\u00f6st zum Beispiel im Browser Firefox: Rechtsklick auf das Bild -> “Grafik-Info anzeigen”. Der “Inspektor”, der inwzischen in vielen Browser-Programmen als Teil der Entwicklerfunktionen an Bord ist, hilft ebenfalls mit Informationen. Auch ein Bildschirmlineal, wie das als Plugin f\u00fcr diverse Browser verf\u00fcgbare “Measure-it”, leistet gute Dienste.)<\/p>\n\n\n\n

Wer die letztliche Ausgabegr\u00f6\u00dfe seiner Web-Grafiken kennt und die Bilder in dieser Pixelgr\u00f6\u00dfe bereitstellt, macht generell nichts verkehrt. Lange Zeit konnte man es immer auch direkt sehen, wenn Bilder in einem anderen Ma\u00dfstab als 1:1 im Browser dargestellt wurden, ob vergr\u00f6\u00dfert oder verkleinert: Es sah immer nachteilhaft aus, verschwommen, verrauscht und pixelig. Die goldene Regel, die Grafiken von vornherein auf die Ausgabegr\u00f6\u00dfe zu bringen und nicht das Darstellungsprogramm – also den Browser – die Skalierung \u00fcbernehmen zu lassen, hat nach wie vor ihre Berechtigung.<\/p>\n\n\n\n

Ein bisschen gewandelt hat sich das Bild aber in j\u00fcngerer Vergangenheit schon. Die F\u00e4higkeiten der verschiedenen Browser-Programme bei der Skalierung von Bilddateien haben eindeutig zugenommen. Die vergr\u00f6\u00dferte Darstellung von Bildern sollte man nach wie vor vermeiden, denn dabei muss das Darstellungsprogramm im Prinzip Bildpunkte dazuerfinden, die in der Bilddatei nicht angelegt sind – das geht naturgem\u00e4\u00df zulasten der Qualit\u00e4t. Die Darstellung von Bildern in einer geringeren als der originalen Pixelgr\u00f6\u00dfe gelingt den verbreiteten zeitgem\u00e4\u00dfen Browsern aber achtbar.<\/p>\n\n\n\n

Warum aber sollte man Bilder in einer gr\u00f6\u00dferen als der vorgesehenen Pixelgr\u00f6\u00dfe bereit stellen, wenn das doch andererseits die Dateigr\u00f6\u00dfe unn\u00f6tig wachsen l\u00e4sst? Das liegt ganz einfach daran, dass in Zeiten flexiblerer, wom\u00f6glich responsiver, Gestaltungen inklusive Lightboxen und Thumbnail-Vorschauen sich eine eindeutige Darstellungsgr\u00f6\u00dfe f\u00fcr jedes Bild sich gar nicht mehr so ohne Weiteres bestimmen l\u00e4sst.<\/p>\n\n\n\n

Es kann also erforderlich und unter Umst\u00e4nden sogar f\u00fcr die Zugriffszeiten f\u00f6rderlich sein, gr\u00f6\u00dfere Bilddateien – auch – verkleinert darstellen zu lassen (und so zum Beispiel zeitraubende zus\u00e4tzliche HTTP-Zugriffe f\u00fcr das Nachladen gr\u00f6\u00dferer Bildversionen einzusparen). Zielwert f\u00fcr die Berechnung der Pixelgr\u00f6\u00dfen von Web-Grafiken sollte also f\u00fcr die meisten \u00fcblichen Anwendungen die gr\u00f6\u00dfte erforderliche Darstellungsgr\u00f6\u00dfe sein.<\/p>\n\n\n\n

2. Welches Dateiformat?<\/h2>\n\n\n\n

Wenn die gew\u00fcnschte Grafik in der richtigen Pixelgr\u00f6\u00dfe vorliegt, stellt sich die n\u00e4chste Frage: In welchem Dateiformat soll die Grafik jetzt am besten f\u00fcr die Darstellung im Web gespeichert werden? Zur Auswahl stehen bekanntlich im Wesentlichen die verbreiteten Formate JPEG, GIF und PNG.<\/p>\n\n\n\n

GIF<\/strong> stellt Bitmaps mit bis zu 256 verschiedenen Farben dar. Eine dieser 256 Farben kann als transparent definiert werden. Das GIF sieht die M\u00f6glichkeit zur Speicherung automatisch ablaufender Bildfolgen innerhalb einer Bilddatei vor, was animierte Grafiken erm\u00f6glicht. Die Daten werden verlustfrei komprimiert, die Kompression ist am effektivsten bei gro\u00dffl\u00e4chig gleichfarbigen Motiven mit wenig optischem Rauschen.<\/p>\n\n\n\n

Das PNG<\/strong>-Format kennt verschiedene Farbtiefen (von 8-Bit = 256 Farben bis zu 24 Bit True Color), bietet zudem 8-Bit = 256 Abstufungen extra f\u00fcr die Speicherung von abgestuften Transparenzen und komprimiert ebenfalls verlustfrei.<\/p>\n\n\n\n

JPG<\/strong> beherrscht in der im Web verbreiteten 24Bit True Color Variante \u00fcber 16,7 Mio. verschiedene Farbwerte und der Bildinhalt wird dabei mit eine Reihe verschiedener verlustbehafteter Verfahren komprimiert, was dazu f\u00fchrt, dass bei starker Kompression die Darstellungsqualit\u00e4t zunehmend sichtbar leidet. Transparenzen werden von diesem Format nicht unterst\u00fctzt.<\/p>\n\n\n\n

Um unter diesen M\u00f6glichkeiten die richtige auszuw\u00e4hlen wirft der Web-G\u00e4rtner zun\u00e4chst einen Blick auf den Inhalt der Bild-Datei. Handelt es sich um ein eher schlichtes grafisches Motiv oder gar Text-Element mit gr\u00f6\u00dferen einfarbigen Fl\u00e4chen und geraden, kontrastreichen Kanten, wie typischerweise zum Beispiel bei Logo-Grafiken, so ist PNG oder GIF das Mittel der Wahl. Die einfarbigen Fl\u00e4chen k\u00f6nnen mit diesen Formaten gut komprimiert werden, die Kanten bleiben dabei scharf und kontrastreich. Gerade durch bewusste Reduktion der verwandten Farbpalette k\u00f6nnen sehr kleine Dateigr\u00f6\u00dfen erreicht werden.<\/p>\n\n\n\n

Das JPEG-Format w\u00fcrde bei derartigen Motiven im Rahmen der Kompression sichtbare Verwischungen und Unsch\u00e4rfen gerade an den Kanten erzeugen ohne dabei Vorteile in der Dateigr\u00f6\u00dfe zu erreichen.<\/p>\n\n\n\n

Anders sieht es aus, sobald es um komplexere, kleinfl\u00e4chigere und buntere Motive wie zum Beispiel Fotos handelt. Hier spielt das JPEG-Format seine St\u00e4rken aus und erzeugt ansehnliche Bilddateien bei deutlicher Dateigr\u00f6\u00dfenreduktion. Wie weit man hier mit dem Kompressionsgrad gehen kann, bevor die Qualit\u00e4t sichtbar abnimmt, h\u00e4ngt vom jeweiligen Motiv ab und ist im Zweifel durch Experimentieren zu ermitteln – oder man h\u00e4lt sich einfach an “sichere” moderate Kompressionseinstellungen.<\/p>\n\n\n\n

PNG ist zu qualitativ gleichwertiger Darstellung von Fotos in der Lage, kann jedoch bei den erzielten Dateigr\u00f6\u00dfen bei solchen Motiven nicht mithalten. In GIF w\u00fcrde die zwangsweise Reduktion der Farbtiefe auf 256 Farben oft zu sichtbaren Qualit\u00e4tsverlusten f\u00fchren.<\/p>\n\n\n\n

Beispiel 1: Logo<\/h3>\n\n\n\n

\"Logo <\/picture> \"Logo <\/picture>
links PNG-8: 3kb, rechts JPEG: 8 kb. Auch bei recht starker Kompression kann das JPEG-Format hier dateigr\u00f6\u00dfenm\u00e4\u00dfig nicht mithalten. Trotz gr\u00f6\u00dferer Datei sieht es jedoch gegen\u00fcber dem PNG <\/p>\n\n\n\n

verschwommener und unsch\u00e4rfer aus. \"Logo <\/picture> \"Logo <\/picture>
<\/p>\n\n\n\n

Die 5-fache Vergr\u00f6\u00dferung der beiden Grafiken macht es besonders deutlich: Klare Kanten und Farbfl\u00e4chen im PNG gegen Kompressionsmatsch im JPEG<\/p>\n\n\n\n

Beispiel 2: Foto<\/h3>\n\n\n\n

\"Foto <\/picture> \"Foto <\/picture>
links PNG: 33kb, rechts JPEG: 18 kb. Das PNG-Format zieht beim Foto kompressionsm\u00e4\u00dfig den K\u00fcrzeren. \"Foto <\/picture> \"Foto <\/picture>
Zuviel Farbe – In der Vergr\u00f6\u00dferung links gut zu sehen: F\u00fcr die Blaut\u00f6ne im unscharfen Hintergrund war in der 256-Farben-Palette des PNG nicht mehr genug Platz. Die Folge sind Farbfl\u00e4chen wo keine sein sollten und Tonabrisse statt flie\u00dfender Farbabstufungen.(GIF ergibt in beiden Beispielen \u00e4hnliche Ergebnisse wie PNG bei etwas h\u00f6heren Dateigr\u00f6\u00dfen diesem gegen\u00fcber.)<\/p>\n\n\n\n

3. Welche Aufl\u00f6sung?<\/h2>\n\n\n\n

Bei der Skalierung bzw. Neuberechnung einer Bilddatei auf die gew\u00fcnschte Ausgabegr\u00f6\u00dfe kann typischerweise ein DPI-Wert f\u00fcr die Aufl\u00f6sung angegeben werden. Welcher Wert ist da wohl der Richtige f\u00fcr die korrekte Ausgabe auf dem Bildschirm? Die Anwort ist verbl\u00fcffend einfach: Es ist egal.<\/p>\n\n\n\n

Die Angabe DPI (= dots per inch, also Punkte pro Zoll) bezeichnet die Dichte der Bildpunkte der Grafik pro Zoll des Ausgabemediums bei der Ausgabe. Da die Bildpunkte einer Bitmap-Grafik durch Pixel repr\u00e4sentiert werden, ist die Bezeichnung PPI = pixel per inch im \u00dcbrigen treffender. Die Angabe ist vor allem beim Druck von Belang. Eine Grafik mit einer Pixelgr\u00f6\u00dfe von 300×300 Pixel h\u00e4tte beim Druck mit 300 dpi\/ppi eine Ausgabegr\u00f6\u00dfe von genau 1×1 Zoll, bei 150 dpi\/ppi w\u00fcrden nur 150 Pixel auf jedem Ausgabezoll untergebracht, so dass sich die Ausgabegr\u00f6\u00dfe 2×2 Zoll ergibt. Da die Datenmenge in beiden F\u00e4llen gleich w\u00e4re und nur die Druckdichte sich unterschiede, w\u00e4re im zweiten Fall das gedruckte Bild zwar gr\u00f6\u00dfer, die Sch\u00e4rfe der Darstellung jedoch entsprechend reduziert.<\/p>\n\n\n\n

Die Ausgabegr\u00f6\u00dfe auf dem Bildschirm jedoch ist von jeher von L\u00e4ngeneinheiten wie Zentimeter oder Zoll entkoppelt, hier z\u00e4hlt die absolute Pixelgr\u00f6\u00dfe, oder ein relativer Wert wie der Prozentanteil der verf\u00fcgbaren Fensterbreite. Wie viele Zentimeter die Darstellung letztlich auf dem Bildschirm einnimmt, variiert je nach Ausgabeger\u00e4t so deutlich, wie zum Beispiel die Bildschirmfl\u00e4che eines kompakten Mobiltelefons vom 28-Zoll-Display abweicht.
Es ist f\u00fcr die Bildschirmausgabe letztlich unerheblich ob im Feld DPI die verbreiteten 72 DPI stehen, oder 96, oder 100, oder 300. Verwenden Sie Ihre Gl\u00fcckzahl. Oder vielleicht 42.<\/p>\n\n\n\n

Zusammenfassend:<\/h2>\n\n\n\n

Wer seinen Web-Garten mit neuen Bildern versch\u00f6nern m\u00f6chte, vergewissert sich zun\u00e4chst einmal \u00fcber die maximale geplante Dartellungsgr\u00f6\u00dfe der Grafiken und skaliert die Bilddateien auf diese Pixelgr\u00f6\u00dfe. Das geeignete Dateiformat f\u00fcr die Ausgabe ergibt sich aus dem Inhalt: GIF oder PNG mit m\u00f6glichst sparsamer Farbpalette sind oft richtig f\u00fcr Logos, Schriftelemente und \u00e4hnliche grafische schlichte Motive. F\u00fcr Fotos wird sinnvollerweise meist das JPEG-Format verwendet. Der DPI-Wert kann dabei getrost au\u00dfer Acht gelassen werden.<\/p>\n","protected":false},"excerpt":{"rendered":"

Wer seinen Web-Garten mit neuen Bildern versch\u00f6nern m\u00f6chte, vergewissert sich zun\u00e4chst einmal \u00fcber die maximale geplante Darstellungsgr\u00f6\u00dfe der Grafiken und skaliert die Bilddateien auf diese Pixelgr\u00f6\u00dfe. Das geeignete Dateiformat f\u00fcr die Ausgabe ergibt sich aus dem Inhalt.<\/p>\n","protected":false},"author":3,"featured_media":3326,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[22],"tags":[110,93,17],"class_list":["post-798","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-website-pflege","tag-bildbearbeitung","tag-tipps-und-anleitungen","tag-werkzeuge"],"acf":[],"_links":{"self":[{"href":"https:\/\/mainetcare.de\/wp-json\/wp\/v2\/posts\/798"}],"collection":[{"href":"https:\/\/mainetcare.de\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/mainetcare.de\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/mainetcare.de\/wp-json\/wp\/v2\/users\/3"}],"replies":[{"embeddable":true,"href":"https:\/\/mainetcare.de\/wp-json\/wp\/v2\/comments?post=798"}],"version-history":[{"count":2,"href":"https:\/\/mainetcare.de\/wp-json\/wp\/v2\/posts\/798\/revisions"}],"predecessor-version":[{"id":24836,"href":"https:\/\/mainetcare.de\/wp-json\/wp\/v2\/posts\/798\/revisions\/24836"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/mainetcare.de\/wp-json\/wp\/v2\/media\/3326"}],"wp:attachment":[{"href":"https:\/\/mainetcare.de\/wp-json\/wp\/v2\/media?parent=798"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/mainetcare.de\/wp-json\/wp\/v2\/categories?post=798"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/mainetcare.de\/wp-json\/wp\/v2\/tags?post=798"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}