Wie optimiere ich meine Bilder für die Website?

Wie optimiere ich meine Bilder für die Website?

Hast du dir schöne Bilder für deine Website rausgesucht, aber bist dir unsicher, ob sie vor dem Hochladen noch bearbeitet werden sollen?

Oder weißt du noch nicht genau, was für Bilder du auswählen oder erstellen sollst?

Dann habe ich hier ein paar Richtlinien und Tipps für dich, um die richtigen Bilder zu finden und fürs Web zu optimieren. 

fotosblog

Auswahl der Bilder

Natürlich ist es wichtig, dass das gezeigte Bild zum Text passt. Aber es geht noch mehr: Bilder transportieren Stimmungen, Informationen, können Sachverhalte verdeutlichen und sagen ja bekanntlich oft mehr als 1000 Worte. Stockfotos (Quasi von Fotografen auf Vorrat produzierte Bilder wie z.B. von Schreibtischen, Blumen, lachenden Menschen etc., die man sich online teilweise kostenlos herunterladen kann) sind an einigen Stellen okay, deine Seite sollte aber immer auch echte Fotos von dir beinhalten. Achte bei Fotos von dir für deine Website darauf, dass du Kleidung trägst, die auch zu deinen Corporate Farben passt 🙂

Welches Bildformat – JPEG, PNG, GIF, …?

Die beiden gängigsten Bildformate für Websites sind JPEG (bzw. JPG, da die gängigen Dateiendungen immer 3 Zeichen beinhalten) und PNG. Doch was ist hier nun der Unterschied?

PNG Dateien können mehr Informationen speichern als JPGs und lassen sich beliebig häufig verarbeiten und skalieren, ohne, dass die Bildqualität leidet. Außerdem können sie einen transparenten Hintergrundbereich haben, was sie vor allem ideal für Logos und Infografiken macht. Der Nachteil bei PNGs ist aber, dass die Dateien größer sind (als JPGs mit gleichen Abmessungen) und somit langsamer geladen werden.

JPGs können nicht verlustfrei komprimiert werden und die Bildqualität wird schnell sichtbar schlechter, wenn man die Bilder häufiger (in mehreren Schritten) bearbeitet. Für Fotos sind sie aber aufgrund der geringen Dateigröße gerade für den Internetauftritt ideal. Außerdem ist mit dem bloßen Auge oft kein Qualitätsunterschied zu erkennen im Vergleich zu PNGs, wenn man die Fotos auf der Website einbindet.

Es gibt außerdem noch GIFs, die animiert sein können. Bestimmt hast du schonmal in einem Newsletter oder in einem Messenger die kleinen Bewegtbilder gesehen:

Animiertes GIF von giphy.com

GIFs müssen allerdings nicht animiert sein. Die Bilder können verlustfrei komprimiert werden (super!), haben dann allerdings nur 256 verschiedene Farben (nicht so super für Fotos!).

 

Größe & Abmessungen

Als grobe Richtlinie ist es empfehlenswert, dass die hochgeladenen Bilder 200 KB nicht überschreiten sollten. Gerade bei detailreichen PNG Grafiken ist dies jedoch schnell der Fall. Nutze dann unbedingt einerseits den kostenlosen Online Service Tinypng.com (siehe 5.) – Grafikservices) und sorge andererseits dafür, dass die Bilder auch nur die Abmessungen haben, die sie unbedingt für die Website benötigen.

Was ist damit gemeint? An der Stelle, an der das Bild auf die Website eingefügt werden soll, wird ein bestimmter Platz „reserviert“, also z.B. 500×200 Pixel für eine Grafik mit 500 Pixeln Breite und 200 Pixeln Höhe. Statt dass du nun ein Bild hochlädst, das 1000×400 Pixel als Maße hat und dies durch WordPress und den Browser auf die Hälfte schrumpfen lässt, verkleinerst du das Bild am besten vor dem Hochladen schon auf die benötigten 500×200 Pixel und sparst somit Ladezeit durch eine kleinere Dateigröße und Rechenarbeit beim Laden der Website.

 

Woher bekommt man überhaupt gute Stockfotos?

Die bekanntesten Quellen für kostenlose, lizenzfreie Stockfotos sind:

  • Pixabay
  • Unsplash
  • Pexels
  • teilweise Picjumbo (haben aber auch viele kostenpflichtige Fotos)
  • Stocksnap.io

Bei der Verwendung der Fotos musst du im Vorfeld in den jeweiligen Nutzungsbedingungen prüfen, ob du eine Quellenangabe auf deiner Website vornehmen musst (in der Regel ist dies nicht der Fall).

Auch in Canva (siehe nächster Punkt Grafikservices) findest du viele großartige Stockfotos, vor allem in der Pro Version (kostenpflichtig).

Bei Flickr gibt es eine riesige Auswahl (mehrere Milliarden Bilder), es ist jedoch eine Quellenangabe notwendig und die Lizenzbedingungen sind etwas komplizierter.

Gute Stockfotos kann man z.B. kaufen auf:

  • Shutterstock
  • iStock
welchesformat

Stockfoto von canva.com

Grafikservices

Canva

Wer Canva noch nicht nutzt, hat echt etwas verpasst. Es lassen sich damit mittlerweile unheimlich viele verschiedene Arten von Grafiken erstellen, mit großartigen Vorlagen für alle Social Media Kanäle, für Präsentationen, Logos, Flyer, sogar für Websites. Du kannst auch eigene Fotos hochladen und zuschneiden. Die Bedienung ist ziemlich intuitiv und schnell erlernbar und schon in der kostenlosen Version gibt es eine große Auswahl an Elementen, Fotos und Schriften für jeden Geschmack. Unbedingt ausprobieren!

TinyPNG

Natürlich kannst du deine Bilder mit Programmen wie Adobe Photoshop oder dem kostenlosen Gimp komprimieren. Eine grandiose Alternative ist aber die Website TinyPNG, auf der du deine Grafiken bis 5 MB kostenlos hochladen und komprimiert (=kleinere Dateigröße) wieder herunterladen kannst, ohne dass die Qualität leidet. Unbedingt zu empfehlen, bevor du deine Grafiken auf die Website hochlädst – man spart hier teilweise 70, 80% der Dateigröße ein und das wirkt sich natürlich sehr positiv auf die Ladezeit aus!

 

WordPress Plugins

Auch WordPress hat natürlich einiges an Plugins zu bieten, die bei der Bildkomprimierung unterstützen. Die meisten sind in der kostenlosen Version eingeschränkt und komprimieren z.B. nur eine bestimmte Anzahl an Bildern pro Monat, aber das ist ja auch schon besser als nichts 🙂

reSmush.it

ist mit das beste Bildoptimierungsplugin für WordPress. Es lassen sich jedoch keine Abstufungen bei den Komprimierungen einstellen und es funktioniert nur für Bilddateien, die kleiner als 5 MB sind (was sie jedoch beim Hochladen auf eine Website eh sein sollten).

EWWW Image Optimizer & WP Smush

optimieren die Bilder schon automatisch beim Hochladen, können aber auch nachträglich noch zur Bildoptimierung verwendet werden. In der kostenpflichtigen Version ist die Kompression noch besser.

ShortPixel Image Optimizer

Mit diesem Plugin kann man in der kostenlosen Version bis zu 100 Bilder pro Monat komprimieren. Dabei wird das Originalbild immer behalten und die komprimierte Version in einem Extraordner abgespeichert. Es wird außerdem ein Vergleich angezeigt, damit man sehen kann, ob die Qualität für einen ausreicht oder nicht.  

Compress JPEG & PNG images

Bei diesem Plugin kann man auswählen, welche Bildgrößten komprimiert werden sollen (z.B. alle Bilder, die zwischen 1 und 2 MB groß sind). Die Komprimierung ist allerdings nicht verlustfrei.

Melde dich zu meinem Newsletter an und erhalte den kostenlosen E-Mail Kurs "Die 5 wichtigsten Elemente einer erfolgreichen Website"!

 7.) Suchmaschinenoptimierung

Für die Suchmaschinen ist es wichtig, dass du einen sprechenden Bildnamen verwendest. Am besten nutzt du für den Dateinamen die gleichen Keywords (=Suchbegriffe), auf die du deine Seite oder deinen Blogartikel auch optimierst, also z.B. CocktailamStrand.jpg.

Du kannst zudem nicht nur den Dateinamen einstellen, sondern auch den Alternativtext (z.B. „Hund mit Futternapf“), der angezeigt wird, falls dein Bild einmal nicht geladen werden kann. Der Alternativtext ist zudem für Blinde wichtig ist, die sich das dann vorlesen lassen. Bei WordPress lassen sich folgenden 4 Eigenschaften pro Bild konfigurieren, wobei der Titel automatisch vom Dateinamen vergeben wird und der Beschriftungstext unter dem Bild angezeigt wird: 

Alternativtext

Die Beschreibung wird nicht angezeigt, ist jedoch für dich wichtig, da du nach Begriffen aus diesem Text in der WordPress Mediathek suchen kannst.

Hoffentlich konntest du hier noch den ein oder anderen Tipp für deine Website Grafiken für dich mitnehmen! Schreib mir gern, welches deine liebste Website für Stockfotos ist und ob du schon mit Canva gearbeitet hast.

 

5 Tipps, um deine Website schneller zu machen

5 Tipps, um deine Website schneller zu machen

Geschwindigkeit ist einer der wichtigsten Rankingfaktoren für die Suchmaschinen und – noch viel wichtiger – für deine Besucher wirklich entscheidend, um deine Seite nicht genervt wieder zu verlassen. Angeblich soll eine Ladezeit von max. 3 Sekunden ein optimales Ergebnis sein.

In diesem Blogeintrag zeige ich dir 5 Stellschrauben, mit denen du die Ladegeschwindigkeit deiner Website verbessern kannst.

Analyse

Bevor du dich gleich daran machst, in WordPress direkt etwas zu verändern, solltest du die Ladegeschwindigkeit deiner Website prüfen – z.b. über Pingdom Website Speed Test oder Google Pagespeed Insights (kostenlos).

Bei den Google Pagespeed Insights werden dir auch gleich Vorschläge dazu gemacht, wie du deine Seite schneller machen kannst. Gib hierzu einfach die Adresse deiner Website ein und schau, welche Punktzahl (von 0-100) deine Seite Mobil und in der Desktopversion erreicht. 100 ist hierbei die beste Punktzahl.

Im unteren Bereich werden die Empfehlungen vorgestellt, die das Laden verbessern können, z.B. „Bilder in modernen Formaten bereitstellen“. So weißt du erst einmal ,wo du stehst, und ob es direkt schon etwas gibt, was du relativ einfach beheben kannst.

PageSpeed1
PageSpeed2

Bilder nicht größer als nötig

Ein großer Faktor für die Ladegeschwindigkeit deiner Website sind die Bilder. Je größer sie sind (Dateigröße und Maße), desto mehr Daten müssen beim Laden von der Website zum Besucher übertragen werden. Hier werden schnell kostbare Sekunden verschwendet, ohne dass eine unglaublich gute Druckqualität überhaupt für den Computerbildschirm, geschweige denn für ein Handydisplay, benötigt wird.

Vor dem Hochladen solltest du die Bilder z.B. mit tinyPNG verkleinern. Falls dein Bild keinen transparenten Hintergrund benötigt (wie es bei einem Logo häufig der Fall ist), ist das Format JPG besser geeignet als PNG. Für WordPress gibt es außerdem viele gute Plugins, meist mit kostenlosen (abgespeckten) Versionen, die deine Bilder ebenfalls im Hintergrund verkleinern, z.B. EWWW Image Optimizer.

 

Aufräumen

Halte dein WordPress sauber! Dazu gehört auch, dass du alle Plugins und Themes löschst, die nicht benötigt werden. Bei der Auswahl deines WordPress Theme solltest du zudem die Geschwindigkeit im Hinterkopf behalten – je mehr fancy Features es enthält, desto langsamer ist es meist auch insgesamt. 11 schnelle, kostenlose WordPress Themes sind Hello Elementor, Neve, Astra, Generate Press, Page Builder Framework, OceanWP, Zakra, Customify, Twenty Twenty, Responsive und Sydney (siehe ausführlichen Geschwindigkeitstest dazu hier).

WordPress speichert außerdem jede Überarbeitung deiner Seiten und Beiträge. Dies ist natürlich praktisch, wenn du aus Versehen etwas gelöscht hast, oder doch lieber zu einer älteren Version zurückkehren möchtest, allerdings kann dies bei hunderten von Revisionen die Datenbank ganz schön groß machen.  Ich empfehle dir, die Anzahl an Revisionen auf z.B. 5 oder 10 zu begrenzen.

Dies geht entweder händisch, in dem du die wp-config.php Datei deines WordPress Hauptverzeichnisses bearbeitest: 

Füge nach der Zeile

* @package WordPress
*/

die Zeile

define('WP_POST_REVISIONS', 5);

ein, um jeweils bis zu 5 Revisionen zu speichern (und mache bitte vorher ein Backup der wp-config.php Datei, falls etwas schieflaufen sollte).

Alternativ kannst du die gleiche Einstellung auch mit einem Plugins wie z.B. wp-revisions-control vornehmen.

Melde dich zu meinem Newsletter an und erhalte den kostenlosen E-Mail Kurs "Die 5 wichtigsten Elemente einer erfolgreichen Website"!

Plugins:

Natürlich gibt es auch für die Geschwindigkeitsoptimierung einige kostenlose WordPress Plugins 🙂 Empfehlen möchte ich an dieser Stelle:

  • a3 Lazy Loadmit diesem Plugin werden bestimmte Inhalte deiner Seite erst beim Herunterscrollen geladen. Somit muss wirklich nur der kleine obere Bereich, der sofort sichtbar sein soll, komplett geladen werden und alles andere kommt dann erst nach Bedarf.
  • Autoptimize optimiert, komprimiert, fasst einige der WordPress Dateien zusammen, die dann schneller zusammen ausgeliefert werden können, als wenn für jede einzelne Mini Datei eine eigene Anfrage gestellt werden muss.
    Es gibt viele Anleitungen zu den optimalen Einstellungen, die du durchprobieren kannst, falls du Zeit und Lust hast 😉 Ich habe mit den folgenden Einstellungen eine sehr gute Optimierung erreicht:
    • JavaScript-Code optimieren
    • JS-Dateien zusammenfügen
    • CSS-Code optimieren
    • CSS-Dateien zusammenfügen
    • CSS-Dateien zusammenfügen
    • HTML-Code optimieren
  • EWWW Image Optimizer oder Smush für Grafiken. Diese Plugins können im Hintergrund deine hochgeladenen Bilder komprimieren, damit diese verkleinert und somit schneller geladen werden.
  • WP Super Cache – Durch ein Caching Plugin wird ein Zwischenspeicher erstellt, sodass viele Daten der Website auf dem Gerät des Besuchers zwischengespeichert werden können, und nicht immer wieder neu geladen werden müssen. Das WP Super Cache Plugin kann einerseits so einen Cache bereitstellen, und fasst andererseits die Anfragen auf viele kleine Dateien deiner Website in eine größere Anfrage zusammen, sodass die Seite insgesamt schneller geladen werden kann.
  • WP-Optimize – Clean, Compress, Cache – hiermit lassen sich auch die in Punkt 3 erwähnten Revisionen bereinigen und insgesamt die Datenbank optimieren, Bilder und Code komprimieren und Caching aktivieren. Bitte achte darauf, dass du nicht mehrere Plugins mit Caching Funktion gleichzeitig laufen hast, da sich diese gegenseitig behindern und zu Fehlern auf der Seite führen können.

Hosting Einstellungen

Die Wahl deines Webhosters hat auch Auswirkungen auf die Geschwindigkeit deiner Website! Mein Favorit ist nach wie vor all-inkl.com* (affiliate link), die auch im ausführlichen Webhoster Test von blogmojo sehr gut abgeschnitten haben.

Mit drei weiteren Einstellungen für technisch Fortgeschrittene lässt sich die Geschwindigkeit deiner Website in der Regel noch weiter verbessern:

  • Komprimierung aktivieren. Hierzu gibt es verschiedene Anleitungen im Internet, in den meisten fügst du einen bestimmten Code in die .htaccess Datei auf deinem Webserver im Hauptverzeichnis ein, z.B.:
    <FilesMatch “\.(js|css|html|htm|php|xml)$”>
    SetOutputFilter DEFLATE
    AddOutputFilterByType DEFLATE text/html text/plain text/xml
    </FilesMatch>
  • PHP 7 benutzen. Wenn du eine veraltete PHP Version nutzt, ist deine Website nicht nur unsicherer, sondern auch langsamer. Du kannst die Version in vielen Fällen bei deinem Webhoster direkt im Adminbereich umstellen (in diesem Blogartikel in Schritt 6 zeige ich dir das für all-inkl.com), oder du schreibst deinem Webhoster eine E-Mail.
  • HTTP/2 benutzen. Für das schnellere HTTP/2 musst du auf jeden Fall SSL Verschlüsselung für deine Website aktiviert haben. Ab Apache 2.4 wird HTTP/2 unterstützt. Welche Version bei deiner Website aktiv ist und wie dies umgeschaltet werden kann, ist wieder je nach Webhoster ganz unterschiedlich. Bei all-inkl.com ist ggf. eine E-Mail an den Support notwendig, falls bei dir noch eine ältere Version aktiv ist. Bei mir war alles auf dem neuesten Stand 🙂 Du kannst dies nachschauen, in dem du eine phpinfo Datei erstellst:
    Erzeuge eine neue, leere Textdatei und füge den folgenden Inhalt ein:
    <?php
    phpinfo();
    ?>

    Nenne die Datei z.B. info.php und lade sie dann auf deinen Webserver über FTP hoch. Wenn sie im Hauptverzeichnis ist, kannst du sie über www.deinDomainname.de/info.php einfach im Browser aufrufen und bekommst dann viele Infos über die Konfiguration deines Webservers angezeigt. Lösche die Datei danach am besten wieder, damit sie nicht von potentiellen Angreifern genutzt werden kann.
    Beispiel Inhalt php Info Seite:

phpInfo

Ich hoffe, dass du hier den ein oder anderen Tipp umsetzen und die Ladegeschwindigkeit deiner Website etwas erhöhen konntest. Schreibe mir gern, wie sich die Geschwindigkeit vor und nach dem Umsetzen der Tipps verändert hat!