Menschen im Web haben nicht viel Zeit, um Daten zu konsumieren – weil es so viel von letzteren gibt. Es gibt so viele Daten, dass wir einfach nicht die Zeit haben, alles zu lesen! Als Inhaltskurator für das moderne Web besteht Ihre Aufgabe darin, den Durchsatz zu maximieren. Je mehr Sie mit weniger Worten ausdrücken, desto besser sind Sie in Ihrem Job.
Warum sind Bilder (so sehr) wichtig?
Es gibt viele, viele Gründe, warum Sie Bilder in Ihren Beiträgen und Artikeln verwenden würden (und sollten):
- Bilder dienen als visuelle Reize für einen Call-to-Action (CTA). Ein CTA kann jede Aufgabe sein, die Ihr Besucher ausführen soll. Zu den üblichen CTAs gehören das Abonnieren Ihres Newsletters, das Teilen Ihres Artikels über soziale Medien oder der Kauf Ihres Produkts.
- Bilder verstärken die Verbindung, die der Autor mit dem Leser herstellen möchte.
- Bilder vermitteln mehr durch weniger.
Daher ist es von grundlegender Bedeutung, dass wir in unseren Präsentationen (Blogpost, informeller Bericht, aktuelle PowerPoint-Präsentation etc.) die richtigen Bilder verwenden, um beim Leser eine Spur zu hinterlassen!
Aber warte! Es gibt ein Problem!
Bilder beanspruchen etwa 63 % der Bandbreite moderner Websites, daher wird es immer wichtiger, dass sie richtig auf Geschwindigkeit optimiert sind.
Eine Verzögerung der Seitenladezeiten um eine Sekunde könnte die Conversion-Raten um 7 % senken.
Wir haben festgestellt, dass Menschen eine kurze Aufmerksamkeitsspanne haben (einer der Nachteile der modernen Content-Produktionsrate). Selbst wenn Sie die richtigen Bilder verwenden, geht das Interesse verloren, wenn sie nicht innerhalb des akzeptablen Zeitrahmens geladen werden.
Die meisten Websites haben das gleiche Problem – sie verwenden ausgezeichnete Bilder, aber die Art und Weise, wie das Bild dem Besucher präsentiert wird, ist schlecht. Große Größe, schlechte Optimierung, falsches Format, unnötig große Abmessungen (Größen), nicht reagierende Bilder und unvorsichtige SEO-Fehler sind einige der häufigsten Probleme, mit denen das moderne Web konfrontiert ist. Im heutigen Artikel geben wir Ihnen 10 einfache Tipps zur Bildoptimierung, mit denen Sie diese Probleme vermeiden können.
1. Größe von Bildern mit großen Abmessungen ändern
„Extra Pommes“ sind nicht immer gut
Dieser ist ein Klassiker. Angenommen, Sie benötigen ein Foto mit 150 × 150 Pixel auf der Seite „Team“ Ihrer Website. Normalerweise verwenden Sie einen 5MP-Kopfschuss, bearbeiten ihn ein wenig und laden ihn schließlich hoch.
Haben Sie das Problem erkannt? Einige Leute laden das tatsächliche 5MP-Bild direkt hoch! Das WordPress-Theme lädt das gesamte 5MP-Bild (das sind 5 x 10^6 Pixel) und fordert den Browser auf, es auf die erforderliche Größe von 150 x 150 Pixel zu verkleinern. Im Wesentlichen zeigt der Browser nur 0,0045% des Originalbildes an!
Am Ende verschwenden Sie sowohl Ihre Bandbreite als auch die Ihrer Besucher (selbst wenn Sie das Bild über ein Content Delivery Network wie Stackpath CDN bereitstellen), verbrauchen mehr Festplattenspeicher und erhöhen die Ladezeit. Keine der Funktionen ist etwas, das Sie auf Ihrer Website haben möchten.
Ändern Sie immer die Größe des Bildes auf die erforderlichen Abmessungen (und mit Größenänderung meine ich Verkleinerung) und laden Sie es dann hoch!
Sie brauchen dafür keine ausgefallene Software – es gibt kostenlose Online-Tools wie ImageResize.org Sie können die Größe Ihrer Bilder schnell ändern und optimieren. Laden Sie einfach Ihre Fotoeinstellungen hoch und optimieren Sie sie. Wenn Sie fertig sind, laden Sie Ihr optimiertes Bild herunter, um es auf Ihrer Website zu verwenden. Sie bieten auch eine schnelle Bildkompressor wenn Sie nur die Dateigröße reduzieren möchten.
Hilfreiche Werkzeuge:
- IrfanView ist eine ausgezeichnete Freeware, um die Größe Ihrer Bilder mit erweiterten Optionen wie Optimierung, Wasserzeichen und Rändern stapelweise zu ändern.
- ImageMagick ist ein fortschrittliches Open-Source-Tool, das in einer Vielzahl von Programmiersprachen und Betriebssystemen verwendet werden kann. Sie können Ihre eigene App schreiben oder einfach über die Befehlszeile verwenden.
- ImageOptim (Mac) können Sie ganze Ordner ziehen und mehrere Bilder schnell optimieren.
- TinyPNG ist ein Online-Tool zur Bildkomprimierung mit einer API.
2. Verwenden Sie das richtige Bildformat
Dabei spielt das verwendete Bildformat eine entscheidende Rolle. Als allgemeine Faustregel gilt: PNG für Vektorgrafiken und computergenerierte Bilder wie ClipArt etc. Verwendung JPEG für Fotos oder Bilder mit einer Vielzahl von Farben. Eine detaillierte Erklärung finden Sie hier tolle StackOverflow-Antwort.
3. Verwenden Sie progressive JPEGs
Baseline (Normal) JPG im Vergleich zu Progressive JPG
Für den Normalbürger gibt es zwei Arten von JPEGs – Baseline und Progressive. Optisch sind beide gleich. Der Unterschied liegt in der Art und Weise, wie sie geladen werden:
- Baseline JPEG hat nur eine Ebene – die das gesamte Bild enthält. Auf Wunsch wird das gesamte Bild auf einmal geladen.
- Progressive JPEGs setzen das Bild mit mehreren Ebenen zusammen. Ein progressives JPEG-Bild wird Schicht für Schicht geladen, wodurch die Qualität allmählich zunimmt und Sie letztendlich eine verlustfreie Ansicht erhalten.
IrfanView unterstützt Stapelkonvertierung mit progressivem JPEG
Mit allen gängigen Bild-Resizern können Sie Bilder als Progressive JPEG speichern.
4. Aktivieren Sie Lazy Load
Faules Laden ist ein ausgezeichnetes ressourcenschonend Technik, bei der ein Bild nur geladen wird, wenn der Besucher zum Ansichtsrahmen des Bildes scrollt. Betrachten Sie einen Artikel – „15 der sparsamsten Autos im Jahr 2014“. Dieser Artikel enthält selbstverständlich mindestens 15 Bilder. Und unabhängig von der Höhe des Anzeigegeräts – Monitor, Tablet oder Smartphone – Sie können nicht alle 15 Bilder in den Ansichtsrahmen einpassen. Sie müssen nach unten scrollen, um alle Bilder anzuzeigen.
Wenn Lazy Loading aktiviert ist, werden Bilder nur geladen, wenn sich ein Besucher in der Nähe des Bildes befindet. Mit anderen Worten, die Bilder werden gerade dann geladen, wenn Sie nach unten scrollen, um sie anzuzeigen. Die ersten Bilder werden jedoch sofort geladen, da Sie sich bereits im Ansichtsrahmen befinden. Lazy Loading spart an beiden Enden Bandbreite und verbessert die Ladezeit! Sie können Lazy Loading in WordPress mit dem BJ Lazy-Load-Plugin.
5. Fügen Sie ein CDN hinzu
Durch die Verwendung eines Content Delivery Network (CDN) wird das Bild von einem Server bereitgestellt, der sich physisch am nächsten zum Standort des Besuchers befindet. Wenn ein Besucher aus Indien ein Bild anfordert und das CDN über einen POP (Point of Presence oder einfach einen Server) in Tokio und New York verfügt, wird das Bild vom Server in Tokio bereitgestellt.
Wenn Sie viel Traffic haben, sollten Sie ein CDN mit WordPress einrichten, um Ihre Ladezeit zu verkürzen und die Gesamtleistung zu steigern.
Hier bei Themelocal verwenden wir Wolkenflare, und wir haben eine hinzugefügte Liste mit empfohlenen kostenlosen CDN-Diensten, die Sie vielleicht ausprobieren möchten. Ein CDN selbst einzurichten kann jedoch kompliziert sein, und hier kann ein Plugin nützlich sein.
Publitio-Offload-Medien
Eine großartige Option ist das Publitio Offload Media-Plugin, mit dem Sie Ihre Mediendateien auf dem Cloudbasierter Medienmanager von Publitio. Mit dem installierten Plugin können Sie Ihre gesamte Medienbibliothek ganz einfach von Ihren Servern entfernen und dabei sogar die Bild- und Videoqualität optimieren. Nach dem Verschieben werden Bilder schnell vom Publitio CDN bereitgestellt. Dadurch wird tonnenweise Serverspeicherplatz freigesetzt und Ihre Website kann wirklich beschleunigt werden (insbesondere, wenn Sie einen kostengünstigen Hosting-Plan mit begrenztem Speicherplatz haben). Es gibt sogar eine einfache Schaltfläche „Jetzt synchronisieren“, um der Cloud automatisch neue Medien hinzuzufügen, wenn Sie neue Beiträge bearbeiten. Und Premium-Publitio-Pläne enthalten zusätzliche Funktionen für benutzerdefinierte CNAMEs, mehrere Wasserzeichen und sogar Videoverschlüsselung.
6. Deklarieren Sie das ‚alt‘-Attribut
Das Attribut ‚alt‘ beschreibt das Bild für die Suchmaschine. Der Text, den Sie in dieses Feld eingeben, wird dem Benutzer angezeigt, falls das Bild nicht geladen werden kann. Viele Leute neigen dazu, diese Felder leer zu lassen. Dies ist sehr schädlich für SEO und Sie verlieren Traffic. Sie sollten immer versuchen, die Schlüsselwörter Ihrer Website in das Alt-Tag Ihrer Bilder aufzunehmen.
7. Optimieren Sie eine Komprimierung von Bildern
Optimierte Bilder sind 40 % heller als normale Bilder. Dies verbessert die Ladezeit und spart Bandbreite. Aus Freddys Liste der besten WordPress-Bildoptimierungs-Plugins würden wir empfehlen WPSmush.it um Ihre Bilder zu optimieren. Kraken.io ist auch eine großartige Online-Option zum Komprimieren von Bildern im Handumdrehen. Wir verwenden es hier bei Themelocal ständig, um vorgestellte Bilder zu optimieren, bevor sie in Beiträge und Themendemos hochgeladen werden.
8. Responsive Bilder
Responsive Webdesign ist da
Selbst wenn Ihre Website responsiv ist, bedeutet dies nicht, dass Ihre Bilder es sind. Das bedeutet, dass das Header-Bild, das Sie für einen 22-Zoll-Desktop-Bildschirm verwenden, auch auf einem 5-Zoll-iPhone angezeigt wird. Wenn Sie ein Bild hochladen, ändert WordPress die Größe in mehrere Versionen – Miniaturansicht, Mittel, Volle Größe usw. Dies kann vom Entwickler geändert werden. Ein gut codiertes Thema wird die „mittlere“ Version des Bildes bereitstellen und dadurch Bandbreite sparen.
Die Picturefill.WP Das Plugin ersetzt Image-Tags durch ein neues
9. Bildunterschriften
Bildunterschriften sind nicht immer erforderlich, in einigen Fällen jedoch erforderlich – beispielsweise bei Screenshots in einem Tutorial. Bildunterschriften helfen den Lesern, das Thema besser zu verstehen, und steigern gleichzeitig Ihre SEO.
10. Bilddateiname
Denken Sie über den Dateinamen aus der Sicht einer Suchmaschine nach. Verwenden Sie denselben Text wie im ‚title‘-Tag des Bildes. Versuchen Sie außerdem, die für Ihre Website relevantesten Keywords einzubeziehen.
Abschluss
Bild-SEO ist für jede Website – ob alt oder neu – von entscheidender Bedeutung. Leute, die Bild-SEO implementieren richtig (es kann manchmal ziemlich banal sein), können Sie eine beträchtliche Menge an organischem Verkehr (die beste Art von Verkehr) in der langfristig.
Haben Sie eine tolle Optimierungstechnik? Feuer weg!
