Bilder auf Webseiten: Basics

Größen von Bildern auf Webseiten

Heute werden Bilder nicht mehr genau ausgemessen eingestellt, sondern größer: Wer YouTube Video ansehen kann, kann auch ein größeres Bild laden und wird es dann eventuell auch schärfer sehen.
Für den Webdesigner geht es dabei auch um Zukunftssicherheit: Bei einem Redesign muss man dann keine Rücksicht auf zu kleine Bilder nehmen, was die Sache extrem erleichtert.

1000 – 1200 Pixel breit

Üblich ist eine Bild-Breite von ca 1000 bis 1200 Pixel. Die Höhe muss 1600 Pixel nicht überschreiten, weil Monitore kaum so hoch werden.
Bei sehr breiten Header-Bildern kann man bis 2500 Pixel Breite gehen, mehr wird die nächsten Jahre nicht nötig sein. In der Praxis sind die Bilder ja auch gar nicht so scharf.

Manche Module mit Upload-Funktion legen ein Verzeichnis „original“ an, auf das das Modul  (oder der Webdesigner) später wieder zugreifen kann. Webspace ist heute kein Thema mehr, die Original-Bilder werden ja meist nicht ausgeliefert, sondern sind nur Backup.

Grenze: Arbeitsspeicher des Servers

Bei Modulen mit Upload-Funktion muss das Bild verkleinert werden, dazu braucht es viel Arbeitsspeicher am Server. Wenn sich ein Bild nicht hochladen lässt, liegt das meist daran, dass der Speicher nicht ausreicht. Wenn man das kann, stellt man den Speicher auf das Maximum ein oder redet mit dem Hoster.

Fotos aus gängigen Handys sollte man immer direkt hochladen können. Bei Spiegelreflex-Kameras oder neuen Kompaktkameras ist die Grenze aber schnell überschritten.

Upload-Volumen

Eine weitere Grenze, die aber meistens nur bei Mehrfach-Uploads relevant ist: Die Gesamtmenge der übertragenen Daten. Aktuelle Uploader umgehen das, indem sie „im Gänsemarsch“ laden.

Bildformate

JPG und PNG – vergiss alles andere
tif, bmp oder gar raw oder eps: Das hat auf einer Webseite nichts verloren. Verwende jpg, png, eventuell gif

JPG 

Fotos wird man zu 99% als jpg einstellen, mit der Endung .jpg in kleinbuchstaben. Alternative  Endungen wie .jpeg können Ärger machen.
Manchmal kann es Probleme mit der Bilddrehung geben: im Browser werden Bilder plötzlich gedreht dargestellt. Den technischen Hintergrund erspare ich  - es liegt an der Kamera*. Verwende ein Bildbearbeitungsprogramm zum drehen, dann wird es stimmen.

JPG komprimiert recht gut, aber mit Verlusten. Keinesfalls solte man mehrmals komprimieren – also mehrmals jpg öffnen und wieder speichern. Dadurch kommt es zu störenden Flecken, besonders bei kräftigen Rot-Tönen, da ist die JPG-Kompression sehr anfällig dafür.

PNG

png ist für Fotos selten ideal, aber immer dort, wo gleichmäßige Flächen vorhanden sind, etwa bei Logos oder Diagrammen. Außerdem kann ein PNG Transparenzen enthalten. PNG ist außerdem verlustfrei.

GIF

ist ein Auslaufmodell, es wird zunehmend durch PNG ersetzt. Wenn man aber schon ein GIF hat, ist das kein Problem.

Besonderheit: Tablets und Smartphones

Smartphones können sagenhafte Auflösungen haben. 1400 x 2500 sind keine Seltenheit. Aber: Der Bildschirm ist trotzdem klein – es sind also mehr Pixel pro Fläche, die berühmten und unverständlichen DPI. Bis zu 600 DPI erreichen moderne Handys locker mal.

In der Praxis spielt das bei Text eine Rolle, bei Fotos nicht. (Bei Videos schon gar nicht mehr)
Fotos sind in der Praxis nämlich gar nicht so scharf – und das ist auch gar nicht wichtig.
Natürlich gibt es Mindestanforderungen, diese sind aber weit niedriger als die Technik theoretisch hergeben würde.

 

---

* falsch gedrehte Bilder: Ursache ist die Art, wie die Kamera die Bilder speichert. Da gibt es 2 Möglichkeiten, wie der Lage-Sensor des Handys einbezogen wird:

1) Die Kamera dreht das Bild beim Speichern gleich richtig ab: Das linke obere Bild-Pixel ist auch in den Daten oben links. Hier gibt es keine Probleme mit der Drehung.

2) Das ist eine Eigenheit mancher Handy-Hersteller: Das Bild wird so gespeichert, wie vom Kamera-Sensor erfasst. Links oben ist also dort, wo am Sensor links oben ist, unabhängig davon, wie die Kamera gedreht war. Die Drehung wird extra gespeichert. Das wird aber beim Upload verworfen, weil das kein Standard ist – folglich wird das Bild so dargestellt, wie es der Sensor gesehen hat.

Abhilfe: Da wird es wohl Apps geben, auch die Windows Bild und Fax-Anzeige kann das korrigieren.