Lieben Sie nicht auch Bilder?

Sie können einen Text in ein fesselndes Leseerlebnis verwandeln. Bilder werten einen Blogbeitrag auf, machen ihn besser teilbar und prägen den Ton und die Marke Ihrer gesamten Website.

Und wissen Sie was? Wir sind fest dazu verdrahtet, auf Bilder zu reagieren. Deshalb ist die Einbindung von Bildern in Ihre Inhalte ein wirkungsvolles Instrument für die Vermarktung Ihres Blogs.

Aber wenn Sie nicht aufpassen, können Bilder mehr als die Hälfte (oder mehr) der Gesamtgröße Ihrer Webseite ausmachen. Noch vor ein paar Jahren lag die durchschnittliche Größe einer Webseite bei 600-700K. Jetzt liegt der Durchschnitt bei 2MB und er steigt jedes Jahr.

Das ist riesig!

Der Hauptgrund dafür ist, dass auf Webseiten immer häufiger mehrere Bilder verwendet werden, die nicht in der richtigen Größe und Optimierung vorliegen, d. h. sie werden nicht webgerecht gespeichert oder kompiliert und blähen Ihre Seiten auf.

Die meisten von uns lassen die Optimierung von Bildern jedoch links liegen und widmen sich lieber den Dingen, die Spaß machen, wie dem Verfassen eines epischen Beitrags oder dem Networking mit anderen Bloggern in Ihrer Nische.

Aber eine aufgeblähte Seite bedeutet, dass die Ladegeschwindigkeit Ihrer Seite beeinträchtigt wird. Sie denken vielleicht, dass dies keine große Sache ist, wenn Sie über eine Hochgeschwindigkeitsverbindung verfügen, aber viele Ihrer Besucher tun dies nicht. Außerdem mag Google keine langsam ladenden Seiten, und es kann sich negativ auf Ihre Suchmaschinenoptimierung auswirken.

Warum Sie Bilder optimieren müssen

Sie arbeiten hart an der Erstellung hervorragender Inhalte und verbringen unzählige Stunden damit, für Ihren Blog zu werben und sich mit anderen Bloggern zu vernetzen. Das Letzte, was Sie wollen, ist also, dass potenzielle Besucher Ihre Website verlassen, bevor sie überhaupt geladen ist!

Studien zeigen, dass bis zu 40 % der Besucher auf die Schaltfläche "Zurück" klicken, wenn eine Website länger als drei Sekunden zum Laden braucht.

Ich weiß, drei Sekunden sind wirklich nicht so lang, aber wenn Sie eine mobile Verbindung haben und darauf warten, dass eine Website geladen wird, kann eine Sekunde wie eine Ewigkeit erscheinen.

Und da viele Ihrer Besucher möglicherweise über langsamere mobile Verbindungen verfügen, ist klar, dass Sie Ihre Seitengröße reduzieren müssen. Und wir wissen bereits, was der größte Übeltäter für die Aufblähung der Seitengröße ist - es sind Ihre Bilder.

Unnötig große Bilder beanspruchen auch Speicherplatz auf Ihrem Hosting-Account. Während einige von Ihnen vielleicht über ein Hosting mit "unbegrenztem" Speicherplatz verfügen, beschränken viele Premium-Hosting-Provider den Speicherplatz auf etwa 10 GB bei niedrigeren Tarifen. Dieser kann sich schnell füllen, vor allem, wenn Sie mehrere bildlastige Websites auf demselben Account hosten.

Wie können Sie also feststellen, ob Ihre Bilder Ihre Website verlangsamen? Testen Sie die Geschwindigkeit Ihrer Website mit Google PageSpeed Insights.

Wenn Google nicht optimierte Bilder als Problem meldet, sollten Sie Folgendes wissen, um es zu beheben.

Grundlagen der Bildoptimierung

Wenn es um die Optimierung von Bildern in Ihrem Blog geht, gibt es einige Dinge, die Sie beachten müssen: Dateityp, Bildgröße und -abmessungen, Art der Bereitstellung der Bilder und Bildkompression.

Schauen wir uns jeden dieser Bereiche genauer an.

Dateityp

Bilder im Internet werden in der Regel im PNG- oder JPEG-Format gespeichert - oder im GIF-Format, wenn es um Animationen geht. Wer liebt sie nicht, die lustigen animierten GIFs, die im Internet kursieren!

Jetzt ist es technisch okay Wenn Sie Ihre Bilder in einem der beiden Formate speichern, wird der Browser Ihres Besuchers keine Probleme haben, Ihre Webseite anzuzeigen:

• JPEG - für Fotos und Designs, auf denen Menschen, Orte oder Dinge abgebildet sind
• PNG - am besten für Grafiken, Logos, textlastige Designs, Screenshots und wenn Sie Bilder mit transparentem Hintergrund benötigen
• GIF - wenn Sie eine Animation benötigen, ansonsten PNG verwenden

Warum gibt es also unterschiedliche Formate?

PNG wird traditionell zum Speichern von Logos und Grafiken verwendet, da es die ursprüngliche Bildqualität bewahrt - niemand will verschwommenen Text und pixelige Formen. Wenn Sie jedoch versuchen, ein Foto als PNG zu speichern, sieht es zwar fantastisch aus, aber die resultierende Dateigröße ist nicht so fantastisch.

JPEG wird traditionell zum Speichern von Fotos verwendet. Dabei wird ein Teil der Bilddaten weggeworfen, um die Dateigröße drastisch zu verringern, aber da Fotos eine Vielzahl von Farben und natürlichen Variationen enthalten, ist der Qualitätsverlust für das menschliche Auge in der Regel nicht zu erkennen.

Wir werden später noch genauer auf die Komprimierung eingehen, aber wenn Sie sich jetzt nur zwei Dinge merken können, denken Sie daran: JPEG für Fotos und PNG für Text/Grafiken.

Abmessungen der Bilder

Haben Sie schon einmal eine Webseite geladen und bemerkt, dass ein kleines Bild (z. B. ein Porträt) f-o-r-e-v-e-r braucht, um herunterzuladen? So langsam, dass Sie jede einzelne Zeile sehen können? Sie denken sich, wie kann ein so kleines Bild so lange zum Herunterladen brauchen?

Und wenn dies bei einem großen Header-Bild passiert, ist es noch schlimmer, weil es das Laden der gesamten Seite verzögern kann.

Der Grund dafür ist, dass der Blogger die Größe seines Bildes nicht richtig angepasst und optimiert hat. Im Fall unseres Beispiels mit dem Kopfbild hat er vielleicht ein JPEG mit voller Auflösung direkt von seiner DSLR-Kamera hochgeladen.

Und das ist eine riesige Datei!

Ein Webbrowser skaliert (in der Regel) ein Bild von seinen Originalmaßen ab, damit es gut an seinen Platz auf einer Webseite passt. Was auf dem Bildschirm wie ein kleines Bild aussieht, könnte in Wirklichkeit ein riesiges 10-Megapixel-Foto sein, das vom Browser in Echtzeit verkleinert wurde.

Einige Web-Publishing-Plattformen erstellen automatisch mehrere Varianten Ihres Bildes in voller Auflösung und in verschiedenen Größen, aber wenn nicht, sollten Sie Ihre Bilder vorher in einem Bildbearbeitungsprogramm wie Photoshop, Lightroom, Pixlr - oder sogar MS Paint - verkleinern. Das kann den Unterschied zwischen einer 50K-Datei und einer 5MB-Datei ausmachen.

WordPress erstellt zum Beispiel automatisch drei (oder mehr, je nach Theme) Kopien Ihres hochgeladenen Bildes - alle mit unterschiedlichen Abmessungen -, die Sie in Blogbeiträgen verwenden können, anstatt immer das Bild in voller Größe zu verwenden.

Wenn Sie die Gewohnheit haben, große Stockfotos hochzuladen, und Platz in Ihrem Hosting-Account sparen wollen, ist das WordPress-Plugin Imsanity genau das Richtige für Sie.

Es ändert die Größe des Originalbildes und ersetzt es durch ein handlicheres Bild, so dass es nicht so schlimm aussieht, wenn Sie das Bild in voller Größe in Ihren Beitrag einfügen.

Einmal aktiviert, kann Imsanity auch Ihre vorhandenen Bilder durchsuchen und die Größe entsprechend anpassen.

Bedienung Ihrer Bilder

Die Art und Weise, wie Sie Ihren Besuchern Ihre Bilder zur Verfügung stellen, hat nicht unbedingt etwas mit der Optimierung an sich zu tun, aber sie kann einen großen Einfluss auf die Ladezeit Ihrer Seite haben.

Die meisten Blogger stellen ihre Bilder direkt von ihrem Hosting-Account aus bereit, und das ist in der Regel auch in Ordnung. Wenn Sie aber wirklich jedes bisschen Leistung aus Ihrer Website herausholen wollen, dann kann das Hosting Ihrer Bilder in einem Content Delivery Network (CDN) einen großen Unterschied machen.

Ein CDN besteht aus strategisch platzierten Webservern, die sich in Datenzentren auf der ganzen Welt befinden. Auf diesen Servern werden doppelte Kopien Ihrer Bilder gehostet, und wenn der Browser eines Besuchers ein Bild von Ihrer Website anfordert, leitet das CDN den Browser automatisch an den Server weiter, der ihm geografisch am nächsten ist.

Das bedeutet, dass beispielsweise Besucher aus Europa die Bilder von einem lokalen europäischen Server erhalten und nicht von einem Server in den USA oder anderswo. Da die Antwortzeit und die Netzwerklatenz reduziert sind, werden die Bilder viel schneller heruntergeladen, was die Ladezeit der Seite verkürzt.

Blogging Wizard verwendet Sucuri (es enthält eine Firewall für die Sicherheit sowie ein CDN), aber es gibt auch andere hochwertige Anbieter wie Amazons Cloudfront oder KeyCDN. Sogar das beliebte CloudFlare, das kein CDN im eigentlichen Sinne ist, bietet ein kostenloses CDN und lässt sich in den meisten Shared-Hosting-Paketen leicht einrichten.

Bildkompression

Wenn es um die Optimierung Ihrer Bilder geht, reduziert nichts die Dateigröße so sehr wie eine fortschrittliche verlustbehaftete Bildkomprimierung.

Die meisten Bildbearbeitungsprogramme wie Visme oder Photoshop speichern Dateien mit verlustbehafteter JPEG-Komprimierung, da diese die beste Dateigrößenreduzierung bietet. Während also die Bildqualität leicht reduziert wird, werden mit verlustbehafteter Bildkomprimierung riesige Bilder auf webfreundliche Größen reduziert.

Ich bin sicher, dass viele, die Photoshop verwenden, die Für Web speichern Und auch Online-Bildbearbeitungstools wie PicMonkey oder Visme optimieren Ihre Bilder.

Aber wussten Sie, dass es Tools gibt, die Ihr "optimiertes" Bild aus Photoshop oder anderen Bearbeitungsprogrammen nehmen und es um weitere 40 % (oder mehr) komprimieren können, und immer noch dass es dem menschlichen Auge nahezu identisch erscheint?

Hier finden Sie einige kostenlose und kostenpflichtige Tools, die Ihnen dabei helfen, Ihre Bilder in einen webfähigen Zustand zu bringen.

Desktop-Tools

BildAlpha / BildOptim

Für Mac-Benutzer ist ImageOptim ein kostenloses Desktop-Tool, das ich täglich verwende, um PNG-Bilder - meist Screenshots - zu optimieren, bevor ich sie hochlade. Diese Tools sind einfach zu bedienen, Sie ziehen Ihre Dateien einfach per Drag & Drop, aber Sie müssen ein Bild nach dem anderen bearbeiten.

Profi-Tipp Für technisch versierte Anwender gibt es ImageOptim-CLI, mit dem Sie einen ganzen Ordner mit Bildern auf einmal optimieren können.

ImageAlpha ist ein verlustbehafteter PNG-Kompressor und kann bei der Verkleinerung von PNG-Dateien wahre Wunder bewirken, während ImageOptim eine erweiterte verlustfreie Komprimierung (mit der Option der verlustbehafteten Komprimierung) durchführt und unnötige Metadaten aus PNG-, JPEG- und GIF-Dateien entfernt.

Für meine PNG-Bilder durchlaufe ich zunächst ImageAlpha:

Hier wurde mein Bildschirmfoto von 103K auf 28K reduziert.

Ich habe es dann durch ImageOptim laufen lassen und so weitere 10 % gespart.

JPEGmini

Meine JPEG-Dateien optimiere ich mit der Desktop-Anwendung JPEGmini, die sowohl für Mac als auch für Windows verfügbar ist.

Mit der Lite-Version können Sie kostenlos bis zu 20 Bilder pro Tag optimieren, die Aufhebung dieser Beschränkung kostet $19,99.

Profi-Tipp Fortgeschrittene Anwender, die JPEGmini über ein Plugin in Photoshop oder Lightroom integrieren möchten, können die Pro-Version für 99,99 $ erwerben.

Online / Cloud / SaaS-Werkzeuge

TinyPNG

Wenn Sie ein hochwertiges Online-Bildkomprimierungstool suchen, ist TinyPNG (trotz des Namens optimiert es auch JPEG-Dateien) eine Webanwendung, mit der Sie bis zu 20 Bilder mit einer Größe von 5 MB oder weniger in Ihren Browser ziehen und alle auf einmal optimieren können.

Sie verfügen auch über eine Entwickler-API und stellen ein WordPress-Plugin zur Verfügung, das Ihre Bilder beim Hochladen automatisch optimieren kann.

TinyPNG bietet Ihnen 500 kostenlose Bildoptimierungen pro Monat und berechnet danach $0,002-0,009 pro Bild, je nach Volumen.

Nun mögen 500 Bilder pro Monat nach viel klingen, aber wenn man bedenkt, dass WordPress oft drei bis fünf Variationen eines Bildes in verschiedenen Größen erstellt, scheinen 500 Bilder nicht viel zu sein. dass viele Glücklicherweise sind die Kosten pro Bild budgetfreundlich.

EWWW Image Optimizer

Wenn Sie nicht bereit sind, Geld auszugeben, und Sie sich nicht mit der manuellen Optimierung Ihrer Bilder herumschlagen wollen, kann das kostenlose Plugin EWWW Image Optimizer für WordPress Ihre hochgeladenen Bilder automatisch optimieren.

Sie können sich für ein Premium-Abonnement entscheiden, das eine verlustbehaftete Komprimierung durchführt, aber die kostenlose Version führt nur eine verlustfreie Komprimierung durch, so dass die Einsparungen nicht annähernd so groß sind. Es spart Ihnen jedoch Zeit und ist besser als nichts.

Anmerkung: Eine vollständige Übersicht finden Sie in unserem Beitrag über Bildkomprimierungstools.

Einpacken

Manche sagen voraus, dass die durchschnittliche Größe von Webseiten bis 2017 auf 3 MB ansteigen wird. Daher ist es jetzt an der Zeit, mit der Optimierung Ihrer Bilder zu beginnen.

Denken Sie daran, dass nicht alle Ihre Besucher über eine Hochgeschwindigkeitsverbindung verfügen, und dass aufgeblähte Seiten und langsame Ladezeiten Ihr Ranking bei Google beeinträchtigen können. Um die Belastung sozusagen zu verringern, sollten Sie sich angewöhnen, Ihre Bilder noch heute zu optimieren.

Achten Sie auf die Abmessungen Ihrer Bilder und verkleinern Sie übermäßig große Archivfotos oder Bilder von einer Digitalkamera auf eine angemessene Größe.

Als Nächstes sollten Sie die Vorteile der modernen Bildkomprimierung mit Desktop-Anwendungen wie JPEGmini oder Cloud-Tools wie TinyPNG oder Kraken nutzen und diese nach Möglichkeit mit einem Plugin in WordPress integrieren.

Wenn Ihre Veröffentlichungsplattform automatisch verkleinerte Variationen Ihres Originalbildes erstellt, wählen Sie eine dieser Variationen für Ihren Blogbeitrag aus und nicht das Originalbild in voller Größe.

Weiterführende Lektüre: 7 Möglichkeiten, die Größe von PDF-Dateien zu reduzieren.