Bilder und Medien

Es heißt ja „ein Bild sage mehr als 100 Worte“ - und das stimmt selbstverständlich auch im Web.

Allerdings ist die Bereitstellung der gewünschten Medieninfos nicht immer ganz einfach. Und natürlich wollen wir auch eine einheitliche Bildsprache in unserem WordPress-Projekt einhalten.

Für die optimale Nutzung von Bildern müssen diese Bilder entsprechend webtauglich und in passenden Dimensionen und Proportionen bereitgestellt werden!

Bildmaterial

WordPress übernimmt das Upload-Bild immer auch in der Originalgröße!

Die Aufgabe lautet also: Bilder webtauglich machen!

Aus den aktuellen Smartphone, iPad, Tablets, Kompaktkameras, Digitalen Spiegelreflexkameras kommen Mega-Pixel in MegaBytes.

Beispiel für eine 24-Mega-Pixel (z.B. Nikon D5200):

6000 x 4000 Pixel ergeben ca. 10 bis 15 MB für vorkomprimierte JPEGs.

Beispielbilder mit (nahezu) uneingeschränkten Lizenznutzungen: (hier eine kleine Auswahl)

Pexels - Unsplash - Pixabay

Pexels - Unsplash - Pixabay

Diese Angaben natürlich - wie immer ;-) - ohne Gewähr. Das obige Mosaik zeigt die direkte Auswahlmöglichkeit von Bildern mittels Suchbegriffen über die Palette Stock von Affinity Photo - nice! (Anm. 2022: leider nicht mehr uneingeschränkt so in Affinity SW integriert)

Bei den genutzten Bildern sind immer die Quellen und Lizenzen zu beachten!

Bildverarbeitung

Die Verarbeitung und Optimierung von Bildern soll hier nicht zum Schwerpunkt werden. Also einfach ein paar Tipps zu Anwendungen, die einem das Leben sehr viel einfacher machen können ohne gleich zum Bildverarbeitungsprofi mutieren zu müssen.

Tools zum sehr einfachen Kleinrechnen von Bildmaterial:

  • RIOT - Radical Image Optimization Tool (Riot ) - super einfach!

  • Paint.Net (getpaint.net )

  • Windows-Tools: 3D-Paint oder nur MS Paint

  • alternative Bildbearbeitungsprogramme von GIMP über Affinity Photo bis hin zu Photoshop

Übungen: Bildoptimierung per Klick mit RIOT für gewünschte Bilder in 800px (Beiträge) und 1600px (Header / Slider)

Anm.: als Trainer stelle ich auch immer webtaugliche Bilderserien in Seminaren bereit.

Medien - Mediathek

Hinweis

Bilder immer „webtauglich“ in die Mediathek hochladen.

Empfehlungen zur Arbeit mit Medien:

Tipp

Medien immer erst sauber und voll dokumentiert (Titel, Beschriftung, Alternativtext, Beschreibung) in die Mediathek aufnehmen und erst dann in den Beitragsbereichen (Post-Blöcken) aufnehmen.

WordPress erstellt dann mit Hilfe der PHP-Grafik-GD-Bibliothek nach instellungen im Dashboard kleinere, dimensionierte Bildformate.

Grob handelt es sich dabei um folgende Bildvarianten:

  • Vorschaubild

  • Mittel

  • Volle Größe

Genauer regelt das genutzte WordPress-Theme die Dimensionen der Bildmaterialen !

Leider muss man auch empfehlen die Zugriffe auf die Mediathek von WordPress nicht über FTP zu realisieren: dadurch würde man keine weiteren Bilddimensionen und auch keine Verfügbarkeit in der WordPress-Datenbank erhalten.

Für das Neugenerieren von Bildern und Bildinfos gibt es spezielle Plugins.

Solche Arbeiten sind auch nach Themes-Wechseln nötig, da wahrscheinlich die fraglichen Themes nicht genau die gleichen ilddimensionierungen nutzen.

Medienversionen Theme Twenty Twenty-Two

Medienversionen Theme Twenty Twenty-Two

Größenordnung/Empfehlung:

Bildmaterial in ca. Full-HD (1920 x 1080 px) lokal vorbereiten und dann checken, dass ein 800px-Bild immer (deutlich) kleiner als 100kB ist!

Tipps und Tools für die Bildoptimierung für das Web folgen.

Jedes Bild sollte immer sauber mit seinen Grund-Infos versehen werden:

  • Titel

  • Beschriftung

  • Alternativtext

  • Beschreibung

Durch Übungen/Tests sollte man herausfinden, wo/welche Info in der Site ausgegeben/angezeigt wird.

Wichtig

Nachträgliche Änderungen der Daten in der Mediathek bei den Bildern wirkt sich nicht auf die Daten in der Site aus!

Profitipp: (aber wieder mit Zusatztechnik in Form von WordPress Plugins)

Die Qualität der „Kleinrechnung“ von Bildmaterialien lässt sich mit Hilfe des Tools ImageMagick auf dem Webserver deutlich verbessern!

Hierfür gibt es entsprechende WordPress-Plugins, die dann für WordPress die Technik auf ImageMagick umstellen.