Inhalte
Wenn ihr meine Beiträge auf seejey.de gesehen habt, werdet ihr festgestellt haben, dass die Bilder, die ich für die Artikel hernehme auf eine bestimmte Bildgröße angepasst habe. Das hat auch seine Gründe: zu große Bilddateien sprengen nicht nur den Rahmen, sondern verbrauchen auch sehr viel Speicherplatz, was wiederum zu einer geringeren Ladegeschwindigkeit führt. Jeder, der mal eine langsame Seite geladen hat, kennt die Nachteile beim Lesen ganz genau. Deshalb gebe ich hier mal einige Tipps, wie man für einen WordPress Blog die Bilder optimiert. Neben einigen minimalen Einstellungen über Plug-Ins lassen sich durch einige Anpassung im Editor die Bilder optimieren! Die Bildgröße anzupassen ist relativ simpel und wenn man sie von Anfang beherzigt, dann läuft die Seite reibungslos!
Tipps für die optimale Bildgröße
Bilder schon vor dem Einfügen editieren
Im WordPress Dashboard lassen sich zwar problemlos Bilder hinzufügen, hochladen und in der Größe verändern. Doch diese nachträgliche Optimierung ist nicht ganz unproblematisch: zum einen müssen Qualitätsverluste in Kauf genommen werden, die bei der automatischen Anpassung nicht auf die Schnelle bearbeitet werden und zum anderen können im Hinblick auf den Bereich Suchmaschinenoptimierung Rankingverluste bei Bildern vorkommen. Google bewertet nachträglich komprimierte Bilder neu und die Bildersuche könnte sich nachteilig wirken! Deshalb sollte die Komprimierung schon vorher vollführt werden, damit die passende Bildgröße zum Inhalt passt.
Man kann es ganz einfach machen, indem man die Bilder mit kostenlosen Bildbearbeitungsprogrammen wie Windows integriertem Bildbearbeitungsprogramm Microsoft Office Picture Manager oder kostenlose Programmen wie Picasa auf die Schnelle komprimiert. Es gibt beim Office Picture Manager die Möglichkeit, die Bilder auf Website zu komprimieren oder die Größe individuell anzupassen. Die Bildgrößen sehen dementsprechend folgendermaßen aus:
Es gibt im Internet auch die Möglichkeit anhand spezieller Tools mehrere Bilder zu komprimieren. Das Bild vom Olympiapark wurde nun mit www.picresize.com auf die Pixelgröße 800×55 komprimiert. Interessant: Bildgröße ist zwar größer als die das Format 640×427. Jedoch ist der Speicherplatz mit 108KB geringer als die 154KB vom Bild mit Komprimierung über den Office Picture Manager. Das Bild wurde im Artikel nochmal auf Die Bildqualität sieht dann so aus:
Bei einer Einsparung lässt für jedes Bild sehr viel Speicherplatz im Vergleich zu anderen Tools einsparen (rund 90-100KB pro Bild) und die Bildqualität ist auch aufgrund der Größe eher ein Hingucker als das Miniformat mit 640 Pixeln Breite.
Was auch nicht vernachlässigt werden sollte: gebt jedem Bild einen passenden Namen! Dateinamen mit IMG32332 hört sich nicht nur wie ein Robotermodell der Star Wars Saga an, sondern ist auch in Sachen Bildoptimierung bei Suchmaschinen kein Idealfall! Fotoblogs, die mit Bildern arbeiten, sollten alle Bilder mit individuellen Beschriftungen versehen. Wenn ihr bei der Suche in der Mediathek nach einem speziellen Bild sucht, kann das von Vorteil sein.
Die Anpassung an mobile Endgeräte
Die meisten Blogger haben das Problem schon mit Bildern gemacht, die ein wenig über den Rand hinausschießen. Ihr habt ein Bild komprimiert, beschriftet und es im Artikel integriert. Und auch der Artikel sieht mit den Bildern gut aus. Allerdings gibt es nicht selten eine Abweichung zur Desktopversion, wenn man zum Handy greift: man sieht den Text und dann kommen Bilder, die zu groß ausgefallen sind und durch Verkleinern des Bildschirms sieht man den Text nicht mehr. Das ist alles andere als schön.
Deswegen sollten an der Template-Vorlage sowie im Programmiercode einige Anpassung vorgeführt werden. Nicht schlecht wäre es, wenn das Theme auf der Grundlage eines responsiven Designs basiert. Responsive Themes begünstigen die Gestaltung von Internetseiten speziell für Smartphones oder Tablets, ohne dass der Nutzer zusätzliche Plug-Ins installieren muss. Die Technik basiert auf HTML5 und CSS3 Basis. Die eine Version, die man auf dem Desktop sieht passt sich an die Entwicklungsumgebungen der Geräte an. Zudem sollten im Hinblick auf die Seitenbreite bei Smartphones maximale Breitenanpassungen vorgenommen werden, auch wenn die Smartphones Auflösung in den letzten Jahren noch verbessert wurde.
Wenn Artikel in Bildern zu groß ausfallen und ihr sie auf die maximale Breite anpasst, dann sollte mal geschaut werden, ob im Editorbereich im Stylesheet dieser Eintrag vorahnden ist:
img {
max-width: 100%;
height: auto;
}
Wenn er nicht vorhanden ist, dann tragt ihn am Ende ein.
Welche WordPress Plug-Ins sind nützlich?
Nachhelfen kann man mit Plug-Ins immer, wenn man nicht stundenlang programmieren möchte. Doch wenn ihr mich fragt: nutzt nicht mehr Plug-Ins als nötig und nur wenn sie wirklich dringend benötigt werden. Cache-Plug-Ins finde ich beispielsweise sehr nützlich, weil die Performance gefördert wird! Kleine Option, die kein Muss ist: mit Resize Image after Upload lassen Bilder auf einen Maximalbereich nach dem Upload skalieren! Mit dem Widgets Controller lassen sich einige Sidebar Inhalte ausblenden, wenn sie nicht wirklich gebraucht werden. Dann kann die Breite des Bildes noch mal zum Ausdruck gebracht werden. Aber die Gestaltung ist hier individueller Natur.
Welche Bilder verbrauchen viel Speicherplatz
Ihr kennt bestimmt das Tool hier unter https://developers.google.com/speed/pagespeed/ , wo die Ladegeschwindigkeit anhand mehrerer Faktoren zu einem Endresultat führen. Das Tool nutze ich gern für die optimale Bildgröße einzelner Pics und kann als Fotoblog natürlich nicht auf über 90% Bewertung kommen, wenn in den Artikeln viele Fotos (, die schon optimiert sind) und Videos eingebaut werden. Hier sollte man sich als Webmaster fragen, was für die User sinnvoll ist. Wollen die Leser Inhalte mit Bildern und optischen Highlights oder wollen sie nur Text lesen, der in Sachen Ladegeschwindigkeit ruckzuck läuft? Bei letzterem müsste ich alle Bilder rausschmeißen, um dem gerecht zu werden und das ist für einen Blog untypisch.
Ihr seht schon, dass die Gestaltung eines Fotoblogs alles andere als eine triviale Angelegenheit ist. Zur Bildoptimierung und zur passenden Bildgröße lassen sich noch unendlich viele weitere Tipps geben. Doch ich habe mich nun auf einige wichtige Punkte beschränkt.
