Das Copyrightzeichen © stellt im Urheberrecht ein Symbol zur Kennzeichnung eines bestehenden Schutzes dar. Ich verwende das Zeichen bei meinen Fotos bereits seit langer Zeit in den IPTC Daten. Nicht beachtet hatte ich, dass dieses Zeichen nicht auf allen Systemen zur Verfügung steht. Meist wird in solchen Anwendungen das Zeichen dann nicht dargestellt oder durch andere Hieroglyphen ersetzt. Dies ist zwar nicht schön, damit kann man aber leben.

Ärgerlich wird es wenn das Copyrightzeichen Fehler in der Programmausführung verursacht. In meiner WordPress Version 5.2.4 war dies der Fall.

Fehlerbeschreibung des Copyrightzeichen in der WordPress Installation

• Beim hochladen von Fotos werden allen Foto Varianten (Thumb-Größen) erzeugt. Dies konnte ich per FTP prüfen.
• In der Mediathek wird das kleine Vorschaubild nicht dargestellt. Richtig müsste es lauten, es wird ein Bild mit 1px Größe angezeigt. Alle anderen Informationen funktionieren.
• Das Foto kann über die Menüpunkte Bearbeiten und Anschauen dargestellt und bearbeitet werden und man erhält den Eindruck, dass alles korrekt funktioniert.
• Spätesten wenn man das Bild in einen Bericht einfügen will stellt sich heraus, dass etwas faul ist. Die Option der Bildgrößenauswahl wird nicht angezeigt. Falls man dies übergeht und das Bild in den Bericht einfügt kommt dann die Ernüchterung. Es wird nur ein Bild mit 1 px Größe aktiviert.
• Wird das Bild, ohne das Copyrightzeichen, in den IPTC Daten hochgeladen funktioniert es bestens.

Um es kurz zu fassen, es hat mich einiges an Zeit gekostet den Fehler zu lokalisieren. Ärgerlich war auch, dass nicht in allen von mir untersuchten Webseiten der Fehler auftrat. Ob es an der WordPress Version lag bezweifle ich da ich unterschiedlicher Versionen untersucht habe. Auch der Einfluss von Plugins kann ausgeschlossen werden da ich zuerst alle Plugins im Rahmen der Fehlersuche deaktiviert hatte.

Um in Zukunft solchen Problemen aus dem Weg zu gehen habe ich davon Gebrauch gemacht das Symbol durch Klammern anzudeuten(C).  Laut Wikipedia ist dies eine zulässige Darstellung. Zusätzlich habe ich all meine Fotos per Stapelverarbeitung auf das Zeichen untersucht und ersetzt.

Ich hoffe der Tipp hilft anderen welche in die gleiche Falle tappen. Natürlich brauchen Anwender welche das Copyrightzeichen nicht verwenden sich keine Sorge machen, oder? Auch andere Sonderzeichen sind nach dieser Erfahrung mit Vorsicht zu verwenden. Dies gilt natürlich nicht bei Verwendung des entsprechen Codes im HTML Code.

So erzeugen Sie das Copyright in HTML

HTML ist nicht ganz einfach, wenn es um Sonderzeichen geht. Doch es gibt einen Ausweg: Die so genannten Entities sind zuständig, wenn es um das Anzeigen von Copyright oder anderen Symbolen geht.
In HTML gibt es für das Copyright-Zeichen © ein eigenes Entity. So nennt man spezielle Abkürzungen zum Darstellen von Zeichen, die nicht in allen Zeichensätzen vorhanden sind.
Um in HTML ein Copyright-Zeichen zu erzeugen, geben Sie ein:

©

Alternativ dazu können Sie die Unicode-Nummer des Zeichens verwenden:

©

The post Copyrightzeichen -Fehlerquelle in WordPress Mediathek appeared first on MSR-SUPPORT.

Beim hochladen von Bildern, in die WordPress Mediathek, werden zusätzlich zum Originalbild bis zu drei weitere Formate abgespeichert. Diese Bildformate können in der Mediathek eingestellt werden. Ich verwende dazu folgende Werte:

1. Größe der Miniaturbilder (thumbnail): 100 x 75 px
2. Mittlere Bildgröße (medium): 280 x 210 px
3. Maximale Bildgröße (large): 580 x 435 px
4. Originalgröße (Full), diese Größe entspricht der Originalgröße des hochgeladenen Bildes. Ich verwende dazu 1000 x 666 px. (Die Originalgröße ist später nur auswählbar wenn das Bild größer als das „Large“ Format ist)

Will man ein zusätzliches Format als Ergänzung zu den Standardeinstellungen nutzen ist dies kein Problem. Mit etwas Code in der function.php ist es leicht zu bewerkstelligen.

Neue Bildgrößen hinzufügen

Um zusätzliche Bildgrößen hinzuzufügen, benötigen man die Funktion add_image_size() (vgl. WordPress-Codex). Damit diese Bildgrößen später ansprechbar sind ist es erforderlich ihnen einen eindeutigen Namen zuzuordnen. Nicht verwenden darf man die Bezeichnungen „thumb“, „thumbnail“, „medium“, „large“ und „post-thumbnail“, da diese von WordPress bereits reserviert sind.

Zwei zusätzliche Miniaturbilder zufügen

Zuerst ist zu prüfen ob ein Themes ohne Artikelbilder-Funktion im Einsatz ist. Falls dies der Fall ist muss zusätzlich folgender Codeschnippsel in der function.php aufgenommen werden

add_theme_support('post-thumbnails')

Im zweiten Schritt geht es nun um die zusätzlichen Bildgrößen. In meinen Beispiel verwende ich zwei zusätzliche Miniaturbilder im Format 135 x 90 px und 150 x 150 px in Ergänzung zu dem Standardminiaturbild von 100 x 75 px. Der dafür notwendige Codeschnipsel muss in der function.php des Themes aufgenommen werden.

add_image_size('thumb-medium', 135, 90, true); //Bildformat 3:2
add_image_size('thumb-square', 150, 150, true); //Bildformat 1:1

WordPress bietet dabei vier Parameter um das Bild zu konfigurieren (Name, Breite, Höhe und Zuschnitt).
Für den Zuschnitt verwende ich den Parameter true um Miniaturbilder in gleicher Größe zu erhalten. Bei Verwendung des Parameters „true“ wird falls das Format nicht vorhanden ist ein Ausschnitt des Miniaturbild mit dem exakten Format erstellt. Mehr zu diesem Thema findet man hier…

Noch ein Hinweis: Die zusätzlichen Bilder, bzw. Bildgrößen werden immer dann erzeugt, wenn ein neues Bild hochladen wird. Alte Bilder bleiben von den Veränderungen unberührt.

Nun ist es zwar schön und gut, dass man die Bilder in der passenden Größe hat, doch man sollte sie auch in der Medienbibliothek, bzw. in den Dialogen beim Artikelschreiben verwenden können. Dazu muss zusätzlich in der functions.php ein Filter hinzufügt werden.

Codeschnipsel des gesamten Beispiels

// Zwei neue Bildgroessen hinzufuegen
add_image_size('thumb-medium', 135, 90, true); //Bildformat 3:2
add_image_size('thumb-square', 150, 150, true); //Bildformat 1:1
add_filter( 'image_size_names_choose', 'my_custom_sizes' );
function my_custom_sizes( $sizes ) {
return array_merge( $sizes, array(
'thumb-medium' => __('Minibild 135x90'),
'thumb-square' => __('Minibild-Quadrat 150'),
) );
}

Speicherort und Name der Bilder

Nach all den Ergänzungen stellt sich eventuell die Frage wo und wie werden meine Bilder abgespeichert. Der Speicherort ist abhängig von den Einstellungen in der Mediathek. Wurde der Standard Pfad nicht geändert und „Organisiere meine Uploads in monats- und jahresbasierten Ordnern“ aktiviert, landet alles unter … /wp-content/uploads/aktuelles Jahr/aktueller Monat.

Der Dateiname des Originalbildes wird unverändert übernommen. Alle anderen, während des Upload Vorgangs, erstellten Bilder erhalten als Ergänzung die Größenangabe in Pixel.

Beispiel

• Name des Originalbildes:           testbild-bildgroesse-1.jpg
• Name des Minibild Quadrat:       testbild-bildgroesse-1-150×150.jpg

Unter der Voraussetzung, dass das Orinialbild größer wie das „Large“ Format werden in dem Beispiel sechs Bilder in dem Upload Ordner pro Original auftauchen!

ACHTUNG: In den wenigsten Fällen wird dies zutreffen da je nach verwendetem Plugin oder Themes zusätzliche Bilder erstellt werden.

Folgende Plugins bzw. Themes erstellen zusätzliche Bilder

• yarpp-thumbnail: Plugin Yet Another Related Posts Plugin
• crp_thumbnail: Plugin Contextual Related Posts
• ngfb-thumbnail, ngfb_medium, ngfb-large, ngfb-opengraph, ngfb-pinterest, ngfb-thumblr: Plugin NextGEN Facebook – Advanced Social SEO for Facebook, Google+, Pinterest, Twitter & More
• twentyfourteen-full-width: Themes Twentyfourteen
• und viele weitere…..

Pro Originalbilde kann sich deshalb die Anzahl der Bilder schnell um Faktor 10 vergrößern.

The post WordPress -Neue Bildgrößen hinzufügen appeared first on MSR-SUPPORT.

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.

Was ist ein Website-Icon?

Website-Icons sind kleine und praktische Bilder (Icons) für die Website. Der Wiedererkennungswert der Seite wird dadurch gesteigert. Im Browser sorgen diese Icons (dort Favicons genannt) dafür, dass wir schnell wissen, wo wir welche Inhalte geöffnet haben. Als Lesezeichen abgespeichert, prägen sich Besucher die Website-Icons schnell ein und wissen, welche Website, welches Icon besitzt. Es ist also sehr empfehlenswert, das eigene Logo in angepasster Form als Icon zu nutzen und so einen Wiedererkennungswert bei den Besuchern zu schaffen. Auch für mobile Benutzer, die Webseiten regelmäßig über ihr Smartphone erreichen wollen, ist das Website-Icon von Vorteil. Ein schneller Zugriff über das Website-Icon wird gewährleistet und das Aussehen professionalisiert.

Website-Icon zu WordPress hinzufügen

Das Website-Icon repräsentiert die Website im Browser-Tab, im Lesezeichen-Menü und auf dem Startbildschirm von Mobilgeräten. Im WordPress Menüpunkt <Design -Anpassen -Webseiteinformationen> fügt man dazu ein Bild (Icon) hinzu. Dieses Icon wird dann als Favicon und App-Icon genutzt. Eine Theme-Anpassung per Code entfällt.

Das Website-Icon muss quadratisch im Format JPEG, GIF oder PNG vorliegen und darf nicht kleiner als 512 x 512px sein.

Das Bild wird ganz normal in die Mediathek geladen und ausgewählt. Ist das gewählte Bild größer als 512px x 512px, bietet WordPress die Möglichkeit, einen passenden Bildausschnitt das Website-Icon aus diesem Bild auszuschneiden. Bei dieser Bearbeitung erhält man bereits eine Vorschau wie es als Favicon und als App-Icon bei erscheinen wird.

Mit wenigen Klicks ist alles erledigt.

Rüückblick Favicon

In einem Rückblick möchte ich mich auch mit dem Favicon beschäftigen. Bei einem Favicon handelt es sich um ein winziges Bild, das je nach Browser neben dem Seitentitel oder der URL angezeigt wird. In den Anfängen (IE 5) gab es das Favicon nur, als kleine, 16 x 16 Pixel große Grafik im .ico Dateiformat. Wenn man auch für alte Browser den Support aufrecht erhalten möchte, muss man ein 16 x 16px großes .ico-File erstellen. Da die meisten Grafik Programme dieses Dateiformat nicht unterstützen stellt sich die Frage: Wo bekomme ich ein Favicon her? Die Website www.favicon-generator.de ist dazu eine gute Adresse, dort kann man selbst ein Favicon erstellen.

Inzwischen werden meist 32 x 32 Pixel große Bilder als .png oder .gif Datei genutzt, diese können mit allen gängigen Fotoprogrammen erstellt werden

Wie fügte man früher ein Favicon in WordPress-Webseiten ein?

Ist das Favicon erstellt stellt sich die Frage wie bekomme ich das Bild in die Webseite. Um das Favicon in eine Seite einzubinden musste es im Header (<head> …</head>) einer HTML-Seite eingebunden werden. Laut HTML-Standard lautet die Bezeichnung hierfür icon, der Internet Explorer benötigt jedoch die Bezeichnung shortcut icon. Hierbei können auch andere Formate als .ico verwendet werden.

Den notwendigen Code des Favicon fügt man in der header.php im Themeordner ein:

<link rel="icon" href="<?php echo get_stylesheet_directory_uri(); ?>/favicon.png" type="image/png" />
<link rel="shortcut icon" href="<?php echo get_stylesheet_directory_uri(); ?>/favicon.png" type="image/png" />

oder als .ico:

<link rel="icon" href="<?php echo get_stylesheet_directory_uri(); ?>/favicon.ico" type="image/x-icon" />
<link rel="shortcut icon" href="<?php echo get_stylesheet_directory_uri(); ?>/favicon.ico" type="image/x-icon" />

Alternativ konnte man natürlich auch Plugins verwenden. Ab WP 4.3 ist dies Schnee von gestern, das Favicon ist nun Standard im WordPress Menüpunkt Website-Icon.

The post Website-Icon -Favicon und App-Icon in WordPress 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.

Als Beispiel habe ich dazu ein Bild, aufgenommen mit einer Digitalen Spiegelreflexkamera (Sony Alpha 65), analysiert. Das Original Bild im Format 3:2 besitzt 6000 x 4000 Pixel bei einer Dateigröße von rund 8 MB. Dieses Bild habe ich in einem ersten Schritt, in einer Fotobearbeitungssoftware (ACDSee Pro8), auf 1000 x 666 Pixel bei einer JPG Kompression von 60% reduziert. Die Metadaten wurden unverändert mitgeführt. Siehe dazu „Bildgröße und JPG Kompression für Web Bilder„.

Das so generierte Web Bild wurde nun in einer WordPress Applikation in die Mediathek hochgeladen und dabei in die voreingestellten Bildgrößen umgewandelt. (WordPress -Neue Bildgrößen hinzufügen)

Einfluss der Metadaten auf Vorschaubilder (Thumbnails) unterschiedlicher Größe

Wie anhand der Tabelle zu erkennen ist, steigt der Einfluss der Metadaten bei kleinen Bildern extrem an. Es macht deshalb Sinn, zwecks Optimierung für das Web, überflüssigen Metadaten zu entfernen. EXIF, IPTC und XMP Daten benötigen Speicherplatz, sind aber für die Darstellung von Bildern im Web völlig unnötig und haben keinerlei Einfluss auf die Qualität der jeweiligen Bilder.

Entfernen der Metadaten

Die einfachste Lösung besteht darin, dass Web Bild bei der Erstellung per Fotobearbeitungssoftware direkt von den Metadaten zu befreien. Teilweise kann man dies in einem Arbeitsschritt erledigen. In einigen Fällen ist auch ein zusätzlicher Arbeitsgang notwendig.

Für bereits hochgeladene Bilder konnte ich keine Lösung finden! In diesen Fällen habe ich mir derart geholfen, indem ich per FTP die Bildverzeichnisse heruntergeladen habe und dann in einem Schritt von allen Bildern die Metadaten entfernt habe. Danach alles wieder per FTP hochgeladen.

Ideallösung der Metadatenbereinigung gesucht

Grundsätzliche möchte ich die Metadaten nicht von meinem Original Web Bild (Full Format) entfernen, da ich die Metadaten z.B. zur Übernahme von Bildbeschreibung, Geodaten usw. nutze. Dieses Bild und seine Informationen möchte ich unverändert im Web speichern.

Bei allen Vorschaubildern welche zusätzlich gespeichert werden sollten jedoch die Metadaten entfernt werden. Das Plugin Optimus könnte eine Lösung sein! Das Plugin von Sergej Müller komprimiert PNG- und JPG-Dateien automatisch im Hintergrund wenn sie in die WordPress-Mediathek hochgeladen werden. Die Gratisversion komprimiert jedoch nur JPGs bis 25KB und kann keine Metadaten entfernen!

Nur in der Vollversion für 14,99€ pro Jahr können die Metadaten entfernt werden, leider aber von allen Bilder, d.h. auch von dem Original Web Bild.

The post Bildkomprimierung durch Entfernen von Metadaten appeared first on MSR-SUPPORT.

Beispiel: JPG Kompression abschalten (100%)

Wer den Parameter JPG Kompression ändern möchte kann mit folgendem Codeschnipsel in der function.php eine Anpassung vornehmen.

add_filter('jpeg_quality', function($arg){return 100;});
add_filter( 'wp_editor_set_quality', function($arg){return 100;} );

Durch Änderung des Wertes 100 kann jeder beliebige Wert der Kompression eingestellt werden.

Wie fast immer gibt es für diese Anwendung Plugins:

• Disable JPEG Compression Deaktivieren der JPEG-Kompression welche standardmäßig aktiviert ist
• WP Resized Image Quality Ändert die JPEG-Kompression hochgeladener Bilder und Miniaturen, per Schieberegler kann unter <Einstellungen/Medien> die Kompression konfiguriert werden.

Wer eine flexible einfache Einstellung sucht wird sicherlich das Plugin WP Resize Image Quality vorziehen!

Hinweis: Durch eine möglichst hohe JPG Kompression bei vertretbaren Bildqualtäten kann die Dateigröße reduziert und damit die Ladezeit der Seite verbessert werden.

Übersicht der Dateigröße in Abhängigkeit von der JPG Kompression

Anmerkung: Bei Q=100% wird die JPG Kompression welche bereits auf das Originalbild angewendet wurde teilweise wieder aufgehoben.

The post WordPress JPG Kompression anpassen appeared first on MSR-SUPPORT.

Bildtexte und deren Upload in die WordPress Mediathek

Rund um die Bilder kommen unabhängig von den EXIF und IPTC Daten vier Texte zur Anwendung. Diese Texte können in der Mediathek manuell eingegeben oder beim upload aus den EXIF bzw. IPTC Daten übernommen werden. Die Übernahme bereits bestehender Texte ist sicherlich die eleganteste Lösung. Profis und ambitionierte Hobbyfotografen haben die Bilder bereits mit Beschreibungen unterschiedlichster Art versehen und es macht keinen Sinn diese Arbeit speziell bei großen Bildermengen doppelt auszuführen (In der WordPress Dokumentation Function Reference/wp read image metadata ist die Übernahme der Metadaten beschrieben).

1) Titel (Title)

In das Feld Titel gehört, die Überschrift des Bildes. Wird in den EXIF bzw. IPTC Daten beim hochladen in die Mediathek keine Information gefunden, wird der Dateiname des Bildes wie z.B. 14033010.JPG verwendet. Diese unschönen Titel sollten unbedingt vermieden werden. Ab WordPress Version 3.5 hat das Textfeld Titel einen Wandel erfahren, früher wanderte dieser Text in das title-Attribut des img-Tags und wurde vom Browser als Tooltip beim überfahren mit der Maus eingeblendet. Dieser Automatismus wird seit WP 3.5 nicht mehr unterstützt. Wer das title-Attribut trotzdem verwenden will kann es sich mit dem Plugin Restore Image Title zurück holen oder nach dem hinzufügen in einen Bericht unter „Erweiterte Optionen“ manuell in das Feld <Bildtitel-Attribut> einfügen. Jürgen Mißfeld empfiehlt in seinem Bericht Bilder: Alt-Text und/oder Title-Text? – Image-Tag Grundlagen es dann zu setzten wenn keine Bildunterschrift angewendet wird.

Reihenfolge der Titeltextes beim hochladen von Dateien (Upload)

Es wird das erste mit Text gefüllte Feld verwendet

1. EXIF Titel
2. IPTC Überschrift
3. IPTC Titel
4. IPTC Bildbeschreibung
5. EXIF Bildbeschreibung
6. Dateiname

2) Beschriftung (Caption)

In das zweite Textfeld gehört die Bildunterschrift. Dieser Text sollte den Bildinhalte beschreiben. Der Text wird je nach verwendetem WordPress-Theme direkt unter dem Einzelbild oder Galeriebild angezeigt, weshalb dieser Text auch nicht zu lang sein sollte. Auch dieses Feld sollte beim Upload in die Mediathek automatisch befüllt werden, falls entsprechende Informationen vorhanden sind. Falls keine Texte gefunden werden bleibt das Feld frei.

Reihenfolge des Beschriftungstextes beim Upload

ACHTUNG: Dies wirkt auf den Beschreibungstext!!!!!

Es wird das erste mit Text gefüllte Feld verwendet

1. EXIF Benutzerkommentar
2. EXIF Bildbeschreibung
3. EXIF Dateikommentar
4. IPTC Bildbeschreibung

ACHTUNG: In der aktuellen WP Version 3.9 funktioniert dieser Upload leider nicht. In der Konsequenz bleibt dieses wichtige Feld leer.

3) Alternativer Text (Alt Text)

Das Attribut alt ist ein Pflichtangabe für jede Grafikeinbindung. Dies ist ein Alternativtext für den Fall, dass die Grafik nicht angezeigt werden kann. Es gibt viele Gründe, warum eine Grafik nicht angezeigt werden kann, z.B. weil der Anwender das Anzeigen von Grafiken in seinem Browser deaktiviert hat, oder weil der Anwender das Laden der Seite abgebrochen hat, bevor die Grafik übertragen wurde. Für diesen Text gibt es keine Übernahmemöglichkeit aus den EXIF/IPTC Daten. Um auch dieses Feld automatisch beim Upload zu befüllen kann man z.B. auf das Plugin Media Library Assistant zurückgreifen. Falls das Feld alt Text nicht befüllt ist wird beim einfügen solcher Bilder in die Berichte automatisch der Text aus Beschriftung bzw. Titel übernommen.

Reihenfolge des Alternativ Textes beim Hinzufügen in den Bericht

1. Beschriftung (caption)
2. Titel (title)

4) Beschreibung (Describtion)

Das Feld Beschreibung ist wohl ein Geheimnis der WP Entwickler! Bei den IPTC Daten gibt es dazu ein Feld mit der Bezeichnung Long Describtion. In dieses Feld können 2000 Zeichen statt 128 Zeichen bei der Beschriftung eingetragen werden. Das longDesc-Attribut wurde im Zusammenhang mit der „Barrierefreiheit für Websites“ eingeführt. Es hat sich allerdings nie durchgesetzt. Es ist bei WP nur relevant falls in den Optionen <Link zur Anhang Seite> gewählt wurde. Statt der Bildunterschrift wird dann die Beschreibung angezeigt. Persönlich kann ich mich damit nicht anfreunden. Ich denke dieses Feld stiftet nur Verwirrung.

Bildtexte optimieren für Suchmaschinen

Wie in der Einleitung schon beschrieben sind Bildtexte für Suchmaschinen wichtig Faktoren. In dem Bericht Bilder optimieren für Google Bildersuche von Matin Mißfeldt wird dieses Thema ausführlich beschrieben. In der von ihm entwickelten Checkliste steht z.B. die Bildbeschreibung auf Rang 1, da die Bildbeschreibung unmittelbar beim <img> Tag platziert ist.

Checkliste von Martin Mißfeldt – Methoden zur Optimierung von Bildern

• 1. keyword vor und nach dem <img> tag.
• 2. keyword in der URL des Bildes
• 3. keyword in Links auf der Seite
• 4. keyword im Titel der Seite
• 5. keyword in der Überschrift (<h1>, <h2> oder <h3>)
• 6. keyword in der URL der Seite
• 7. keyword im <Alt> tag des Bildes
• 8. keyword <strong>

Mehr zu diesem Thema können Interessierte direkt bei Martin Mißfeldt nachlesen.

Bildtexte mit minimalem Aufwand anwenden

Zur Bild bzw. Fotoverwaltung gibt es einige leistungsstarke Fotoprogramme. Lightroom oder ACDSee wären hier als Beispiele zu nennen. Da ich ACDSee wie schon mehrfach beschrieben zu meinem Favoriten auserkoren habe hier meine Empfehlung:

1. Überschrift und Bildbeschreibung der IPTC Daten in ACDSee (oder anderem Fotoprogram) verwalten. Per Stapelverarbeitung können dort z.B. aus den GPS Daten Aufnahmeorte in diese Felder übernommen werden.
2. Da die Beschriftung nicht wie dokumentiert automatische aus den IPTC Daten übernommen wird empfehle ich das Plugin Media Library Assitant zu installieren.
3. In dem Plugin Media Library Assistant IPTC/EXIF, wie im Bild dargestellt, einstellen.
4. Nach dem upload in die WordPress Mediathek wird dann als Titel die IPTC Überschift und Alt-Text, Beschriftung und Beschreibung die IPTC Beschreibung automatisch übernommen.
5. SEO Test mit dem WordPress SEO Plugin von Yoast. Dort wird der alt-text auf richtige Verwendung geprüft.

The post Bildtexte in WordPress richtig anwenden appeared first on MSR-SUPPORT.

ACHTUNG:

• Unschön ist, dass bei der Verlinkung auf das Großformat die dort zu verwendende Bildbeschriftung im Menü <Erweiterte Einstellungen> erst nach dem Einfügen des Bildes in einen Bericht möglich ist. Also nicht vergessen sonst ist das Bild ohne Beschriftung!
• Falls das Feld Beschriftung nicht ausgefüllt wird, wird auch der Rahmen (Caption) nicht dargestellt, also nicht vergessen.
• Zusätzlich ist zu Beachten, das bei Bildern welche mit Meta Daten versehen sind (EXIF, IPTC) Bildinformationen automatisch übernommen werden. Aber auch dort liegt einiges im Argen! Wichtige Informationen für den  Alternativtext und die Bildbeschriftung können nicht übernommen werden und müssen einzeln hinzugefügt werden (siehe auch IPTC Metadaten nützliche Texte in den Bilddateien).

ANMERKUNG:

Das Attribut alt ist Pflichtangabe für jede Grafikeinbindung. Dies ist ein Alternativtext für den Fall, dass die Grafik nicht angezeigt werden kann. Es gibt viele Gründe, warum eine Grafik nicht angezeigt werden kann, z.B. weil der Anwender das Anzeigen von Grafiken in seinem Browser deaktiviert hat, oder weil der Anwender das Laden der Seite abgebrochen hat, bevor die Grafik übertragen wurde. Wenn Sie ihre Grafiken mit erklärenden Tooltips title versehen wollen, nutzen Sie das Attribut title.

TIPP:

• Um es sich einfach zu machen verwende ich für Zeile 1-3 den gleichen Text, den Titel für das Bild. Es sollte kurz und Aussagekräftig sein. Bei längerem Text diesen für die Beschriftung einsetzten. Die Beschriftung und die Bildbeschriftung für das Großformat gleich wählen.
• Beschreibung Zeile 4 kann aus meiner Sicht entfallen, der Sinn ist mir nicht klar

The post WordPress 3.1 Mediathek –Bildtexte sorgen für Verwirrung appeared first on MSR-SUPPORT.

Wie aber für viele andere Anwendungen auch, gibt es auch dafür ein Plugin. Das  Plugin Regenerate Thumbnails kann zwar nicht alle Formate ändern aber zu mindestens die Größe der Thumbnails. Ich denke für den Rest wird sich auch noch was finden und die WP Entwickler werden sicherlich das Problem auch erkennen?

The post Größe der Thumbnails in WordPress Mediathek ändern appeared first on MSR-SUPPORT.