• November 2014
    M D M D F S S
    « Sep    
     12
    3456789
    10111213141516
    17181920212223
    24252627282930
  • Kommentare

    • Klaus: Nachdem ich mir das Bild angeschaut habe und dazu...
    • Skip: Noch etwas Interesanntes. Scheinbar gibt es einen...
    • Klaus: schick mir das Foto an klaus msr-support.de
    • Skip: Ich habe es hinbekommen, daß bei Eigenschaften nun...
    • Klaus: Unter EXIF Daten gibt es das Feld...

Fotos im Web

Bildfläche: 600 x 450 Px plus Thumbnails

Bildgröße und Bildqualität für Fotos im Web

Wie groß soll ein Bild in einer Webseite dargestellt werden und in welcher Qualität. Diese Frage und all die weitergehenden Themen rund um die Bildbearbeitung speziell für die Webpräsentation möchte ich hier behandeln. Meine Webrecherchen waren im Ergebnis dürftig oder  die Antworten für den Laien zu komplex. Das einfache Kochrezept für den Betreiber einer privaten Webseite fand ich nicht, deshalb habe ich meine Erkenntnisse für Interessierte dokumentiert.Ein Webfotos ist immer eine Balance zwischen dem Aussehen eines Bildes auf dem Computerbildschirm und der für den Download des Bildes benötigten Zeit. Egal wie gut das Bild aussieht – wenn es zu lange dauert, bis es auf den Bildschirm geladen wird, verliert der Betrachter die Geduld und er wird sich schnell einer anderen Seite zuwenden.

Kurzfassung und weiterführende Informationen

  1. Arbeitskopie der Fotos in einem extra Ordner anlegen
  2. Dateiformat als JPG mit einer Komprimierung auf 70% Qualität verwenden.
  3. Bildgröße auf 800×600 Pixel reduzieren.
  4. Hochformatbilder auf  600 Pixel Höhe reduzieren.
  5. Dateinamen ohne Umlaute, Sonderzeichen usw. verwenden
  6. Originalnamen beibehalten und Suffix -web (bild-xyz-web) anfügen
  7. Per Stapelverarbeitung alle Bilder in einem Vorgang anpassen
  8. Vorschaubilder -Thumbnails- auf 75 Pixel Höhe reduzieren.

Arbeitskopie erstellen -Webfotos kopieren und in separatem Ordner sichern

Digitalfotos, die für eine Webpräsentation vorgesehen sind, sind grundsätzlich mit geringer Auflösung und Qualität aufzubereiten als solche für den Druck. Um aber die Basisbilder nicht in ihrer Qualität zu verlieren ist eine Arbeitskopie in einem extra Ordner unbedingt notwendig.

Tipp: Im Ordner der Originale einen Unterordner <Weboriginale> anlegen und die ausgewählten Fotos hinein kopieren. Unter diesem Ordner legen sie den Ordner <Webfotos> für die fertigen Bilder an.

Das richtige Dateiformat und die Komprimierung

Für die Komprimierung von Webfotos eignet sich das JPEG-Format am besten, da die Qualität (Komprimierungsfaktor) über eine Prozentskala leicht einzustellen ist.

Qualität = 80% Mit 80% wird die Dateigröße schon auf kleiner 25% reduziert, ohne dass die Bildqualität erkennbar verschlechtert ist. Je weiter Sie aber die Dateigröße reduzieren, desto deutlicher sind die ersten Fehler und Artefakte auf dem Foto zu sehen. Die Details verschwimmen, Konturen sind schwieriger zu erkennen und unerwünschte Nebeneffekte kommen dazu.

Unterhalb von 60% sind aus meiner Sicht erkennbare Verschlechterungen zu sehen.

Meine Empfehlung lautet 70% was einer Datenreduktion auf kleiner 20% des ursprünglichen Wertes entspricht. Die Wirkung der Qualitätsreduzierung ist an dem Beispielbildern dargestellt. Beispielfotos in unterschiedlicher Qualität finden sie hier….

Falls ihr Fotobearbeitungsprogramm keine Feineinstellung zulässt, ist meist eine Auswahl zwischen niedrig, mittel, hoch und Maximum möglich. Dies entspricht bei Adobe z.B. den Werten 80%, 60%, 30%, 10%. In diesem Fall empfehle ich den Wert „hoch” (60%).

Die richtige Bildgröße in Pixel

Gerade im Zeitalter des Pixelwahnsinns ist dies der entscheidende erste Schritt zur drastischen Reduzierung der Datenmenge und der damit verbundenen Ladezeit. Es gilt nun eine Auflösung passend zu den üblichen Bildschirmauflösungen festzulegen. Bei analogen Bildschirmen wurden früher 800×600 Pixel, später 1024×768 Pixel verwendet. Mit der Einführung der TFT Bildschirme waren die 15? Geräte, meist mit 1024 x 768 Pixel, auch an ihren Grenzen. Der Trend geht aber inzwischen eindeutig zu größeren Auflösungen. Bei 17? und 19? Geräten sind 1280 x 1024 inzwischen die Norm. Noch größere Bildschirme und High End Geräte kommen inzwischen sogar auf Werte von 1600 x1200 Pixel.

Meine Empfehlung basisiert deshalb auf der heute gängigen Auflösung von 1280x 1024 Pixel.

Bildfläche: Kopf und Fußbereich Zusätzlich ist nun zu beachten, dass der Bruttowert nicht zur Darstellung zur Verfügung steht. Normalerweise ist der Bildschirmkopf und der Fußbereich für Menü bzw. Symbolleisten belegt (Bild 1)

Bildfläche: rechter und linker Rand Das verbleibende Fenster könnte nun für die Fotodarstellung genutzt werden! Die Realität wird aber meist wie im Bild 2 dargestellt aussehen. Die eigentliche Webseite verwendet zusätzlich einen Kopf und in den meisten Fällen eine rechte und linke Spalte zur Darstellung von übergeordneten Funktionen.

Bildfläche: 800 x 600 Px Resultierend verbleibt eine drastisch reduzierte Nettodarstellungsfläche siehe Bild 3

Meine Empfehlung lautet deshalb: max. 800x 600 Pixel wobei ich immer von einem Bildformat von 4:3 ausgehe.

Sollen unter dem Einzelbild zusätzlich noch die kleinen Vorschaubilder (Thumbnails) dargestellt werden (Bild 4) so muss für diese Vorschaubilder zumindest eine Zeile reserviert werden. Bei dieser Darstellung reduziert sich das Großbild dann auf max. 600×450 Pixel.

Bildfläche: 600 x 450 Px plus Thumbnails Da ein solches Bild auf einem Bildschirm von 1280×1024 px Auflösung sich in etwa so darstellt wie ein Papierbild von 15x10cm empfinde ich dies als gelungenen Kompromiss.

Beispiele für unterschiedlichste  Formate von 100 bis 800 Pixel finden sie hier…

Hochformat- Sonderformatbilder und ihre Besonderheiten

Hochformat- oder Sonderformate bedürfen einer besonderen Betrachtung. Den Bildschirm können wir nicht wie ein Papierbild drehen, d.h. zur Betrachtung eines Hochformatbildes sollte die Darstellung an die Bildschirmgegebenheiten angepasst werden. Im Web bedeutet dies, dass beim Wechsel von einem zum anderen Format in einer Fotogalerie kein unruhiges Bild entsteht und nicht innerhalb der Darstellung gescrollt werden darf. In der Konsequenz bedeutet dies eine Verkleinerung aller Hochkantbilder auf das Höhenmaß  des Standardbildes.

Hochformatbilder müssen deshalb auf 600 Pixel Höhe begrenzt werden.

Tipp: Panoramafotos, d.h. Fotos welche nach der Stapelbearbeitung noch über 800 Pixel breit sind müssen in einem zweiten Schritt nicht auf Höhe sondern auf Breite in diesem Fall 800 Pixel mit höchst möglicher Auflösung optimiert werden.

Richtige Dateinamen (Bildbezeichnung)

Jedes Bild sollte unabhängig von dem Thema Web einen sprechenden Dateinamen tragen. Die durch die Kamera vergebene Bezeichnung wie z.B. DCFG08907.JPG ist im Sinne einer vernünftigen Fotoarchivierung nicht sinnvoll. Wie dies einfach für viele Bilder möglich ist werde ich in einem anderen Kapitel beschreiben.

Nun gehen wir aber davon aus, das die Bilder sprechende Bezeichnungen wie z.B. <Urlaubsspaß Südtirol 001> besitzen.

Diese Bezeichnung ist zwar sprechend, für das Web aber nicht brauchbar. Umlaute, Sonderzeichen, Großbuchstaben und Leerstellen sollten um eine störungsfrei Betrachtung zu erlauben vermieden werden.

Die richtige Bezeichnung in unserem Beispiel müsste  <urlaubsspass-suedtirol-001> lauten.

Originalnamen beibehalten und Suffix -web (bild-xyz-web) anfügen

Um das bearbeitete Bild deutlich vom Original zu unterscheiden empfehle ich die Verwendung eines Suffix -web. Der Vorteil dieser Maßnahme ist, dass keine Verwechslungen mit dem Original auftreten und dies z.B. aus versehen verwendet oder gelöscht wird. Zusätzlich ist so sichergestellt, dass das Originalbild welches ja den gleichen Basisnamen trägt leicht zu finden ist. Es wäre doch unschön, auf der Suche nach dem Quellbild, Unmengen von Bildern zu durchstöbern!

Tipp: Unser Beispielbild müsste <urlaubsspass-suedtirol-001-web> lauten

Stapelverarbeitung – alle Bilder in einem Arbeitsgang anpassen

Die meisten Bildbearbeitungsprogramme besitzen eine mehr oder weniger komfortable Funktion zur Stapelbearbeitung. Mit dieser Funktion können alle Bilder welche sich nun hoffentlich im Unterordner Web befinden in einem Rutsch umgewandelt werden.

Stapelverarbeitung mit Photoshop Am Beispiel von Adobe Photoshop Elements, einer Freeware des bekannten Adobe Photoshop Programms habe ich im folgenden die Schritte (teilweise aus Adobe Beschreibung übernommen) beschrieben:

So starten Sie die Stapelverarbeitung von Dateien (siehe Bild 5)

  1. Wählen Sie “Datei” > “Stapelverarbeitung”. Geben Sie unter “Zu konvertierende Dateien” an, welche Dateien Sie verarbeiten möchten: “Ordner”, um Dateien zu verarbeiten, die bereits auf Ihrem Computer gespeichert sind.
  2. Wählen sie unter Quelle den Ordner <Weboriginale> mit den zu konvertierenden Bildern aus
  3. Geben Sie unter “Konvertierungsoptionen” das Format an, in das Sie Dateien konvertieren möchten (JEPG hoch Qualität).
  4. Markieren Sie die Option “Bildgröße konvertieren”, um die Größe und/oder Auflösung der verarbeiteten Bilder zu ändern.
  5. Legen Sie die Höhe 450 Pixel der zu  verarbeiteten Bilder fest. Das Feld Breite bleibt leer.
  6. Damit das Seitenverhältnis (Breite zu Höhe) unverändert bleibt, aktivieren Sie “Seitenverhältnis erhalten”.
  7. Wählen Sie im Pop-Menü die Auflösung 72 dpi,  in die Sie die Bilder konvertieren möchten.
  8. Wählen Sie die Option “Dateien umbenennen” und legen Sie Optionen für die Namensvergabe fest. Wählen sie im ersten Feld Dokumentname aus und tragen sie in das zweite Feld <-web> ein.
  9. Wählen Sie unter “Kompatibilität” die Betriebssysteme aus, mit denen die Namen kompatibel sein sollen. Zur Wahl stehen Windows, Mac OS und UNIX.
  10. Klicken Sie auf “Ziel”, um einen Zielordner <Webfotos> für die verarbeiteten Dateien aus. Dies ist der empfohlene Unterordner des Quellordners <Weboriginale>.
  11. Klicken Sie auf “OK”.

Gratulation, falls sie alles wie beschrieben durchgeführt haben befinden sich die weboptimierten Dateien nun in dem Ordner Webfotos.

Thumbnails in 75 Pixel Höhe

Als Vorschaubild, Miniaturbild oder Thumbnail (englisch für Daumennagel) werden kleine digitale Bilder bezeichnet, die als Vorschau für eine größere Version dienen.

Der Einsatz von Thumbnails hat folgende Gründe:

  • Kleine Bilder haben eine kürzere Ladezeit, wodurch die Ladezeit einer Webseite beschleunigt wird.
  • Der Besucher kann anhand der Thumbnails entscheiden, welches der Bilder er in voller Größe betrachten möchte. Meist genügt ein einfacher Klick auf die Vorschaubilder um zu der Vollversion zu gelangen.
  • Ein weiterer Grund dafür, Vorschaubilder einzusetzen, ist deren Platzersparnis. Viele Bilder können so auf engstem Raum untergebracht werden.
  • Der Besucher kann sich schnell einen Überblick.

Zur Erstellung der Thumbnails gelten die gleichen Arbeitsschritte wie für die Originalbilder.

Die Größe sollte hierbei so klein wie möglich und doch noch so groß gewählt werden, dass ein Bild noch erkennbar ist. Eine Verformung auf z.B. quadratisches Format wird zwar teilweise Verwendet, verfremdet aber das Foto. Viele Programme bieten innerhalb ihrer Importfunktion die automatische Erstellung der Thumbnails an.

Tipp: Bildgröße 75px Höhe (bedeutet für Normalbilder 100px Breite)

Als Suffix oder Präfix wird ein Kürzel in Ergänzung zu dem Webfoto verwendet. Diese Ergänzung muss meist an das verwendete Galerieprogramm angepasst werden. Ein Beispiel für unser Testbild ist <tmb_ urlaubsspass-suedtirol-001-web>.

Beispiele zur Qualität und Auflösung

Diese Seite weiterempfehlen

7 Kommentare zu -Fotos im Web

  1. Pingback: Uploadproblem mit Hoster 1&1

  2. Pingback: Optimieren im JPEG-Format -Datenreduktion für Emails

  3. Pingback: NextGen Gallery -Hochformat mit vielen Fragezeichen

  4. Pingback: Fotos im Web at AUDIOVISUELL

  5. Pingback: ACDSee Pro 3 jetzt mit guter FTP Uploadfunktion

  6. Pingback: Bilder Upload in WordPress Mediathek –Fehlermeldung „Fatal Error Out of memory“

  7. Pingback: Sehr gute Datenreduktion beim Bilderupload in Mediathek

Kommentar schreiben

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind markiert *

*