Die Auflösung von Digitalbildern wird immer größer, d.h. Bilder mit 8 bis 10 MB sind heute keine Seltenheit. Bildschirme mit größer 20″ und hochauflösende Mobilgeräte möchten Bilder in guter Qualität abbilden. Im Wiederspruch dazu besteht die Forderung nach kurzen Ladezeiten, niemand möchte mehrere Sekunden warten bis sich ein Bild aufgebaut hat.

Die Lösung besteht darin einen guten Kompromiss zu finden.

Maximale Bildgröße für Web-Bilder

Dieses Bild möchte ich im folgenden „Original Web Bild“ (Original) nennen, nicht zu verwechsel mit dem „Original Bild“ auf dem heimischen PC.

Original Bilder werden je nach Kameratyp und Einstellung in den Formaten 3:2, 4:3 und 16:9 erstellt. Zusätzlich gibt es noch Sonderformate als Panorama. Bei hochwertigen Kameras geht der Trend zum Format 3:2, dies entsprich den Sensorformaten und dem alten Negativ Filmformat 24×36. Kleinere Kompaktkameras mit kleinem Sensor tendieren mehr zum Format 4:3. Für alle gilt aber, dass eine hohe Auflösung selbstverständlich ist.

Da das Original Web Bild meist erst über ein Kleinbild (thumbnail) aktiviert und als sogenannte Lightbox im Bildschirm großflächig dargestellt wird, erwartet man relativ große Bilder in guter Qualität.

Meine Empfehlung für die Original Web-Bilder ist 1000 x 666 px

Als Beispiel habe ich ein Bild, aufgenommen mit einer Spiegelreflexkamera, als Referenzbild verwendet. Das Original Bild im Format 3:2 besitzt 6000 x 4000 Pixel bei einer Dateigröße von rund 8 MB. Wird dieses Bild per Größenänderung in der Fotobearbeitungssoftware auf 1000 x 666 Pixel mit einer JPG Kompression von 60% reduziert zeigen meine Tests, dass auf den Monitoren das Bild in guter Qualität dargestellt wird. Die Dateigröße wird dabei je nach Fotosoftware auf rund 150 KB reduziert. Bei dieser Anpassung ist zu beachten, dass das Seitenverhältnis unverändert bleibt. Ich denke dies ist ein guter Kompromiss zwischen Qualität und Dateigröße.

Die Einstellung 1000 x 666 px verwende ich für alle Formate. Dadurch ändert sich zwar die Breite der Bilder, die Höhe bleibt jedoch unabhängig vom Format gleich.

• Querformat 3:2        1000 x 666 px
• Hochformat 3:2        444 x 666 px
• Querformat 4:3        888 x 666 px
• Hochformat 4:3        500 x 666 px

Zusätzlich zu den Original Web-Bildern, werden kleinere Bildformate als Vorschaubilder benötigt. Bei den kleinsten Formaten spricht man von Miniaturbildern bzw. Thumbnails. Zusätzlich zu diesen Bilder in der Größe von 50 bis 150 px kommen weitere Größen je nach Anwendung zum Einsatz.

Bildgrößen der WordPress Mediathek

Bei dem von mir eingesetzten CMS System können die Vorschaubilder unter Einstellungen / Medien für das gesamte System konfiguriert werden. In der Konsequenz bedeutet dies, dass zu jedem Original (Original Web Bild) zusätzliche Vorschaubilder abgespeichert werden. Diese Bilder sind dann per Link mit dem Originalbild verknüpft.

WordPres Standard Bildgrößen

WordPress ermöglicht 4 Bildformate, Thumbnail, Medium, Large und Full. Nach der Installation stehen diese in den folgenden Größen zur Verfügung:

1. Miniaturbilder (Thumbnail): 150 x 150 px
2. Mittlere Bildgröße (Medium): 300 x 300 px
3. Maximale Bildgröße (Large): 1024 x 1024 px
4. Originalgröße (Full): Originalgröße ist nur auswählbar wenn das Bild größer als das „Large“ Format ist.

Die von WP zur Verfügung gestellte Standardeinstellung sollte unbedingt an die jeweilige Anwendung angepasst werden. Die Einstellungen sollten sich dabei stark an dem Layout orientieren. Als Orientierung dient der Content-Bereich. Das „Large“ Format sollte nicht größer wie der Content und das „Medium“ Format maximal die Hälfte des Content-Bereich nutzen.

Meine Empfehlung zur Einstellung der Bildgrößen in der Mediathek

1. Miniaturbilder 150 x 75 mit der Option „Miniaturbild auf exakte Größe zuschneiden“
   Die Miniaturbilder werden als Artikelbilder verwendet und sollten möglichst gleich groß sein. Ein Ausschnitt ist bei einem so kleinen Bild zulässig
2. Mittlere Bildgröße 280 x 210. Diese Größe stellt das Bild schon in guter Qualität dar und kann gut in den Textfluss eingepasst werden. Es empfiehlt sich nicht mehr als die Hälfte des Content-Bereich zu nutzen.
3. Maximale Bildgröße 580 x 435. Damit wird der Content voll ausfüllt und das Bild zentriert verwendet. Ich verwende dieses Format gerne für Panoramabilder.
4. Original Web Bild 1000 x 666 px kommt nur als Lightbox Bild zur Anwendung

Galeriedarstellung von zwei Bildern im Querformat 280 x 210px

Zusätzlich zu diesen Standards verwende ich noch die Formate 135 x 90 und 150 x 150 für Galeriefunktionen mit besserer Darstellung der Vorschaubilder. Um dies zu nutzen muss jedoch etwas Code ein der function.php eingesetzt. werden: Siehe WordPress -Neue Bildgrößen hinzufügen.

Bildformate neu berechnen

Alle vor der Umstellung gespeicherten Bilder bleiben von der Änderung unberührt, sie sind in den alten Formaten gespeichert und soweit verwendet in den Beiträgen entsprechend gespeichert.
Wird nach der Umstellung in der Mediathek ein älteres Bild zum Beispiel im Format „Medium“ eingefügt, wird es zwar in den neuen Abmessungen eingefügt, der Link verweist aber auf das alte Format. Zur Anpassung wird das Bild skaliert, d.h. Höhe und Breite werden entsprechend definiert.

Wie fast immer gibt es für die alten Formate eine Lösung, das Plugin Plugin „Regenerate Thumbnails“. Regenerate Thumbnails übernimmt die Anpassungen aller Bilder die über die WordPress Mediathek hochgeladen wurden. Für jedes neue Format wird zusätzlich zu dem bestehenden Bild ein weiteres erstellt. Die alten Bilder bleiben aber erhalten um keine Veränderung in den alten Berichten zu kreieren. Nur die Artikelbilder werden falls das Miniaturformat geändert wurde angepasst, aus meiner Sicht eine sehr gute Lösung.

Wurde zum Beispiel das „Medium“ Format von 320 x 240 px auf 280 x 210px geändert so finden wir nun im Upload Ordner zwei Bilddateien:
bildname-320×240.jpg und bildname-280×210.jpg

Anmerkung: Zu den WordPress Bildern der Mediathek, ihrer JPG Kompression und Datengröße werde ich in Kürze noch etwas nachtragen, d.h. einfach wieder vorbeischauen oder abonnieren.

The post Bildgröße und JPG Kompression für Web-Bilder appeared first on MSR-SUPPORT.

Um die WordPress Mediathek hatte ich wegen mangelhafter Möglichkeiten in der Vergangenheit einen großen Bogen gemacht! Der Favorit für meine Bilder war das Plugin NextGen. Aufgeweckt durch Berichte verschiedener Blogger zu den Verbesserungen (Stand WP3.5) habe ich mir das Thema nochmals zur Brust genommen.

Der Ansatz Bilder schnell und einfach in die Mediathek hochzuladen und in die Berichte einzubinden ist sicherlich der richtige Ansatz. Gleichzeitig muss aber beachtet werden, dass Bilder häufig Lustbremsen der Webseite sind. Lange Ladezeiten werden oft maßgeblich durch zu große Bilddateien hervorgerufen. In dem Bericht Bildgröße und Bildqualität für Fotos im Web bin ich bereits auf das Thema eingegangen.

Bei meiner Recherche zum Thema Mediathek und Bildkomprimierung fand ich den hilfreichen Bericht WordPress Bilder optimieren, dort wird in einem Test beschrieben wie die Dateigröße bei verschiedenen Bildformaten von WordPress beim Upload verändert wird.

Das Testergebnis ist ausgesprochen interessant „Es macht keinen Unterschied die Bilder vor dem Upload mit dem WordPress zu komprimieren und dann hoch zu laden, oder sie gleich im Original zu belassen. Auch die Stärke der Komprimierung wird komplett ignoriert. WordPress stellt intern die Komprimierung der Bilder wieder auf 90. Damit ist jegliche Komprimierung wieder rückgängig gemacht.“ Dies erklärt auch, dass in den Optionen der Mediathek keine Einstellmöglichkeit für die Bildkomprimierung zu finden ist.

Ich habe den Test mit eigenen Bildern nachvollzogen und das Ergebnis mit externeren Kompressionsprogrammen verglichen und bin sehr erfreut, dass die WordPress Datenkompression, zu besseren Resultaten führte wie mit meine Fotoprogramme. Teilweise konnte ich bis zu 35% verbesserte Datenreduktion bei gleicher Bildqualität erreichen.

Unschön ist aus meiner Sicht allerdings, das beim hochladen der Bilder bis zu 5 Bildformate je nach Original hochgeladen werden. Ich habe dazu in den Optionen der Mediathek folgende Formate konfiguriert:

• Kleinformat 100 x 75 Thumbnail
• Mittelformat 320 x 240 280 x 210
• Großformat 800 x 600 580 x 435
• Quadrat 120 x 120 (fest vorgegeben)
• Originalbild 1000 x 666 (vor dem Upload erstellt)

Ist das Original größer als 580 x 435 so werden alle 5 Formate erstellt. Ist das Original kleiner, so werden nur die kleineren Formate generiert.

Für Anwender hochwertiger Kameras bedeutet dies, dass z.B. ein Originalfoto mit 6000×4000 Pixel leicht bis zu 8MB groß ist und die Serverkapazität unnötig belastet. Das hochladen der Bilder braucht dann ewig! Da ich keinen Nutzen darin sehe solche Datenmengen auf meinen Server hochzuladen ist mein Tipp:

Zuerst das Foto im Fotobearbeitungsprogramm auf die Maximalanwendung (800×600 1000×666 mit Q=70%) reduzieren und dann die drastisch verkleinerte Datei von ca. 100KB hochladen. Selbst größere Bildermengen werden dann ratzfatz in die Mediathek geladen.

The post Sehr gute Datenreduktion beim Bilderupload in WordPress Mediathek appeared first on MSR-SUPPORT.

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. Fotos im Web sind 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 zum Thema Fotos im Web

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 Fotos im Web

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

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.

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.

Resultierend verbleibt eine drastisch reduzierte Nettodarstellungsfläche siehe Bild 3

Meine Empfehlung lautet deshalb: max. 1000x 666 Pixel wobei ich von einem Bildformat von 3:2 ausgehe.
Anmerkung: Vor 8 Jahren habe ich noch 800×600 im Format 4:3 empfohlen!!!

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.

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 666 Pixel Höhe begrenzt werden.

Tipp: Panoramafotos, d.h. Fotos welche nach der Stapelbearbeitung noch über 1000 Pixel breit sind müssen in einem zweiten Schritt nicht auf Höhe sondern auf Breite in diesem Fall 1000 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.

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

The post Fotos im Web appeared first on MSR-SUPPORT.

Da die Nettogröße der Bildschirmdarstellung eine sinnvolle Begrenzung ist habe ich zum Test verschiedene Bildgrößen im Verhältnis 3:4 zusammengestellt. Eventuell hilft euch dies bei der Auswahl der richtigen Bildgröße.

The post Beispielbilder zu Größe und Qualität appeared first on MSR-SUPPORT.