ThemeLocal - Blog-Tipps, die wie von Zauberhand funktionierenThemeLocal - Blog-Tipps, die wie von Zauberhand funktionieren
  • Bloggen
  • WordPress
  • E-Mail Marketing
  • SEO
  • Soziale Netzwerke
  • Mehr
    • Tutorials
    • Shopify
    • Bewertungen
    • Tipps
    • Sicherheit
    • Software und Dienste
    • Verkehrserzeugung
    • Anfängerleitfaden
    • Showcase
Search
  • Nutzungsbedingungen
  • Datenschutzerklärung
  • Cookie-Richtlinie
  • Kontakt
© 2022 Themelocal. Alle Rechte vorbehalten.
Lektüre: So optimieren Sie Bilder für WordPress, eine vollständige Anleitung
Aktie
Benachrichtigung Zeig mehr
Neuesten Nachrichten
So ändern Sie den Standardbrowser in Windows 11
Wie man
Oppo Find X6 Pro vs. Oppo Find X5 Pro: Was ist neu?
Gegen
Das unbegrenzte Datenangebot für das iPhone 14 ist gerade noch günstiger geworden
Angebote
So richten Sie die Multi-Faktor-Authentifizierung bei NordVPN ein
Wie man
Philips Hue Centris im Test
Technische Bewertungen
Aa
ThemeLocal - Blog-Tipps, die wie von Zauberhand funktionierenThemeLocal - Blog-Tipps, die wie von Zauberhand funktionieren
Aa
  • Bloggen
  • WordPress
  • E-Mail Marketing
  • SEO
  • Soziale Netzwerke
  • Mehr
Search
  • Bloggen
  • WordPress
  • E-Mail Marketing
  • SEO
  • Soziale Netzwerke
  • Mehr
    • Tutorials
    • Shopify
    • Bewertungen
    • Tipps
    • Sicherheit
    • Software und Dienste
    • Verkehrserzeugung
    • Anfängerleitfaden
    • Showcase
Folge uns
  • Nutzungsbedingungen
  • Datenschutzerklärung
  • Cookie-Richtlinie
  • Kontakt
© 2022 Themelocal. Alle Rechte vorbehalten.
ThemeLocal - Blog-Tipps, die wie von Zauberhand funktionieren > Blog > Tipps > So optimieren Sie Bilder für WordPress, eine vollständige Anleitung
Tipps

So optimieren Sie Bilder für WordPress, eine vollständige Anleitung

Zuletzt aktualisiert: November 17, 2021 2:31 am
ThemeLocal vor 1 Jahr 12 Minuten Mindestlesezeit
Aktie
12 Minuten Mindestlesezeit
Aktie

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.

Contents
Warum sind Bilder (so sehr) wichtig?Aber warte! Es gibt ein Problem!1. Größe von Bildern mit großen Abmessungen ändern2. Verwenden Sie das richtige Bildformat3. Verwenden Sie progressive JPEGs4. Aktivieren Sie Lazy Load5. Fügen Sie ein CDN hinzuPublitio-Offload-Medien6. Deklarieren Sie das ‚alt‘-Attribut7. Optimieren Sie eine Komprimierung von Bildern8. Responsive Bilder9. Bildunterschriften10. BilddateinameAbschluss

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!

ImageResize.org

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

Shutterstock_108312266

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

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

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

cdn-netzwerk

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

Publitio Offload-Medien-Plug-in

Infos & DownloadDemo ansehen

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

Bleistift-Buntstifte-Punkte

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

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 -Element, das basierend auf Medienabfragen unterschiedliche Bilder bereitstellen würde. Es ist ziemlich experimentell (dh es gibt Fehler) und sollte nicht auf einer Live-Site verwendet werden.

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!

Verwandter Beitrag

So ändern Sie den Standardbrowser in Windows 11

Das unbegrenzte Datenangebot für das iPhone 14 ist gerade noch günstiger geworden

So richten Sie die Multi-Faktor-Authentifizierung bei NordVPN ein

Oppo Find X6 Pro vs. OnePlus 11: Wie vergleichen sie sich?

Haben Sie jemals öffentliches WLAN genutzt? Dieser NordVPN-Deal ist für Sie

MARKIERTE: Anleitung, Bilder, eine, für, optimieren, Sie, vollständige, WordPress
ThemeLocal November 17, 2021
Teile diesen Artikel
Facebook Twitter Pinterest Whatsapp Whatsapp
Aktie
Was denkst du?
Liebe0
Traurig0
Glücklich0
Schläfrig0
Wütend0
kein Kommentar0
Zwinkern0
Vorheriger Artikel Vollständige Anleitung zu RSS und wie man es mit WordPress verwendet
Nächster Artikel Wesentliche WordPress-Plugins für das 2017-Theme
Hinterlasse einen Kommentar

Schreibe einen Kommentar Antworten abbrechen

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert

Berühmter Post

Oppo Find X6 Pro vs. OnePlus 11: Wie vergleichen sie sich?
Gegen
So fügen Sie eine SEO-Editor-Rolle in WordPress hinzu
Tutorials
Sony A80L vs. Sony A80K: Wie unterscheiden sie sich?
Gegen
So legen Sie bei der Arbeit ein anderes Layout des iPhone-Startbildschirms fest (2023)
Wie man
So löschen Sie Hintergrundbilder unter iOS 16 – der schnellste Weg (2023)
Wie man
Samsung Galaxy A54 vs. Google Pixel 7: Welches Handy ist das Richtige für Sie?
Gegen

También podría gustarte

Wie man

So ändern Sie den Standardbrowser in Windows 11

vor 3 Stunden 2 Minuten Mindestlesezeit
Angebote

Das unbegrenzte Datenangebot für das iPhone 14 ist gerade noch günstiger geworden

vor 4 Stunden 2 Minuten Mindestlesezeit
Wie man

So richten Sie die Multi-Faktor-Authentifizierung bei NordVPN ein

vor 7 Stunden 4 Minuten Mindestlesezeit
Gegen

Oppo Find X6 Pro vs. OnePlus 11: Wie vergleichen sie sich?

vor 8 Stunden 5 Minuten Mindestlesezeit
Angebote

Haben Sie jemals öffentliches WLAN genutzt? Dieser NordVPN-Deal ist für Sie

vor 8 Stunden 3 Minuten Mindestlesezeit
Wie man

So legen Sie bei der Arbeit ein anderes Layout des iPhone-Startbildschirms fest (2023)

vor 22 Stunden 4 Minuten Mindestlesezeit
Wie man

So ändern Sie den Hintergrund auf dem iPhone basierend auf der Tageszeit (2023)

vor 1 Tag 6 Minuten Mindestlesezeit
Technische Bewertungen

Ton und Bild: Mich stört eine weitere Spotify-HiFi-Verzögerung nicht so sehr

vor 2 Tagen 4 Minuten Mindestlesezeit
Zeig mehr
ThemeLocal - Blog-Tipps, die wie von Zauberhand funktionierenThemeLocal - Blog-Tipps, die wie von Zauberhand funktionieren
Folge uns

© 2022 Themelocal. Alle Rechte vorbehalten.

  • Nutzungsbedingungen
  • Datenschutzerklärung
  • Cookie-Richtlinie
  • Kontakt

Removed from reading list

Rückgängig machen
Welcome Back!

Sign in to your account

Passwort vergessen?