WordPress Bildgrößen in vielen Variationen

Im neuen Layout braucht man meistens auch andere WordPress Bildgrößen.

Im neuen Layout braucht man meistens auch andere WordPress Bildgrößen.

Sie sind ein unerschöpflicher Quell der Freude: Gute Bilder in einem WordPress-Blog machen das Lesen leichter. Sie ziehen Besucher an und bieten manchmal mehr Informationen auf einen Blick, als ein langer Text. Sie sind aber auch manchmal lästig: Google meckert rum, weil die Bilder zu große Datenmengen aufweisen und die Schnelligkeit der Webseite beeinträchtigen. Die Bilder sind nie in der passenden Größe und Auflösung dort, wo sie sein sollen. Und die Bildbearbeitung frisst inklusive der Bilder für Soziale Medien fast so viel Zeit, wie das Schreiben des Artikels – vom Fotografieren mal gar nicht zu reden.

Was tun? Weniger Bilder sind ja auch keine Lösung. Und die falschen WordPress Bildgrößen erst recht nicht. Mit etwas Planung und ein paar Helferlein kann das auch reibungsloser verlaufen.

WordPress: interne Bildverarbeitung

Zunächst einmal können wir uns alle freuen. Denn die Bildverwaltung in WordPress ist viel komfortabler geworden. Und auch Bildverarbeitung ist jetzt möglich. Wem das noch nicht genügt, der kann auf Plugins zurückgreifen.

Weitere WordPress Bildgrößen per Plugin

Das Plugin Simple Image Size erlaubt zusätzliche Bildgrößen festzulegen, auf die die Bilder automatisch beim Hochladen zurechtgeschnitten werden. Wer also bestimmte Größen braucht, die noch nicht in der functions.php seines Themes festgelegt sind, der kann sich damit prima behelfen.

Heißt das, ich kann jetzt einfach meine Riesen-Bilder aus der Super-Duper-DSLR hochladen? Kann man machen, sollte man aber nicht. Die effektivste Art Bilddaten sinnvoll zu reduzieren funktioniert mit Photoshop und dem Befehl „Für Web und Geräte speichern”. Dort genügt in der Regel die Qualitätsstufe hoch. Wenn es keine besonders hochwertigen Aufnahmen sondern eher Info-Bilder sind, kann man an an der Qualität auch Abstriche machen.

Hier wählt man die größte Größe aus, die man für WordPress, Instagram, Facebook & Co. verwenden möchte. Die kann man jetzt auch auf WordPress hochladen, dort werden automatisch die verschiedenen Bildgrößen erzeugt.  Diese Größe kann man dann aber auch für die Sozialen Medien verwenden.

… oder manuell in der functions.php festlegen

Wers noch detaillerter möchte und selbst im Maschinenraum seiner WordPress-Installation herumwerkeln möchte, der sucht nach einer Anleitung,wie man die entsprechenden Befehle in die functions.php einbaut (zum Beispiel hier)

Ein Genesis-Theme: Die größe WordPress Bildgröße bleibt gleich.

Ein Genesis-Theme: Die größe WordPress Bildgröße bleibt gleich.

Intelligent Bilder „nachladen”

Eine andere Möglichkeit, das Ladeverhalten seiner Seiten positiv zu beeinflussen bietet das Plugin Lazy Loads. Es bewirkt, dass nur diejenigen Bilder geladen werden, die gerade sichtbar sein sollen. Wer also auf seiner Startseite die letzten 10 Blog-Posts anzeigt und jeder hat etliche „schwere” Bilder, der ist mit dem Einsatz dieses Plugins sowieso gut bedient.

Auf die Möglichkeit der WordPress-Bildbearbeitung fürs Verkleinern sollte man übrigens nur in Notfälle zurückgreifen: Hierbei wird nämlich nur die Darstellung verkleinert. Das Bild selbst bleibt so groß (und schwer) wie vorher. Sprich: Nicht die Datenmenge wird reduziert, sondern nur die Darstellung.

Die Datenmenge ist ganz in Ordnung, wenn die Bilder etwa 200 KB groß sind. Da das – je nach Theme und Layout – nicht immer eine befriedigende Lösung ist, bleibt oftmals nur die Möglichkeit, entweder in Photoshop nochmal selbst Hand anzulegen. Oder auf Apps und Dienste wie JPGMini oder compressor.io zurückzugreifen.

Retina – immer zwei Varianten?

Und was ist nun mit den hoch gelobten Retina Displays bei Apple? Muss ich für eine ordentliche Darstellung nicht sowieso die größten und besten Bildqualitäten einstellen? Ja und nein. Ideal wäre es natürlich, wenn je nach Display und Anforderung die richtige Bilddatei eingebunden wird. Das kann das Plugin WP Retina 2x.

Prima! Dann kann ich ja meinem responsiven Theme die Wahl der richtigen WordPress Bildgröße überlassen. Die Plugin-Autoren weisen jedoch daraufhin, dass eine responsive Darstellung bevorzugt werden sollte, die Auswahl des Bildes über ein javascript die Fallback-Methode sein sollte.

Wordpress Bildgröße 620 px in der Desktop-Variante - aber 850 Pixel in Tablet-Modus.

WordPress Bildgröße 620 px in derDesktop-Variante – aber 850 Pixel in Tablet-Modus.

170130_jo_620

Responsiv – wie groß ist das genau?

Gibts sonst noch Hürden? Nur wenige. Beachten könnte man vielleicht noch, dass das Umspringen eines responsiven Layouts Bildgrößer erfordert, die man eventuell gar nicht auf dem Plan hatte. In diesem aktuellen Layout meiner Website zum Beispiel ist die größte Bilddarstellung 620 Pixel breit.

Wer jetzt mit dem Mauszeiger auf die rechte untere Ecke geht und beginnt, das Browser-Fenster zusammen zu schieben, der stellt fest, dass das Layout umspringt. Bei der Tablet-Größe verschwindet erst die rechte und später (fürs Smartphone) schließlich auch die linke Sidebar.

Die Folge: Die Bilder werden dann 850 Pixel groß dargestellt. Sind die Bilder mit nur 620 Pixel Kantenlänge hochgeladen, bleiben sie an manchen Stellen kleiner, als der dafür vorgesehene Platz im Layout. Aber damit kann man leben, wenn man nicht gerade als Fotograf die eigenen Werke anpreist.

Neues Layout – neue Bilder?

Aber nichts hält ewig. Irgendwann entscheidet sich jeder WordPress-Benutzer mal für ein andere Layout, gerne mit größerer Bilddarstellung. Nur die Beiträge der vergangenen Jahre wirken jetzt etwas verloren – denn sie sind viel zu klein für das neue Layout. Schließlich ist das Internet schneller geworden, der Rechner leistungsfähiger.

Also jetzt alle Bilder nochmal raussuchen, neu bearbeiten, nochmal hochladen? Auch dafür gibts ein Plugin: Regenerate Thumbnails legt die nächst kleineren Bildgrößen neu an. Egal ob man jetzt einfach in den WordPress-Voreinstellungen die Maße geändert hat oder – was öfters vorkommt – ein neues Theme installiert hat.

Aber auch hier gilt wie immer in der Bildbearbeitung: Größer machen geht nicht. Wenn ich also stets nur Bilder mit 620 Pixel Breite hochgeladten habe, kann ich daraus für mein neues Thema keine Header-NBilder mehr mit 1180 Pixel Breite machen.

Mein Fazit:

  1. Die eigene Bildbearbeitung für eine „leichte” Version des größten benötigten Bildformates ist immer hilfreich. Ob ich das mit Photoshop, einer anderen App oder online mache ist egal. Das Original des Fotos sollte ich sowieso immer unverändert behalten.
  2. Die größte Online-Variante sollte das Bildmaß enthalten, dass ich für Webseite oder Soziale Medien brauche. Ausnahme ist Pinterest: Hier funktionieren Hochformate am besten, das verlangt zusammen mit der Nutzung als „Textbilder” immer eine eigene Verarbeitung.
  3. Für responsive Layouts darauf achten, wann ein Bild die größte Darstellung aufweist. Das  ist nicht immer in der Desktop-Version der Fall.
Wordpress Bildgrößen in einem modernen Layout: Große Header. Die sind aber noch am einfachsten auszuwechseln.

WordPress Bildgrößen in einem modernen Layout: Große Header. Die sind aber noch am einfachsten auszuwechseln.

War das hilfreich?
Dann würde ich mich freuen, wenn Sie den Beitrag teilen!

Social Media Banners in Photoshop erstellen

Wer in den Sozialen Medien vertreten ist (wer ist das nicht) kennt die Krux: Für jede Plattform muss man andere Banner oder Header gestalten. Die Bildmaße erfährt man, wenn man sie denn nicht auf der jeweiligen Website findet, in irgendwelchen Spickzetteln (CheatSheets) mit Infografiken, die sich im Web großer Beliebtheit erfreuen.

Dann kommt noch dazu, dass man nicht nur seine Banner regelmäßig erneuern sollte, sondern auch jeder Social Media Kanal regelmäßig die Daten und Bildmaße ändert.

Ausgesprochen hilfreich ist deswegen der Beitrag von Phlearn, wo dankenswerterweise auch auch die Photoshop-Dateien in den richtigen Maßen auf der Website zur Verfügung gestellt werden: http://www.phlearn.com/socialmedia

Vertreten sind zwar „nur” Facebook, Twitter und Youtube, aber das dürften für die meisten ja auch die wichtigsten sein. Google+ erfreut sich nicht gerade wahnsinniger Beliebtheit, Instagram, Pinterest und Tumblr kommen mit Profilfotos aus.

160511_fb_profilfoto

War das hilfreich?
Dann würde ich mich freuen, wenn Sie den Beitrag teilen!

Den Sonnenuntergang nachträglich ins Bild basteln

Wer Fotos verkauft oder in Sozialen Medien nach Likes fischt (beides dürfte dieselben Funktionen benötogen), der kennt den Effekt: Tiere und Kinder gehen immer, Sonnenuntergänge sind auch ganz prima. Wer vorwiegend Landschafts-Fotografie macht, dem bleiben nicht arg viele halbwegs „sichere“ Motive. Und wer kann schon jedes Motiv mit Sonnenuntergang fotografieren?

Nun bin ich was Bildbearbeitung anbelangt etwas altmodisch: Was nicht drauf ist auf dem Foto sollte man auch nicht hineinmontieren. Das wirkt schnell etwas albern, außerdem ist es unehrlich und es wäre doch höchst peinlich dabei erwischt zu werden.

Wer aber nicht journalistisch oder für andere Auftraggeber fotografiert, sondern für seine Website oder seine Facebook-Seite, der fischt vielleicht gerne mit diesem Trick nach Anhängern: How to create a sunset effect in Photoshop.

Man braucht dazu Photoshop, eine ältere Version sollte auch genügen. Und man braucht natürlich das passende Bild, denn nicht alle Fotos profitieren von diesem Effekt, auch lange nicht alle Landschaftsfotos. Besonders geeignet ist das Verfahren nach meiner Ansicht dann, wenn man Hintergründe braucht, zum Beispiel für eine Website, für einen Flyer, eine Anzeige. Dann muss das Foto ja auch nicht mehr unbedingt authentisch sein. Wie bei allen Effekten der Bildbearbeitung gilt: Man benutze es mit sehr viel Fingerspitzengefühl.

Wenn man seine Bilder aber vorwiegend lokal (oder mit lokalem Bezug) verwendet, kann es auch durchaus peinlich enden: Wenn jemand die Szenerie kennt und feststellt, dass an dieser Stelle niemals die Sonne auf- oder untergehen kann, dann steht man eben schnell als Mogler da, der seine Bilder manipuliert.

War das hilfreich?
Dann würde ich mich freuen, wenn Sie den Beitrag teilen!

Affinity Photo – Professionelle Bildbearbeitung abseits des Platzhirsches

Affinity

Seit Adobe seine Software auf das Mietmodell umgestellt hat und damit bei mir ein Mehrfaches an Kosten verursachen würde, suche ich nach Alternativen. Die sind bislang eher dünn gesät. Photoshop-Konkurrenten mangelt es oft am CMYK-Modus, der für den Druck unverzichtbar ist. Und look-and-feel der Alternativ-Programme ist meistens ebenfalls sehr gewöhnungsbedürftig.

Jetzt wirbt die Website Affinity mit drei neuen Programmen, die den Platzhirschen Konkurrenz machen könnten.

Das Design-Programm ist bereits im App-Store zu haben, für schlappe 50 Euro. Mein Favorit wären allerdings das Bildbearbeitungsprogramm Affinity Photo – Professional image editing software for Mac. Und sehr wahrscheinlich auch das Layout-Programm.

Alle drei Versionen (die zwei anderen Programm sind derzeit kostenlose Beta-Versionen) sehen schon mal gut aus und haben auf dem Papier die wichtigsten Features. Selbst wenn die Preise noch steigen, ist da noch viel Luft nach oben.

War das hilfreich?
Dann würde ich mich freuen, wenn Sie den Beitrag teilen!

Lens Flare und Light Beam mit Photoshop: reizvolle Mogeleien

Lensflares will man ja normalerweise eher vermeiden: Das sind die Lichtreflexe, die bei Gegenlicht und meistens weit geöffneter Blende entstehen. Aber was früher als Fehler galt, kann heute auch schick sein. Und wenn man sie nicht schon auf seinen Bildern hat, dann kann man sie nachträglich einbauen: Is It Ever Okay To Add A Lens Flare In Photoshop?.

Während man damit an einem eigentlich guten Foto nachträglich die Optik „verschlimmbessert”, gibt es natürlich auch genügend Motive, bei denen man sich Effekte und Inhalte wünscht, die man aber einfach nicht vors Objektiv bekommt. Einfallende Sonnenstrahlen zum Beispiel. Serge Ramelli erklärt in einem Tutorial einen (für mich ziemlich aufwändigen) Weg, auch diese Licht-Effekte nachträglich ins Foto einzufügen:

Die Tutorials von Serge Ramelli gehören mit zu den besten, die man kostenlos im Internet finden kann. Am besten gefallen mir seine Lightroom-Tutorials. Dieses hier ist für Photoshop, für meinen Geschmack schon etwas zu aufwändig und vor allem, naja Mogelei. Das ist für viele Zwecke ok, fürs Private, für Werbung. Für meine Bilder beschränke ich mich darauf, das Vorhandene zu verbessern. Ist aber interessant zu wissen, wie es geht.

War das hilfreich?
Dann würde ich mich freuen, wenn Sie den Beitrag teilen!