Bilder automatisch optimieren

Befasst man sich mit der Performance-Optimierung des eigenen Blogs, so dreht sich ein wesentlicher Teil hierbei um die bei jedem Seitenaufruf übermittelten Dateien und deren jeweilige Dateigröße. Durch zahlreiche Einbindungen von JavaScript, CSS und Bildern werden beim Aufruf eines Blogs zahlreiche Dateien nachgeladen. Jede dieser Dateien verlangsamt den Seitenaufbau und vergrößert das insgesamt übertragene Dateivolumen. Zwar muss man sich im Zeitalter von DSL und LTE-Verbindungen auf dem Smartphone hierum natürlich weniger Gedanken machen, als noch zu Zeiten von ISDN oder Modem-Verbindungen, jedoch strafen Suchmaschinen wie Google Webseiten mit unnötig viel Dateibalast ab.

Eine Webseite mit relevantem Inhalte und guter Programmierung wird von Google abgestraft werden, wenn die eingebundenen Dateien unnötig groß sind und somit das Surferlebnis des Webseiten-Besuchers spürbar negativ beeinflussen. Relativ einfach ausgedrückt verhält es sich hierbei wie mit dem Glas Milch und der Kuh: Wer ein Glas Milch trinken kaufen möchte, kauft sich auch nicht gleich eine ganze Kuh! Wer ein Bild auf einer Webseite einbindet, macht dies in der Regel nicht, damit der Webseiten-Besucher das Bild hochauflösend ausdrucken oder weiterverwenden kann. Das Bild steht in einem Kontext und dieser wird seltenst durch höchstauflösende Bilder mit 16 Megapixeln besser oder deutlicher.

Verkaufen Sie Ihren Besuchern keine Kuh!

Häufigste Bildschirm-Auflösungen

Quelle: http://www.w3schools.com/browsers/browsers_display.asp

Ein in einer Webseite eingebundenes Bild sollte grundsätzlich an die Bildschirmauflösung der Besucher angepasst sein. Häufig werden die Originalbilder per Drag&Drop in WordPress hochgeladen und haben dann Abmessungen von 2000 bis 3000 Pixeln in der Breite und/oder Höhe. Ein Großteil der Surfer im Internet wird eine deutlich kleiner Bildschirmauflösung haben und somit das eingebundene Bild nicht ohne Scrollen sehen können. Dies bedeutet für den Besucher in keinem Fall einen Mehrwert, sondern eher im Gegenteil ein schlechtes Erlebnis beim Surfen. Das Bild sprengt im wahrsten Sinne des Wortes die Webseite.

Zwar haben sich die am PC dargestellten Pixel in den letzten Jahren deutlich vermehrt, jedoch sind die Megapixel von Digitalkameras ebenso deutlich mehr geworden, so dass ein einfaches Einbinden von Fotos einer Digitalkamera nicht ausreicht. Eine beispielhafte Übersicht über die am häufigsten verwendeten Bildschirm-Auflösungen bietet z. B. W3Schools: Browser Display Statics. Die Bilder müssen vor dem Upload und Einbinden in die Webseite oder den Blog optimiert werden.

Bildgröße ändern

Um die Bildgröße, also die Pixel, die das Bild groß ist zu ändern, gibt es unzählige Möglichkeiten und Tools. Jeder muss für sich hier die am besten geeignete Methode finden. In jedem Fall empfiehlt es sich aber, Bilder bereits vor dem Upload auf den Webspace in ihrer Größe zu optimieren. Selbst, wenn im Anschluss an den Upload die Bildgröße noch durch ein WordPress-Plugin oder Script geändert wird, schleppt man dauerhaft das Bild in seiner ursprünglichen Größe mit sich herum. Dies kann bei sehr aktiven Blogs schnell in einer großen Datenmenge resultieren, die z. B. bei jedem Backup etc. mitgeschleppt werden muss ohne einen tatsächlichen Mehrwert zu bieten.

Möchte man Bilder vor dem Upload noch nachbearbeiten, so kann sich der Einsatz von einem richtigen Bildbearbeitungsprogramm lohnen. Hier kann es durchaus Sinn geben ein paar Euros für ein solches, aktuelles zu investieren. Natürlich gibt es auch unzählige kostenlose Bildbearbeitungsprogramme, jedoch sind diese häufig kompliziert in der Benutzung oder ihnen fehlenden nützliche Funktionen. Eine Übersicht der beliebtesten Bildbearbeitungsprogramme finden Sie hier:

[amazon bestseller=“12761371″ items=“2″]

Bildgröße kostenlos ändern

Wer jedoch nur die Größe von Bildern kostenlos ändern möchte und dies möglichst einfach tun will, der sollte sich den (für Windows erhältlichen) Image Resizer for Windows anschauen. Dieses kleine (und geniale) Tool ist denkbar einfach in der Benutzung und zeitgleich unheimlich effizient:

  1. Den kostenlosen und schlanken Image Resizer einmalig installieren,
  2. im Datei-Explorer das zu verkleinernde Bild auswählen und mit einem Klick auf die rechte Maustaste das Datei-Menü öffnen und Bilder neu skalieren auswählen,
  3. die gewünschte Dateigröße auswählen – fertig!

Der Image Resizer behält die Proportionen des Bildes automatisch bei (außer man überschreibt diese manuell) und speichert das Bild mit dem gleichen Dateinamen, ergänzt um den Größenzusatz im Ordner ab, in dem sich das Originalbild befindet.

Bilder direkt im Datei-Explorer optimieren mit dem Image Resizer.Die Proportionen des Bildes bleiben automatisch bestehen.

 

 

 

 

 

Die nun mit drei Mausklicks in der Größe optimierten Bilder können auf den Webspace hochgeladen werden und sind zumindest in den Abmessungen optimiert, so dass, sofern man die am weitesten verbreiteten Bildschirmauflösung beachtet, das Bild nicht das Design des Blogs zersprengen und den Besucher der Webseite frustrieren sollte. Jedoch gibt es neben der Auflösung eines Bildes auch noch die Dateigröße, die, wie eingangs erwähnt, bei groben Patzern von Google & Co. abgestraft wird. Neben der Optimierung der Auflösung muss man sich also definitiv auch noch mit der Optimierung der Dateigröße eines Bildes befassen.

Bilder verkleinern

Die typischen Dateiformate im Internet für Bilder, JPG (oder JPEG geschrieben), PNG und GIF lassen sich in unterschiedlichen Qualitätsstufen abspeichern. Eine höhere Qualitätsstuf geht hierbei einher mit einer größere Dateigröße (also mehr Kilobytes oder gar Megabytes). Ein Bild mit den gleichen Abmessungen (z. B. 800×600 Pixel) kann also trotz des selben Inhalts unterschiedlich viele Kilobytes groß sein – abhängig von der genutzten Qualität des Bildes.

Wie eingangs bereits festgestellt, werden Bilder auf Webseiten in der Regel nur zur Untermauerung oder Ergänzung des eigentlichen Inhalts (Contents) genutzt. Es handelt sich also seltenst um Bilder, die nur in der bestmöglichen Qualität und höchstmöglichen Auflösung Sinn ergeben (außer man betreibt als Fotograf eine Fotogalerie auf seiner Webseite z. B.). Und da Google unnötig große Bilder abstraft, sollte man neben der Optimierung der Abmessung auch die Qualität für ein bestmögliches Erlebnis des Besuchers anpassen. In Hinsicht auf die Qualität eines Bildes, gilt es zu jonglieren: Weniger Qualität bedeutet eine geringere Dateigröße und somit eine bessere Performance der Webseite. Eine zu geringe Qualität führt die Nutzung des Bildes jedoch ad absurdum!

Optimus.io kostenlos nutzen.Mit dem WordPress-Plugion Optimus.io lassen sich Bilder komfortabel beim Upload hinsichtlich der Bildqualität optimieren. Dies spart einem einen weiteren, manuellen Arbeitsschritt und zahlt positiv auf die Performance ein. Neben der kostenlosen und eingeschränkten Variante des Plugins, gibt es auch zwei kostenpflichtige, bei denen jährlich eine Gebühr gezahlt wird (Optimus HQ und Optimus HQ Pro). Für (derzeit) 19 €/Jahr kann man mit Optimus HQ für alle einen Projekte das Plugin und den Service nutzen. Die Lizenz verlängert sich nicht automatisch.

Bilder kostenlos verkleinern

Natürlich gibt es auch für das kostenlose Verkleinern von Bildern kostenlose Tools im Internet. Das wohl am einfachsten zu bedienende ist Compressor.io! Bei diesem kostenlosen Dienst kann man unendlich viele Bilder hochladen und vom Dienst optimieren lassen. Das optimierte Bild lädt man dann wieder herunter und kann es z. B. im eigenen Blog nutzen. Der Betreiber verspricht, dass die Fotos nach 6 Stunden vom Server dauerhaft gelöscht werden. Darüber hinaus gibt man durch die Optimierung von Bildern keine Bildrechte an Dritte oder den Anbieter des Dienstes ab.

In jedem Fall muss man vor dem Einbinden von Bildern auf der eigenen Webseite diese hinsichtlich Auflösung und Bildqualität optimieren. Hierfür gibt es keinen Masterplan. In Abhängigkeit von den genutzten Tools und Plugins, muss jeder für sich selbst den einfachsten und besten Weg finden. Ich kombiniere den Image Resizer mit Optimus HQ um den Arbeitsaufwand für mich möglichst klein zu halten und habe hiermit bislang sehr gute Erfahrungen gemacht.

Schritt für Schritt zum schnellen WordPress

Ladezeit Extrem!

Mit diesem wirklich genialen Buch optimierst auch du garantiert die Ladezeit von deinem Blog!