ThemeLocal - Blog-Tipps, die wie von Zauberhand funktionieren
  • Bloggen

    7 Möglichkeiten, die Größe von PDF-Dateien zu reduzieren

    Warum die meisten Blogging-Ratschläge fehlschlagen (und wie man sie behebt)

    7 wesentliche Fragen, die sich jeder Blogger stellen muss

    So schreiben Sie Inhalte, die Ihre Leser dazu bringen, mehr zu wollen

    Was tun, wenn Ihr Blog gehackt wird

    So schreiben Sie schneller: 10 einfache Tipps, um Ihre Schreibleistung zu verdoppeln

    Wie man Trends produktiv überwacht und berichtenswerte Inhalte schreibt

    So planen Sie Inhalte wie Walter Bishop

    So schreiben Sie den ultimativen Blog-Beitrag: Der Spickzettel eines Bloggers

  • WordPress
    • All
    • Plugins
    • Themes

    Die 11 besten Amazon-Affiliate-WordPress-Themes 2022

    Die 5 besten NFT-WordPress-Themes 2022

    So fügen Sie Zusammenarbeit im WordPress-Blockeditor hinzu (Google-Doc-Stil)

    So akzeptieren Sie Google Pay in WordPress (der einfache Weg)

    Die 9 besten WordPress-Themes zur Lead-Generierung 2022

    So passen Sie die Ergebnisseite der WooCommerce-Produktsuche an

    So erstellen Sie ein zusammenklappbares Seitenleistenmenü in WordPress (der einfache Weg)

    So fügen Sie „Jetzt kaufen, später bezahlen“-Zahlungspläne zu WordPress hinzu

    So akzeptieren Sie Apple Pay in WordPress (der EINFACHE Weg)

  • E-Mail Marketing

    So verwenden Sie Gast-Blogging, um Ihre E-Mail-Liste zu erstellen

    Die E-Mail-Marketing-Kennzahlen, auf denen jede Kampagne basieren sollte

    So verwenden Sie ein Kontaktformular, um Ihre E-Mail-Liste zu erstellen

  • SEO

    So beheben Sie Fehler vom Typ 404 von benutzerdefinierten Beiträgen in WordPress

    Erhöhen Sie den Traffic auf Ihrer WordPress-Site in 6 einfachen Schritten

    Wie man automatisch externe Links in WordPress Nofollow macht

    Wie man in Suchmaschinen einen höheren Rang erreicht

    So entfernen Sie defekte Links für immer von Ihrer WordPress-Site

    SEO-Anfängerleitfaden: Intro, Prep & Jargon

    WordPress Keyword-Recherche und -Nutzung für SEO

    Verbessern Sie SEO mit Backlinks, Seitengeschwindigkeit und mehr

    Die 10 wichtigsten Funktionen von Yoast SEO für WordPress

  • Soziale Netzwerke

    So fügen Sie einem Instagram-Post eine Erinnerung hinzu

    So planen Sie kostenlos Pinterest-Pins

    Wie man auf Instagram viral wird: Der Leitfaden für Anfänger

    5 großartige Möglichkeiten, Ihre Social-Media-Updates zu diversifizieren, um mehr Traffic und Engagement zu generieren

    Können Sie Instagram verwenden, um Ihr Geschäft auszubauen?

    6 effektive Möglichkeiten, sich in sozialen Medien zu vermarkten

    6 intelligente Instagram-Marketing-Tipps, um Ihr Geschäft anzukurbeln

    So konvertieren Sie Ihr persönliches Instagram-Profil in ein Unternehmensprofil

    Shorby Review: Steigern Sie den Traffic von Social Media mit Landing Pages + mehr

  • Mehr
    • Tutorials
    • Shopify
    • Bewertungen
    • Tipps
    • Sicherheit
    • Software und Dienste
    • Verkehrserzeugung
    • Anfängerleitfaden
    • Showcase
No Result
View All Result
  • Bloggen

    7 Möglichkeiten, die Größe von PDF-Dateien zu reduzieren

    Warum die meisten Blogging-Ratschläge fehlschlagen (und wie man sie behebt)

    7 wesentliche Fragen, die sich jeder Blogger stellen muss

    So schreiben Sie Inhalte, die Ihre Leser dazu bringen, mehr zu wollen

    Was tun, wenn Ihr Blog gehackt wird

    So schreiben Sie schneller: 10 einfache Tipps, um Ihre Schreibleistung zu verdoppeln

    Wie man Trends produktiv überwacht und berichtenswerte Inhalte schreibt

    So planen Sie Inhalte wie Walter Bishop

    So schreiben Sie den ultimativen Blog-Beitrag: Der Spickzettel eines Bloggers

  • WordPress
    • All
    • Plugins
    • Themes

    Die 11 besten Amazon-Affiliate-WordPress-Themes 2022

    Die 5 besten NFT-WordPress-Themes 2022

    So fügen Sie Zusammenarbeit im WordPress-Blockeditor hinzu (Google-Doc-Stil)

    So akzeptieren Sie Google Pay in WordPress (der einfache Weg)

    Die 9 besten WordPress-Themes zur Lead-Generierung 2022

    So passen Sie die Ergebnisseite der WooCommerce-Produktsuche an

    So erstellen Sie ein zusammenklappbares Seitenleistenmenü in WordPress (der einfache Weg)

    So fügen Sie „Jetzt kaufen, später bezahlen“-Zahlungspläne zu WordPress hinzu

    So akzeptieren Sie Apple Pay in WordPress (der EINFACHE Weg)

  • E-Mail Marketing

    So verwenden Sie Gast-Blogging, um Ihre E-Mail-Liste zu erstellen

    Die E-Mail-Marketing-Kennzahlen, auf denen jede Kampagne basieren sollte

    So verwenden Sie ein Kontaktformular, um Ihre E-Mail-Liste zu erstellen

  • SEO

    So beheben Sie Fehler vom Typ 404 von benutzerdefinierten Beiträgen in WordPress

    Erhöhen Sie den Traffic auf Ihrer WordPress-Site in 6 einfachen Schritten

    Wie man automatisch externe Links in WordPress Nofollow macht

    Wie man in Suchmaschinen einen höheren Rang erreicht

    So entfernen Sie defekte Links für immer von Ihrer WordPress-Site

    SEO-Anfängerleitfaden: Intro, Prep & Jargon

    WordPress Keyword-Recherche und -Nutzung für SEO

    Verbessern Sie SEO mit Backlinks, Seitengeschwindigkeit und mehr

    Die 10 wichtigsten Funktionen von Yoast SEO für WordPress

  • Soziale Netzwerke

    So fügen Sie einem Instagram-Post eine Erinnerung hinzu

    So planen Sie kostenlos Pinterest-Pins

    Wie man auf Instagram viral wird: Der Leitfaden für Anfänger

    5 großartige Möglichkeiten, Ihre Social-Media-Updates zu diversifizieren, um mehr Traffic und Engagement zu generieren

    Können Sie Instagram verwenden, um Ihr Geschäft auszubauen?

    6 effektive Möglichkeiten, sich in sozialen Medien zu vermarkten

    6 intelligente Instagram-Marketing-Tipps, um Ihr Geschäft anzukurbeln

    So konvertieren Sie Ihr persönliches Instagram-Profil in ein Unternehmensprofil

    Shorby Review: Steigern Sie den Traffic von Social Media mit Landing Pages + mehr

  • Mehr
    • Tutorials
    • Shopify
    • Bewertungen
    • Tipps
    • Sicherheit
    • Software und Dienste
    • Verkehrserzeugung
    • Anfängerleitfaden
    • Showcase
No Result
View All Result
ThemeLocal - Blog-Tipps, die wie von Zauberhand funktionieren
No Result
View All Result
  • Nutzungsbedingungen
  • Datenschutzerklärung
  • Cookie-Richtlinie
  • Kontakt
Home Tipps

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

7 Monaten ago
in Tipps
Reading Time: 8 mins read
A A
0
Auf Facebook teilenAuf Twitter teilen

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!

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!

Share26Tweet16Send
Previous Post

Vollständige Anleitung zu RSS und wie man es mit WordPress verwendet

Next Post

Wesentliche WordPress-Plugins für das 2017-Theme

Related Posts

Wie man

So installieren Sie Schriftarten in Photoshop

14 Stunden ago
Technik

iPad (2022) für USB-C und mehr getippt

23 Stunden ago
Sicherheit

So fügen Sie CAPTCHA-Schutz zu WordPress hinzu

1 Tag ago
Load More
Next Post

Wesentliche WordPress-Plugins für das 2017-Theme

Schreibe einen Kommentar Antworten abbrechen

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

EMPFOHLEN

So gewinnen Sie jedes Mal Apple Watch-Wettbewerbe

4 Monaten ago

So machen Sie in Apple Notes rückgängig

5 Monaten ago

16GB vs. 32GB MacBook Pro: Wie viel ist genug?

6 Monaten ago

Sprachlautstärke von Apple Maps ändern oder ausschalten (2022)

4 Monaten ago
ThemeLocal – Blog-Tipps, die wie von Zauberhand funktionieren

Wir helfen klugen Unternehmern, ihre Blogs in profitable Geschäfte zu verwandeln. Wir sind ein preisgekrönter Blog, der seit 2020 Bloggern und Unternehmern hilft.

Folge uns

Neueste Nachrichten

Netflix bestätigt werbefinanzierte Stufe – hier sind unsere großen Fragen

Juni 25, 2022

LG Gram 2022: Alle neuesten Laptops enthüllt und erklärt

Juni 25, 2022
  • Nutzungsbedingungen
  • Datenschutzerklärung
  • Cookie-Richtlinie
  • Kontakt

© 2022 ThemeLocal. Tous droits réservés.

No Result
View All Result
  • Bloggen
  • WordPress
    • Plugins
    • Themes
  • Shopify
  • E-Mail Marketing
  • Monetarisierung
  • SEO
  • Soziale Netzwerke
  • Tutorials
  • Bewertungen
  • Tipps
  • Sicherheit
  • Software und Dienste
  • Verkehrserzeugung
  • Anfängerleitfaden
  • Showcase

© 2022 ThemeLocal. Tous droits réservés.