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!

Video-Header bei Vimeo: Cover-Video

Ein Video-Header wertet jetzt die Vimeo-Profilseite auf. Das geht auch für die eigene Website.

Ein Video-Header wertet jetzt die Vimeo-Profilseite auf. Das geht auch für die eigene Website.

Video-Header fesseln die Aufmerksamkeit der Besucher gleich beim Aufruf einer Seite. Wenn es denn so läuft, wie geplant. Vimeo hat im ungleichen Wettkampf gegen den Video-Riesen Youtube jetzt ein kleines, aber feines Gimmick für seine Benutzer. Im Header des Profils lassen sich Videos einbetten. Wer ein paar spannenden Szenen hat, die auch in diesem speziellen Format gut aussehen, der sollte das Feature aktivieren.

Bei Vimeo heißt das Ganze Cover-Video. Und es ist eigentlich selbst erklärend. Wer sein Profil aufruft, der sieht direkt neben dem Button „Profil bearbeiten” auch gleich den Knopf „Cover-Video”. Man wählt aus den eigenen Videos das Passende aus. Dann sucht man sich eine bestimmte, nicht zu lange Sequenz und kann dann noch den Ausschnitt in der Höhe verschieben.

Wiedergegeben wird nämlich nur ein schmaler Streifen, der rund ein Drittel der Höhe des normalen Videoformats hat. Wer kein Video eigens dafür gedreht und geschnitten hat, der muss bißchen kniffeln, um das passende zu finden.  Ein eigenes Video alleine für diesen Zweck würde sich meiner Meinung durchaus lohnen.

Die Auseinandersetzung mit dem Thema lohnt aber auf jeden Fall. Mit zunehmender Bandbreite können Video-Header auch in eigenen Blog-Seiten zum Beispiel mit Wordpress eingesetzt werden. Bevor man sich ein neues Thema kauft oder lange an eigenen Lösungen herumbastelt, kann man hier ausporobieren, wie es wirkt. Und dann alles vielleicht schon bald auf die eigene Website übertragen.

Video-Header: 5 Tipps für das Cover und / oder die eigene Website

1. Die Loop-Länge

Das Video wird in einer Endlosschleife wiederholt. Wer nun ein allzu langes Stück aus einem seiner Videos auswählt, der verschenkt etwas von der gerade gewonnenen Aufmerksamkeit seiner Besucher. Statt wie das Kaninchen auf die Schlange zu starren, sollen die Besucher sich ja  auf die Videos des Profils oder der Website stürzen. Ideal ist nach meiner Ansicht eine Länge von rund 15 bis 30 Sekunden. Dann erkennt man als Besucher recht schnell, dass es sich hier um eine Wiederholungsschleife handelt. Und man weiß, dass man nichts verpasst, wenn man sich jetzt den anderen Videos und Inhalte widmet.

2. Der Ausschnitt

Für das Vimeo-Profil gilt auch hier das gleiche, wie für den heimischen Blog. Aus Gestaltungsgründen sind Header wie diese immer relativ schmal. Andernfalls wäre unter dem „Falz” ja nichts mehr zu erkennen. Der Falz bezeichnet zwar bei Zeitungen die Markierung der unteren Hälfte, die man erst auf den zweiten Blick erkennt. Aber den Falz gibt es natürlich auch Websites. Es ist derjenige Bereich der Seite, zu man erst durch Scrollen vordringt.

3. Schnitt

Schön wäre es, man könnte die passende Länge einfach aus einem seiner bestehenden Videos herausschneiden. Das kann klappen, muss aber nicht. Derzeit muss das Header-Video an einem Stück aus einem bestehenden Video extrahiert werden. Bei den meisten, journalistisch gestalteten Videos eignet sich dafür am besten der Anfang. Nach dem Motto „Sofort ins Thema” findet sich dort (hoffentlich) eine der interessantesten Szenen aus dem ganzen Video. Landschaftsvideos mit langen, gleichförmigen Einstellungen sind eher schwierig zu verwenden, Ausschnitte mit Menschen dagegen immer ein Hingucker.

4. Ton

Die Situation kennen wir von den Sozialen Medien. Auch dort ist der Ton durch die Benutzer angeschaltet bzw. durch den Anbieter per Voreinstellung auf „Aus”. Daran sollte man auch für die Website mit einem Video-Header festhalten. Nichts ist lästiger, als eine Website, die unvermittelt losdudelt. Und wegen des besonderen Formats scheiden Texteinblendungen aus.

5. Angepasstes Video erstellen

Es spricht vieles dafür, dass man nach erfolgloser Suche in den eigenen Beständen ein eigenes Video für diesen Zweck dreht oder zumindest aus dem vorhandenen Material zusammenschneidet. Dann bekommt man in der Kürze spannenden Bilder unter, hat den passenden Ausschnitt und kann stumme Szenen verwenden, die für sich sprechen.

Fazit: Wer Videos dreht, kann sowohl bei Vimeo als auch auf seiner Website heute Videos gut einsetzen. Weder die responsive Darstellung noch die Datenmenge sind unüberwindbare Probleme. Einziges Manko: Wer es perfekt haben möchte, muss selbst nochmal aktiv werden und kann schwerlich auf vorhandenes Material zurückgreifen. Und sowohl bei Vimeo als auch auf der eigenen Website sollte der Video-Header nach einiger Zeit ausgetauscht werden.

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

Den Website-Eingang verschönern: Fotos, Videos, Anreißer

Die neue Website von ECOIN Baden hat einen neuen, schöneren Website-Eingang bekommen.

Die neue Website von ECOIN Baden hat einen neuen, schöneren Website-Eingang bekommen.

Lange Zeit war ein Blog ein Blog, eine chronologisch sortierte Reihe von Artikeln. Sie bildeten auch den Website-Eingang. Der neueste stand oben, wer Interesse am Thema zeigte, scrollte nach unten. Heute sind Blogs suchmaschinenoptimierte Websites, bei denen Besucherzahlen und Werbe-Einnahmen eine Rolle spielen. Wer nur seine Infos an den Mann bringen will, könnte auf das ganze Schischi verzichten. Oder?

Besser nicht! Bloggen ohne Besucher macht deutlich weniger Spass als mit Besuchern. Und eine optisch schönere Eingangsseite ist immer auch eine Art höflicher Empfang.

Beispiel Biowinzer

Die Website für den Regionalverband ECOVIN Baden betreue ich schon lange. Nach den konventionellen Vorgänger-Versionen gabs kürzlich eine responsive, großzügiger gestaltete Seite.

Mit zwei neuen Videos, die ich kürzlich zum Thema Bioweinbau erstellt habe, sollte auch der Website-Eingang  einladender gestaltet werden. Weg von der klassischen, chronologischen Blog-Darstellung mit den jüngsten Artikeln auf der Vorderseite.

Die neue Seite zeigt in einem responsiven Slider die optischen „Leckerbissen”, beide Videos und ein Bilder jüngsten Galerie zur Präsentation. Außerdem gibts die beiden neuen Rubriken und einige Themen werden auf der Vorderseite angerissen. Der Plan ist, dass Besucher so schneller den Weg zu den attraktivsten Inhalten finden. Danach können sie sich dann mit den aktuellen Beiträgen auf dem Laufenden halten.

Braucht ein Blog heute einen schicken Website-Eingang?

Diese Frage stelle ich mir schon länger. Lange Zeit habe ich sie mit einem klaren Nein beantwortet. Eingangsseiten, so war meine Meinung, halten die Besucher nur vom Lesen ab. Sie stöbern, landen bei älteren Artikel, die ich einem Erst-Besucher nicht als Erstes zeigen würde. Ein Gräuel waren mir die von einigen Kunden geforderten „Willkommens-Seiten” ohne weitere Infos.

Zur Zeit überdenke ich das und bin dabei, für etliche Websites die Eingangsseite, den Empfang zu ändern. Das hat auch Gründe, die nichts mit dem Schielen auf Besucherzahlen und Werbeeinnahmen zu tun haben.

1. Bessere Orientierung

Der Besucher braucht beim Blog mit einer chronologischen Reihung der Artikel Zeit, um zu erkennen, was ihn hier erwartet. Gut, er kann sich an den Kategorien orientieren. Er kann einen Blick auf die „Über”-Seite werfen und einfach stöbern. Mit einer – wenn auch rudimentären – Eingangsseite sollte er zumindest auf Anhieb sowohl das Aktuellste sehen, als auch das, was der Anbieter als seine „Highlights” betrachtet.

2. Mehr Abwechslung

Auch im klassischen Blog steht das Aktuelle ganz oben. Damit bietet sich ebenfalls bei jedem neuen Besuch  ein neues Bild – im Idealfall. Die Kleinteiligkeit einer speziellen Eingangsseite zeigt aber vielleicht noch mehr Dinge, die man beim letzten Besuch nicht entdeckt hat. Wenns gut läuft, hält dieser Effekt einige Zeit an und man findet bei jedem neuen Besuch etwas, wo man einhakt.

3. Mehr Besuchs-Zeit

Viele Besucher einer Webseite kommen heute über Suchmaschinen. Sie machen eine Punktlandung bei dem Artikel, nach dem sie gesucht haben. Finden sie ihn interessant, bleiben sie kurze Zeit. Wenn nicht, sind sie gleich wieder weg. Wer nach dem Namen der Webseite sucht oder einfach den Anbieter sucht, der landet auf der Eingangsseite. Bei den meisten Blogs ist das der Statistik zufolge der zweithäufigste Einstieg.

Langes Suchen wünscht man keinem seiner Besucher. Aber man kann davon ausgehen, dass sich ein Besucher generell für das Thema der Seite interessiert. Und dann ist der Website-Eingang mit mehreren Inhalten der bessere Einstieg als die Artikel-Chronologie. Vorausgesetzt der Anbieter stellt diejenigen Thema vorne dran, die seine Besucher am meisten interessieren.

Mein Fazit

Für die meisten Blogger / Website-Betreiber sind die Zeiten vorbei, als man das Standard-Theme mühselig den eigenen Vorstellungen anpasste. Layout-Vorlagen und Themes gibt es heute in großer Fülle, kostenlos oder für wenig Geld. Das Festhalten an der klassischen Blog-Darstellung ist für mich verständlich. Bei vielen häufig von mir besuchten Blogs, macht es für mich auch keinen Unterschied, ob es einen Website-Eingang gibt. Mit der Zeit entwickelt man eine Routine darin, eine Website auf Inhalte zu scannen und nach den eigenen Kriterien zu bewerten.

Aber wie Suchmaschinen-Optimierung und generelle Layoutfragen ist auch die Struktur wichtig. Sie kann dazu zusammen mit dem Website-Eingang bewirken, dass mehr Menschen die Inhalte sehen. Und in die hat man meistens ziemlich viel Zeit und Arbeit gesteckt. Zwar besteht die Gefahr, dass Moden und Trends noch schneller vorbeiziehen und man noch häufiger als bisher alles neu aufmischt. Aber ein schöner und einladender Empfang ist nie verkehrt.

Mein Herz gehört aber nach wie vor auch jedem Blogger, der gute Inhalte bietet und meint, er will nicht in das magazinähnliche Erscheinungsbild Zeit und Arbeit investieren.

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

Welches WordPress-Thema, welche Plugins?

What WordPress

Oft genug kommt es ja vor, dass man auf WordPress-Websites stößt, die man sehr gelungen findet. Und wenn man selbst Websites erstellt – für sich oder andere – dann ist man auch neugierig. Mittlerweile werden eigentlich kaum noch WordPress-Websites von Grund auf neu entwickelt. In der Regel schlägt man dem Kunden mehrere Themes vor. Die gibt es ja recht preisgünstig, auf jeden Fall günstiger, als eine komplette Neuentwicklung.

Diese Themes werden dann angepasst, teilweise auch erst einmal übersetzt, wenn keine lokalisierte Fassung vorliegt. Erst wenn die optische Anpassung geschehen ist und die Funktionen eventuell durch Plugins erweitert sind, geht es an die Inhalte.

Neugierige schauen deshalb oft genug einfach in den Quelltext, dort findet man auf jeden Fall einen Hinweis auf das verwendete Theme und manchmal auch auf die Plugins. Diese Website erleichtert nun auch dieses Vorgehen: What WordPress Theme Is That?. Einfach die URL eintragen, und die Website gibt Auskunft.

Nun könnte man vermuten, dass man damit Informationen herausgibt, die nicht jeden was angehen. Aber diese Infos sind ja sowieso schon vorhanden, man muss sie nur herauslesen, im Wortsinne.

Interessant auf dieser Website sind auch die beiden Rubriken unter „Most popular”: Dort findet man die beliebtesten Theme-Anbieter (also nicht die beliebtesten Themes selbst) und die beliebtesten Plugins. Für Routiniers bietet auch das keine echten Überraschungen, für Einsteiger ist es eine wertvolle Orientierungshilfe.

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

Make – ein WordPress-Theme selbst machen

Make

Das Thema kommt immer wieder hoch, in Tutorials, Anleitungs-Videos, bezahlten Lehrgängen und mit weitgehend anpassbaren Themes: Make — A free WordPress theme. Die Kurz-Anleitung klingt ganz vielversprechend, die Beispiele sehen ebenfalls gut aus.

Wer mit WordPress starten möchte und sich nicht selbst in die Materie einarbeiten will, der hat im Prinzip zwei Alternativen: Ein fertiges Theme kaufen, kostet so um die 50 US-Dollar und von vorneherein darauf achten, dass man viele Anpassungen selbst vornehmen kann. Diese Möglichkeiten sind aber nicht immer von vorneherein einsehbar und eben doch recht beschränkt. Oder eben dieses hier gratis herunterladen und den Theme-Builder benutzen. Wer 99 US-Dollar anlegt, der erhäält mehr Möglichkeiten und kann zum Beispiel auch Widgets nutzen.

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