So verbessern und optimieren Sie Bilder für WordPress

Es ist lange her, dass Bilder zu groß waren, um sie über das Internet zu laden. Heute können Websites ohne sie nicht existieren. Auch wenn die Internetgeschwindigkeit im Laufe der Jahre dramatisch zugenommen hat, ist es wichtig, dass Sie auf die Bilder in Ihrem Blog achten.

Nur weil es einfach ist, Bilder auf Ihre Website hochzuladen, heißt das nicht, dass Sie dies ohne Vorbereitung tun sollten. Nicht optimierte Bilder können Ihrer Website in vielerlei Hinsicht schaden; von der Art und Weise, wie Besucher über Sie denken, bis hin zur Geschwindigkeit Ihrer Website und SEO-Rankings. Wenn Sie noch nicht daran gedacht haben, zeigen wir Ihnen hier verschiedene Möglichkeiten, Bilder in WordPress zu verbessern.

So optimieren Sie Bilder für WordPress, um Ihre Website zu beschleunigen und SEO zu verbessern

Warum sollten Sie Bilder für WordPress optimieren? Wenn Sie sich anstrengen, können Sie Folgendes erwarten:

• Schnellere Website
• Bessere SEO
• Kleinere Backups
• Weniger Bandbreitennutzung
• Zufriedenere Nutzer

Sie sollten auch wissen, dass es verschiedene Stufen gibt, in denen Sie die Bilder optimieren können. Sie können sich um die Bilder kümmern, noch bevor Sie sie in einen Blog hochladen, oder Sie können dies nach dem Hochladen tun.

Testen Sie schnell Bilder auf Ihrer Website

Bevor Sie mit der Optimierung beginnen, können Sie Ihre Website schnell auf Geschwindigkeit und Leistung überprüfen. Wenn Sie eines der Tools aus der Liste verwenden, erfahren Sie schnell, in welcher Form die Bilder auf Ihrer Website sind.

Wir verwenden gerne GTmetrix, das Ihnen sogar die genauen Bilder anzeigt, die dazu führen, dass Ihre Website langsamer lädt.

Bilder vor dem Hochladen für WordPress optimieren

Beim Bloggen unternehmen die meisten Leute nicht alle notwendigen Schritte, um ihre Bilder zu optimieren. Normalerweise machen die Leute einfach ein Foto von ihrer Kamera oder ihrem Smartphone, laden es aus dem Internet herunter oder erstellen eines mit einer Computersoftware.

Sie denken nicht an Formate, Bildabmessungen oder Dateinamen. Wenn das Bild gut aussieht, gehen sie einfach davon aus, dass es bereit für das Internet ist. Wenn Sie Ihre Bilder nicht überprüfen, bauen Sie auf eine Katastrophe hin.

Bilder skalieren

Laden Sie keine Bilder auf Ihre WordPress-Website hoch, bevor Sie die Breite und Höhe jedes Bildes überprüft haben. Wenn Sie beispielsweise Bilder mit maximal 700 Pixeln anzeigen, ist es wirklich nicht erforderlich, ein breiteres Bild hochzuladen. Wenn Sie dies tun, haben Sie eine größere Datei, die Ihre Site verlangsamt, während die Ausgabe gleich ist. WordPress wird zusätzliche Größe schaffen, aber das ist nicht die Ausrede, die Bilder nicht vor dem Hochladen vorzubereiten.

Die Größenänderung von Bildern ist schnell und einfach. Es gibt viele kostenlose Tools wie Microsoft Paint, die Ihnen dabei helfen. Sie können sogar kostenlose Online-Tools zum Ändern der Größe von Bildern wie Easy Resize finden.

Die Bildabmessungen variieren von Thema zu Thema. Wenn Sie sich nicht sicher sind, welches Sie verwenden sollen, schauen Sie sich Ihr WordPress-Theme genauer an und inspizieren Sie Bilder, suchen Sie nach Dokumentationen oder bitten Sie den Support um Hilfe.

Ändern Sie die Qualität

Nachdem Sie die Abmessungen geändert haben, sollten Sie erwägen, die Qualität der Bilder zu ändern. Je nach Software gibt es verschiedene Möglichkeiten, die Qualität der Bilder zu verändern. Mit dem immer beliebten Photoshop können Sie beispielsweise Bilder für das Web speichern. Mit dieser Option können Sie Bilder in geringerer Qualität speichern, sie werden jedoch für Ihre Website optimiert.

Wenn Sie ein Bild als JPEG speichern möchten, fordert Photoshop Sie außerdem auf, die Qualitätsstufe auszuwählen. In diesem Fall wird das Verringern der Qualität von 12 auf nur 8 die Bildgröße drastisch reduzieren, während der Qualitätsunterschied nicht so groß ist.

Wenn Sie immer noch keine Software verwenden, um die Qualität Ihrer Bilder zu ändern, können Sie das kostenlose Online-Tool Tiny PNG ausprobieren. Laden Sie einfach ein Bild hoch und sehen Sie, was es für einen Unterschied machen kann.

Wählen Sie das richtige Format

Auch nach den Änderungen in Größe und Qualität sollten Sie in Erwägung ziehen, das Format zu ändern. Zunächst einmal können Sie durch die Auswahl des richtigen Formats ein paar Kilobyte von einem Bild entfernen, wenn nicht mehr.

Die allgemeine Regel ist ganz einfach. Wenn Sie ein Foto haben, machen Sie es als JPEG. Wenn Sie ein Logo, ein Vektorbild oder eine sehr einfache computergenerierte Grafik haben, wählen Sie PNG. Wenn Sie ein sehr kleines Bild ohne Farbverläufe haben oder eine einfache Animation wie die oben gezeigte anzeigen möchten, können Sie GIF verwenden. Im Allgemeinen sind PNG-Bilder viel größer als die JPEG-Bilder, und Sie können davon profitieren, das Format zu ändern.

In vielen Fällen führt die Neuformatierung von Bildern zu keinen signifikanten Qualitätsunterschieden, während Sie mit einem Größenunterschied rechnen können. Bevor Sie das nächste Mal ein PNG-Foto hochladen, probieren Sie es aus und speichern Sie es als JPEG, um den Unterschied zu sehen. Für eine genauere Erklärung sehen Sie sich bitte den Unterschied zwischen PNG, JPEG, GIF und SVG an.

Achten Sie auf Dateinamen

Obwohl der Dateiname unwichtig klingen mag, sollten Sie sich dessen eigentlich bewusst sein. Der Name Ihrer Bilddatei enthält wertvolle Informationen für SEO. Wenn Sie möchten, dass andere Ihr Bild bei Google und anderen Suchmaschinen finden können, sollten Sie ihm einen richtigen Namen geben.

Wir empfehlen Ihnen, Bilder ohne Leerzeichen zu benennen. Vergessen Sie nicht, Schlüsselwörter anzugeben, wenn Sie möchten, dass die Seite und das Bild ranken. Wenn Sie beispielsweise ein Bild von Ferrari California hochladen, sollte der Dateiname „ferrari-california.jpg“ lauten. Wenn Sie ein SEO-Plugin für WordPress verwenden, wissen Sie bereits, dass es Ihre Alt-Tags auf Schlüsselwörter überprüft. Ja, es ist wirklich so wichtig, einen richtigen Bildnamen zu haben.

Bilder nach dem Hochladen für WordPress optimieren

Nachdem Sie die Bilder auf Ihrem Computer vorbereitet haben, können Sie mit dem Hochladen fortfahren. Hoffentlich haben Ihre Bilder genau die richtige Größe und Qualität. Sie haben sichergestellt, dass Format und Dateiname korrekt sind. Nach dem Upload fragt WordPress Sie nach zusätzlichen Informationen. Überspringen Sie nicht die Metainformationen; Geben Sie die Details zu Ihren Bildern ein, damit Sie sie leicht organisieren und für SEO vorbereiten können.

Titel, Beschreibung, Alternativtext und Bildunterschrift

Während Sie sich um die technischen Details kümmern, sollten Sie die SEO nicht vergessen. Fügen Sie Ihren Medien immer Titel und Beschreibung hinzu. Dies wird Ihnen beim WordPress-Medienmanagement helfen und auch zu einer besseren SEO beitragen. Vergessen Sie auch nicht das Alt-Tag, das für Besucher angezeigt wird, die Ihr Bild nicht richtig sehen können. Dies wird nicht nur für Ihre Benutzer hilfreich sein, sondern Ihnen auch bei der SEO helfen. Ihre Seite wird besser ranken und Benutzer können Ihre neuen Bilder leichter finden.

Auch wenn Sie nicht die ganze Zeit Untertitel benötigen, stellen Sie sicher, dass Sie Untertitel für Bilder hinzufügen, die zusätzliche Erklärungen benötigen (z. B. Screenshots).

Bilder mit WordPress bearbeiten

Wenn Sie feststellen, dass ein Bild noch weiter bearbeitet werden muss, sollten Sie wissen, dass WordPress Ihnen dies auch nach dem Hochladen der Datei ermöglicht. Ändern Sie das Drehen, Zuschneiden und Skalieren von Bildern, die Sie bereits hochgeladen haben. Sie können sogar nur ein Miniaturbild oder alle anderen Größen bearbeiten. Der native Editor von WordPress ist sehr einfach, aber Sie können ihn von Zeit zu Zeit speichern.

Alle Miniaturansichten neu generieren

Die meisten der vorherigen Techniken helfen Ihnen bei neuen Bilddateien, die Sie noch hochladen möchten. Aber was ist, wenn Sie bereits Hunderte, wenn nicht Tausende von Dateien auf Ihre WordPress-Site hochgeladen haben? Mach dir keine Sorge; Sie können diese Bilder noch optimieren und ihre Größe ändern.

Für eine schnelle Lösung könnten Sie an einem kostenlosen Regenerate Thumbnails-Plugin interessiert sein, das von mehr als einer Million Benutzern verwendet wird. Wenn Sie mehr Kontrolle über Bilder haben möchten, sollten Sie sich einige der besten WordPress-Plugins zur Bildoptimierung ansehen, die wir Ihnen in den folgenden Zeilen dieses Artikels zeigen werden.

WordPress-Plugins verwenden

Natürlich gibt es Dutzende von WordPress-Plugins, mit denen Sie Bilder auf Ihrer Website optimieren können. Scrollen Sie nach unten, um die besten WordPress-Plugins zum Optimieren von Bildern zu sehen.

Lazy Laden Sie Bilder bei Bedarf

Manchmal ist die Qualität der Bilder viel wichtiger als ihre Größe. Dies gilt vor allem für Fotografen, die möchten, dass ihre Fotos erstklassig sind. Sie können nicht riskieren, die Größe oder Qualität der Dateien zu reduzieren. Das bedeutet jedoch nicht, dass Sie die Optimierung vergessen sollten. Um in diesem Fall Bilder für WordPress zu optimieren, sollten Sie Lazy Loading in Betracht ziehen.

Lazy Load ist eine Technik, die Bilder nur lädt, wenn Benutzer sie benötigen (scrollen Sie zu ihnen). Wenn Sie beispielsweise zwanzig hochwertige Fotos in einem Artikel hochladen, würden diese Ihre Website enorm verlangsamen. Wenn Sie die Bilder jedoch träge laden, wäre der Artikel blitzschnell und Fotos würden nur bei Bedarf geladen – in dem Moment, in dem ein Benutzer sie erreicht.

Responsive Bilder haben

Obwohl die meisten WordPress-Themes responsiv sind, bedeutet dies nicht unbedingt, dass auch Ihre Bilder responsiv sind. Da Sie nicht möchten, dass ein großes Bild auf einem kleinen Bildschirm geladen wird, müssen Sie zusätzliche Bildgrößen für Ihre Site registrieren. Wenn Ihr Theme keine responsiven Bilder verwendet, ziehen Sie in Betracht, einen Profi für den Job zu engagieren – es ist nicht so einfach, wie es sich anhört.

Bilder für Social Media optimieren

Wenn Sie sicherstellen möchten, dass Ihre Bilder in sozialen Medien gut aussehen, müssen Sie einen zusätzlichen Schritt unternehmen und Meta-Tags und Schema-Markup optimieren.

Wenn Sie ein SEO-Plugin wie Yoast verwenden, vergessen Sie nicht, die Einstellungen zu überprüfen. Mit Yoast können Sie beispielsweise einige Dinge im Zusammenhang mit sozialen Medien einrichten. Navigieren Sie also zu SEO -> Social und geben Sie die Informationen auf Facebook, Twitter, Google+ und Pinterest ein.

Wenn Sie mehr wollen und Bilder für zusätzliche Social-Media-Websites optimieren möchten, sehen Sie sich WPSSO – Accurate Meta Tags + Schema Markup for Social Sharing Optimization & SEO Plugin an.

Ändern Sie die Art und Weise, wie WordPress JPEG-Bilder komprimiert

Wenn Sie eine Reihe von JPEG-Bildern auf Ihre WordPress-Website hochladen, haben Sie möglicherweise bemerkt, dass sie an ihrer ursprünglichen Qualität verlieren. Wenn Sie sich gefragt haben, ob WordPress schuld ist, haben Sie jetzt Ihre Antwort – ja, das ist es!

Sobald Sie ein Bild im JPEG-Format hochladen, ändert WordPress automatisch die Komprimierung und entscheidet, dass das Bild an Qualität verlieren soll. Genauer gesagt verwendet WP eine 90%ige Komprimierung Ihrer JPGEs. Das ist großartig, wenn Ihre Bilder nur dazu dienen, als Miniaturansichten von Beiträgen verwendet oder in einem Beitrag angezeigt zu werden, aber wenn Sie Ihre Fotos hochladen, möchten Sie, dass sie so gut wie möglich sind, oder?

Glücklicherweise benötigen Sie nur eine Codezeile, um dies zu ändern.

Stoppen Sie die Komprimierung von JPEG-Bildern:

Wenn Sie nicht möchten, dass Ihre JPEG-Bilder komprimiert werden, kopieren Sie einfach den folgenden Code und fügen Sie ihn in Ihre Datei functions.php ein:

 add_filter('jpeg_quality', function($arg){return 100;});

Vergessen Sie nicht, die Änderungen zu speichern, und schon können Sie neue Bilder hochladen.

Auf der anderen Seite sind Bilder für Sie möglicherweise nicht so wichtig. Vielleicht möchten Sie, dass sie noch komprimierter sind und Sie beim Laden Ihrer Site Zeit sparen. Wenn Sie die letzte Zahl in dieser Codezeile ändern, ändern Sie die Qualität der neu hochgeladenen Bilder.

JPEG-Bilder noch stärker komprimieren:

Je niedriger die Zahl, desto mehr Bilder werden komprimiert. Um beispielsweise diese JPEGs noch stärker zu komprimieren, benötigen Sie diesen Code:

 add_filter('jpeg_quality', function($arg){return 80;});

Vergessen Sie nicht; Die Standardkomprimierungsstufe ist 90.

Die beliebtesten Bildoptimierungs-Plugins für WordPress

Am Anfang dieses Artikels haben wir darüber gesprochen, wie Sie Bilder für WordPress optimieren können, damit Sie Ihre Website beschleunigen und die SEO verbessern. Wie Sie gesehen haben, gibt es verschiedene Methoden, die Sie verwenden können. Es ist wichtig, sich um Bilder zu kümmern, noch bevor Sie sie in Ihren Blog hochladen. Wenn jedoch bereits Bilder auf der Website verfügbar sind, kann es unmöglich werden, jedes einzelne Bild einzeln zu optimieren und dann erneut hochzuladen.

Mach dir keine Sorge; Niemand erwartet von Ihnen, dass Sie dies tun. Bleiben Sie in den folgenden Minuten bei uns, denn wir zeigen Ihnen die beliebtesten Bildoptimierungs-Plugins für WordPress.

Um Bilder zu optimieren, müssen Sie nur das Plugin aus der Liste auswählen. Sie müssen es konfigurieren und die Dinge auswählen, die das Plugin für Sie tun wird. Danach können Sie sich entspannen und die Arbeit an das Plugin Ihrer Wahl delegieren, während Sie mit der Organisation Ihrer Mediendateien beginnen können.

Die folgenden Plugins helfen Ihnen, die Bilder auf jeder Ihrer WordPress-Sites zu komprimieren. Sie werden die Website schneller laden und Ihnen letztendlich helfen, die SEO zu verbessern.

WP Smush-Plugin

PREIS: Kostenlos

Mit mehr als 700.000 aktiven Installationen muss WP Smush eines der besten Bildoptimierungs-Plugins für WordPress sein. Es kann Bilder schnell optimieren, indem es verschiedene Komprimierungstechniken verwendet. Das Tolle am Komprimieren von Bildern mit WP Smush ist, dass Bilder nicht an Qualität verlieren. Glauben Sie uns nicht? Testen Sie das Plugin.

Als wir über die Vorbereitung von Bildern für WordPress sprachen, erwähnten wir, dass die Größenänderung ein entscheidender Teil des Optimierungsprozesses ist. Mit diesem Plugin müssen Sie sich darüber keine Gedanken machen, da Sie mit WP Smush maximale Abmessungen festlegen können. Danach werden alle größeren Bilder automatisch verkleinert, bevor Sie sie der Bibliothek hinzufügen.

Dieses fantastische Plugin kann mit JPEG-, GIF- und PNG-Dateien arbeiten. Es funktioniert mit allen Ihren Verzeichnissen, kümmert sich automatisch um die Anhänge und funktioniert sogar auf mehreren Websites. Sie können jedes Bild manuell bearbeiten oder fünfzig davon in großen Mengen bearbeiten. Wenn Sie noch bessere Ergebnisse und mehr Optionen wünschen, sehen Sie sich WP Smush PRO an.

EWWW-Bildoptimierungs-Plugin

PREIS: Kostenlos

Hinter dem lustigen Namen verbirgt sich eines der beliebtesten Bildoptimierungs-Plugins für WordPress. Genau wie der zuvor erwähnte kann EWWW Image Optimizer Ihre Bilder komprimieren, ohne deren Qualität zu beeinträchtigen. Wenn Sie daran denken, dass das Plugin Ihre Website in Sekundenschnelle beschleunigen kann, sind Sie bereits auf dem Weg, es herunterzuladen. Sobald Sie dies tun, können Sie Bilder in großen Mengen optimieren, und Galerien wie GRAND FlaGallery, NextCellent und NextGEN erhalten sogar ihre eigenen Bulk Optimize-Seiten.

Alle Bilder, die die WP_Image_Editor-Klasse in WordPress verwenden, werden automatisch optimiert , während Sie an allen anderen manuell arbeiten können. Uns gefällt, dass Sie Ordner auswählen können, die Sie optimieren möchten. Für weitere Details dazu und welche Plugins die Klasse verwenden, öffnen Sie bitte die offizielle EWWW Image Optimizer-Seite im WordPress-Repository.

Plugin für JPEG- und PNG-Bilder komprimieren

PREIS: Kostenlos

Wenn der süße kleine Panda mit dem WordPress-Logo Sie nicht dazu bringt, mehr über dieses Plugin zu erfahren, wissen wir nicht, was. Und wenn Ihnen der Panda bekannt vorkommt, liegt das daran, dass er Ihnen beim Komprimieren von Bildern auf der TinyPNG-Website hilft. Ja, das Tier scheint vielseitiger zu sein, als wir ursprünglich dachten. Aber konzentrieren wir uns auf das Plugin.

Wenn Sie dieses Plugin verwenden, optimiert der Panda Ihre Bilder automatisch. Jedes Mal, wenn Sie ein neues hochladen, übernimmt das Plugin und erledigt seine Arbeit. Sie können jedoch einzelne Bilder optimieren oder dies in großen Mengen tun, indem Sie einfach in die Mediathek gehen.

Komprimieren von JPEG- und PNG-Bildern unterstützt sogar animierte PNGs, funktioniert perfekt auf einer Multisite, ist WooComerce-kompatibel und hat keine Probleme mit WP Offload S3.

Das Tolle an dem Plugin ist, dass Sie maximale Breiten- und Höhenattribute für alle Bilder festlegen können. Wenn Sie sich Gedanken darüber gemacht haben, was die Metadaten bewirken, machen Sie sich keine Sorgen; der Panda behält alle Informationen intakt.

Es gibt keine Dateigrößenbeschränkungen, Sie können ein Dashboard-Widget einrichten und es funktioniert sogar mit der mobilen WordPress-App. Aus diesem Grund hat Compress JPEG & PNG Images mehr als 100.000 aktive Installationen und verdient einen Platz auf der Liste der besten Bildoptimierungs-Plugins für WordPress.

Imsanity-Plugin

PREIS: Kostenlos

Obwohl das Titelbild für dieses Plugin Sie abschrecken könnte, nehmen Sie sich eine Sekunde Zeit und sehen Sie sich alle Funktionen von Imsanity an. Oh, selbst der Name des Plugins klingt verrückt, oder? Sobald Sie mit dem Namen des Plugins einverstanden sind, werden Sie sehen, dass es viel zu bieten hat.

Imsanity kann Bilder automatisch skalieren, Sie können maximale Abmessungen festlegen und bietet sogar eine Option zur Massenänderung. Dies ist wichtig, wenn Sie bereits Hunderte von Bildern in Ihrem Blog haben, die optimiert werden müssen.

Dieses kostenlose Plugin ist eine großartige Option, wenn Sie nicht viel mit den Einstellungen des Plugins kämpfen möchten. Alles, was Sie brauchen, ist Imsanity zu installieren und zu aktivieren, ein paar Optionen einzustellen und Sie können es vergessen. es wird seinen eigenen Weg in Richtung Bildoptimierung schaffen.

Uns hat die Option gefallen, mit der Sie BMP-Bilder in JPG konvertieren können. Nur für den Fall, dass Sie viele BMP-Dateien haben, die Sie vor einiger Zeit versehentlich hochgeladen haben, ist dies ein Lebensretter.

ShortPixel Image Optimizer-Plugin

PREIS: Kostenlos

Mit mehr als 30.000 aktiven Installationen ist ShortPixel Image immer noch eines der beliebtesten Bildoptimierungs-Plugins für WordPress. Das Plugin ist vollgepackt mit Funktionen und ist ein Muss für Websites, die viele Bilder zu optimieren haben.

ShortPixel Image Optimizer optimiert nicht nur JPG-, PNG-, GIF- und PDF-Dokumente für Sie, sondern lässt Sie auch jedes JPEG-, PNG- oder GIF-Bild in WebP konvertieren . Das Plugin funktioniert gut mit anderen Galerie-Plugins und es ist egal, ob Ihre Site HTTP oder HTTPS verwendet. Damit können Sie EXIF-Daten aus Bildern entfernen (etwas, das Fotografen lieben werden).

Das Plugin erkennt bereits optimierte Bilder und überspringt sie bei Bedarf. Sie können die automatische Optimierung zulassen oder verbieten und mit diesem fantastischen Plugin viel, viel mehr tun. Schauen Sie sich die offizielle Seite des Repositorys an, um alle Funktionen zu sehen.

Optimus – WordPress Image Optimizer

PREIS: Kostenlos

Genau wie das zuvor erwähnte Plugin optimiert Optimus Ihre Bilder für WordPress, und zwar ohne die Qualität Ihrer Bilder zu beeinträchtigen. Sie können das Plugin automatisch arbeiten lassen oder die Option deaktivieren und Bilder nur bei Bedarf optimieren.

Optimus funktioniert auf mehreren Websites, es ist kein Unbekannter für WordPress-E-Commerce-Sites und es ist vollständig für WordPress Mobile Apps und Windows Live Writer optimiert. Es beschleunigt Ihre Website, ohne dass Sie eine Codezeile berühren müssen. Das Plugin bietet noch viel mehr, aber Sie müssen sich für die Premium-Version anmelden. Um mehr zu sehen, besuchen Sie bitte die offizielle Seite des WordPress-Plugins-Repository.

Füge Lazy Loading für deine Videos und Bilder in WordPress hinzu

Sobald Sie beginnen, viel Video- und Bildmaterial auf Ihrer Website hinzuzufügen, ist es offensichtlich, dass sie langsamer lädt. Egal woher sie kommen, Videos und große Bilder werden ein schweres Gewicht auf Ihrer Website sein und Ihre Besucher viel länger warten lassen, als nötig, um den gesamten Inhalt zu laden. Mit WordPress sollte das keine große Sache sein und hier ist, wie Sie die Situation leicht beheben können.

Wenn Sie sich mit PHP auskennen, gibt es einen großartigen Artikel über das Hinzufügen von Lazy Loading für Bilder und das unendliche Scrollen von unseren Kollegen auf Elegant Themes.

Wenn nicht, werden wir in den nächsten Zeilen einige der beliebtesten Lazy-Loading-Plugins erwähnen, die das Laden Ihrer Website beschleunigen . Und Sie müssen nicht einmal viel tun, außer ein Plugin zu installieren und in wenigen Schritten einzurichten.

Lazy Load für Videos

PREIS: Kostenlos

Wenn Sie viele Youtube- und Vimeo-Videos haben, sollten Sie die Installation dieses Plugins in Betracht ziehen. Sobald Sie es eingerichtet haben, platziert das Plugin ein Bild in Ihrem Video und daher wird Ihre Website viel schneller geladen. Sobald ein Besucher zu einem Video scrollt, wird dieses Bild mit einem „Play“-Button darüber angezeigt. Nach einem Klick wird das Video geladen und abgespielt. Eine einfache Demo kann auf der Entwicklerseite angesehen werden.

WP YouTube Lyte

PREIS: Kostenlos

Dieses Plugin wird seine Arbeit schnell und einfach erledigen. Fügen Sie nach der Installation einfach einen Link zu Ihrem Youtube-Video hinzu oder verwenden Sie einen Shortcode, um einen hinzuzufügen. Sie können wählen, ob Sie ein normales Video, eine Wiedergabeliste oder nur Audio aus dem ausgewählten Video hinzufügen möchten. Danach erhalten Ihre Youtube-Videos ein Bild darüber, das Lazy Loading ermöglicht. Klicken Sie einfach auf das Bild, um Ihr Video oder Audio zu starten.
Sehen Sie sich eine Demo auf der Entwicklerseite an.

a3 Lazy Load

PREIS: Kostenlos

Dieser ist Ihrer mobilen Website gewidmet. Wenn Sie viele Bilder und/oder Videos haben, die Sie Ihren Besuchern auf mobilen Geräten zeigen möchten, sollten Sie sich a3 Lazy Load ansehen. Es ermöglicht Ihnen, Ihren Bildern und Videos Lazy Loading hinzuzufügen, und das Plugin lässt Sie sogar Übergangseffekte auswählen, die den Benutzern angezeigt werden, während sie durch den geladenen Inhalt scrollen.

Im Admin-Bereich können Sie die Inhalte, die Sie faul laden möchten, ganz einfach ein- und ausschalten. Für diejenigen, die aktiviert sind, werden Inhalte nur dann geladen, wenn ein Besucher zu diesem Teil des Inhalts scrollt.
Es gibt eine schön gezeigte Demo mit 1000 Bildern – jedes wird erst geladen, wenn Sie darauf scrollen. Da dieses Plugin auch Videos faul lädt, gibt es eine Videodemo, die Sie sehen können, indem Sie auf den obigen Link klicken.

BJ Lazy Load

PREIS: Kostenlos

Wenn Sie keine Unterstützung für Videos benötigen und Ihre Bilder nur träge laden möchten, sollten Sie sich dieses WP-Plugin ansehen. Nach der Installation und Einrichtung ersetzt es Ihre Bilder, Miniaturansichten, Gravatar-Bilder und sogar Iframes durch einen Platzhalter. Ähnlich wie bei einem zuvor erwähnten Plugin lädt es Inhalte erst, wenn ein Benutzer darauf kommt.

Ob Bilder oder Videos, die Sie faul laden möchten, eines der oben genannten Plugins hilft Ihnen in Sekundenschnelle. Alle von ihnen sind kostenlos, es gibt also keine Entschuldigung dafür, nicht mindestens eines der Plugins auszuprobieren und zu sehen, wie viel Gewicht Ihre Schultern es nehmen wird. Natürlich gibt es viele andere Plugins mit der gleichen Funktion und Sie können alle durchsuchen und ausprobieren.

Zeigen Sie Vorher-Nachher-Bilder auf attraktive Weise an

Sicher haben Sie schon viele Beispiele von Vorher-/Nachher-Bildern gesehen. Ich weiß nicht, wie es Ihnen geht, aber das erste, was wir im Sinn haben, wenn wir den Satz „Vorher und Nachher“ sehen, ist ein Fitnesstrainingsprogramm, bei dem die Leute ihren Körper vor und nach einem Trainingsprogramm zeigen.

Wenn Sie darüber nachdenken, verwenden die meisten Websites einen einfachen Ansatz, um die Unterschiede zu zeigen – sie nehmen beide Bilder und platzieren sie nebeneinander oder sogar übereinander. Wenn Sie das gleiche Ergebnis erzielen möchten, würden Sie diesen Artikel nicht lesen, da Sie bereits wissen, wie das geht.

Was wäre, wenn wir Ihnen sagen würden, dass es eine visuell beeindruckende Möglichkeit gibt, dieses Vorher/Nachher-Problem zu lösen und es nur in Reichweite Ihrer Hand ist? Nun, das gibt es und nach einem Setup werden Sie die Entwickler loben, denn das Endergebnis ist wirklich, wirklich cool.

Zwanzig Zwanzig

PREIS: Kostenlos

Twenty Twenty ist der Name dieses großartigen Plugins, das Sie kostenlos im WordPress-Plugin-Repository herunterladen können.

Mit dem Plugin können Sie ein Bild über das andere legen und mit einem Schieberegler spielen, damit Sie das Bild ein- / ausblenden können. Bitte sehen Sie sich die Demo an und Sie werden sehen, worüber wir sprechen.

OK, jetzt, wenn Sie von diesem kleinen Plugin begeistert sind, lassen Sie uns sehen, wie Sie diesen atemberaubenden Effekt erzeugen. Obwohl es relativ einfach ist, den Demo-Effekt nachzubilden, müssen Sie sich mit grundlegendem HTML auskennen. Lass uns gehen:

1. Erstelle einen neuen Beitrag oder öffne den bestehenden
2. Fügen Sie zwei Bilder in den Beitrag ein. Wenn Sie in einem visuellen Editor arbeiten, sollten Sie das Bild übereinander sehen. Wenn Sie in einem Texteditor arbeiten, sollten Sie einen ähnlichen Code sehen:

 <a href="image1.jpg"><img src=
"http://www.loactionoftheimage.com"width="700" 
Höhe="200" /></a>

<a href="image2.jpg"><img src=
"http://www.loactionoftheimage.com"width="700" 
Höhe="200" /></a>

3. Geben Sie das Tag [twentytwenty] vor dem ersten Bild ein
4. Geben Sie nach dem zweiten den Tag [/twentytwenty] ein

Sie sollten in Ihrem Texteditor so etwas wie folgt erhalten:

5. Stellen Sie sicher, dass Ihre Bilder die gleiche Größe haben, um die besten Ergebnisse zu erzielen
6. Zeigen Sie eine Vorschau Ihres Beitrags an oder veröffentlichen Sie ihn und genießen Sie Ihre visuell beeindruckenden Vorher-Nachher-Bilder

So erstellen Sie interaktive Bilder – zeichnen, Beschreibungen und Links hinzufügen

Heutzutage ist es schwer, eine Website ohne Multimedia zu betreiben. Bilder, Videos und Musik gehören zu praktisch jeder Website. Ein durchschnittlicher Internetnutzer ist stark von visuellen Reizen abhängig, daher müssen Sie sich um den visuellen und interaktiven Teil Ihrer Site kümmern. Artikel mit Bildern erhalten 94 % mehr Aufrufe als Artikel ohne. Außerdem ist bereits bekannt, dass Multimedia auf Websites den ROI des Content-Marketings steigern kann.

Wir hoffen, dass Sie nicht überredet werden müssen, sich um die Bilder auf Ihrer Website zu kümmern. Selbst wenn Sie keine Bilder in Artikeln verwenden (was Sie sollten), verwenden Sie vorgestellte Bilder, oder? Es gibt ziemlich viele Galerie-Plugins, mit denen Sie Bilder auf Ihrer WordPress-Site verwalten, fotografiebezogene Themen erstellen, Instagram mit Ihrer WordPress-Site verbinden und vieles mehr tun können. Aber was wäre, wenn Sie mehr interaktive Inhalte erstellen wollten?

Für den Anfang könnten Sie daran interessiert sein, einen Vorher-Nachher-Bildeffekt hinzuzufügen, den Ihre Benutzer lieben werden. Vergessen Sie nicht die Virtual Reality in WordPress, die immer beliebter wird, nachdem Automattic VR in WordPress.com eingeführt hat. Trotzdem fehlt etwas. Ist es möglich, interaktive Bilder mit anklickbaren Teilen zu erstellen? Ja, das ist möglich und wir zeigen Ihnen, wie einfach und unterhaltsam das ist.

Aufmerksamkeit erregen

PREIS: Kostenlos

Das erste, was Sie an diesem Plugin mögen werden, ist, dass es völlig kostenlos ist! Wie bei jedem anderen Plugin aus dem WordPress-Repository können Sie es in wenigen Minuten herunterladen, installieren und aktivieren. Mit der kostenlosen Version können Sie mit einem interaktiven Bild arbeiten. Wenn Sie mehr wollen, müssen Sie sich für die PRO-Version entscheiden, aber darüber werden wir später sprechen.

Das Plugin reagiert und Sie müssen sich keine Sorgen machen, dass die interaktiven Bilder auf jedem Gerät richtig angezeigt werden. Das Bild wird nicht nur entsprechend der Bildschirmgröße skaliert, sondern es funktioniert auch in den meisten modernen und älteren Browsern (Desktop und Handy). Draw Attention verwendet Canvas-Elemente, wenn es in neuen Browsern angezeigt wird, während es auf Imagemaps zurückgreift, wenn Sie es in einem älteren laden.

Merkmale

Bevor wir zu einem Beispiel kommen, das Ihnen zeigt, wie leistungsstark dieses einfache Plugin ist, sehen wir uns an, was Sie von Draw Attention erwarten können:

• Zeichnen – Nachdem Sie ein Bild hochgeladen haben, haben Sie die Möglichkeit, Formen darauf zu zeichnen. Wählen Sie einen beliebigen Teil Ihres Bildes aus, der auswählbar/anklickbar wird
• Farben – Passen Sie die Farben an, damit Sie Hotspots an Ihr Site-Design anpassen können
• Hervorheben beim Schweben – Zeigen Sie einen anderen Teil des Bildes an, wenn ein Benutzer den Mauszeiger über den ausgewählten Teil bewegt
• Weitere Informationen anzeigen – Zeigen Sie mehr Informationen über den ausgewählten Teil des Bildes an
• Gehe zu URL – Leite Benutzer zu einer beliebigen URL um, wenn sie auf die Auswahl klicken

Beispiel – Interaktive Karte von Hawaii

Wir zeigen Ihnen anhand des Beispiels von der Demo-Site, was Sie mit Draw Attention genau machen können. Sehen wir uns also an, wie eine interaktive Karte von Hawaii aussieht, wenn sie mit dem Plugin erstellt wird.

Das erste, was Sie tun müssen, ist, ein Bild von Hawaii-Inseln zu finden. Nachdem Sie zu Aufmerksamkeit erregen -> Bild bearbeiten navigieren , sollten Sie das Bild in den Bereich in der rechten Seitenleiste hochladen. Sobald das Bild geladen ist, kann der Spaß beginnen.

Hier können Sie Farben für Hervorhebungen auswählen (Farbe, Rahmen, Deckkraft usw.), das „Mehr Info-Feld“ gestalten (Bild, Titel, Textfarbe usw.). Wenn Sie nicht jede einzelne Farbe für das Bild manuell auswählen möchten, können Sie schnell ein Farbschema aus der rechten Seitenleiste auswählen.

Der magischste Teil passiert im Einstellungsbildschirm der Hotspot-Bereiche . Hier wird Ihr Bild in voller Größe geladen. Jetzt müssen Sie nur noch mit dem Zeichnen beginnen und einen neuen Hotspot erstellen. Sie können so viele Punkte hinzufügen, wie Sie möchten, was bedeutet, dass Sie eine umfassende Auswahl nach Belieben erstellen können. Sie können beliebig viele Hotspots erstellen und jeder kann seine eigenen Einstellungen haben.

In diesem Beispiel sollten Sie also eine der Inseln auswählen. Wählen Sie einen Titel für die Insel, fügen Sie eine Beschreibung und das zusätzliche Bild hinzu, das angezeigt wird, sobald ein Benutzer über den Hotspot fährt (rechter Teil des oben gezeigten GIF-Bildes).

Sie sollten den Vorgang für jede der Inseln wiederholen, die interaktiv sein sollen. Sobald Sie Ihre Hotspots bereit haben, kopieren Sie einfach den Shortcode von der rechten Seite. Fügen Sie den Shortcode in einen Beitrag, eine Seite, ein Widget oder wo auch immer Sie Ihre neue interaktive Karte anzeigen möchten, ein, und Sie sind fertig! Wenn Sie Benutzer auf eine andere Seite umleiten möchten, nachdem sie auf die Auswahl geklickt haben, müssen Sie nur die URL anstelle der Beschreibung auswählen. So einfach!

Pro-Version

Während die kostenlose Version perfekt ist, wenn Sie nur ein Bild benötigen, können Sie mit der PRO-Version so viele interaktive Bilder auf Ihrer Website haben, wie Sie möchten. Obwohl dies der wichtigste Punkt ist, den Sie berücksichtigen sollten, erhalten Sie mit der PRO-Version noch mehr als mehrere Bilder.

Mit der Funktion "Layout-Optionen" können Sie mehr Informationen zu ausgewählten Teilen des Bildes anzeigen. Zum Beispiel können Sie Informationen in einer Lightbox oder in einer einfachen Symbolleiste anzeigen, die angezeigt wird, nachdem ein Benutzer den Mauszeiger über den ausgewählten Teil des Bildes bewegt.

Es gibt auch zwanzig vordefinierte Farbpaletten, sodass Sie nicht jede einzelne Farbe manuell anpassen müssen. Die PRO-Version kostet 74 US-Dollar für eine Einzelplatzlizenz, aber wenn Sie mehr als ein interaktives Bild benötigen, ist dies ein Kinderspiel.

So regenerieren Sie zusätzliche Bildgrößen

Es ist relativ einfach, neue Bildgrößen in Ihrem WordPress-Theme zu registrieren. Nachdem Sie Ihrem System mitgeteilt haben, wie groß Ihre Bilder sein sollen, sie benannt und entschieden haben, wie sie zugeschnitten werden sollen, können Sie die Bilder beliebig verteilen. Aber was ist mit den alten Bildern?

Wenn Sie eine der von uns gezeigten Techniken angewendet haben, haben Sie den Rasen für neue Bilder vorbereitet. Unabhängig davon, ob Sie neu registrierte Bildgrößen für Post-Thumbnails verwenden oder Autoren erlauben, sie in Posts zu verwenden, gelten die neuen Regeln nur für die Bilder, die nach der Änderung in der Datei functions.php hochgeladen werden. Um die älteren Bilder zu ändern, empfehlen wir die Verwendung des Regenerate Thumbnails Plugins.

Miniaturansichten regenerieren:

PREIS: Kostenlos

1. Gehen Sie zu Plugins->Neu hinzufügen
2. Suche nach „Miniaturansichten regenerieren“
3. Installieren und aktivieren Sie das Plugin
4. Navigieren Sie zu Tools->Regen.Thumbnails

Wenn Sie die Größe aller Ihrer Bilder ändern möchten, klicken Sie einfach auf die Schaltfläche „Alle Thumbnails neu generieren“ und warten Sie, bis das Plugin die harte Arbeit erledigt hat.

Wenn Sie die Bilder sehen möchten, deren Größe geändert werden soll, oder wenn Sie nur einige der Bilder ändern möchten, gehen Sie zu Ihrer Medienbibliothek, wo Sie eine neue Option unter „Massenaktionen“ und eine neben jedem Bild im Galerie.

Das Gute an dem Plugin ist, dass es Ihre Originalbilder nicht löscht. Es werden nur neue Bildgrößen erstellt, die Sie in Ihrem Design verwenden können, während die Originalgrößen für Sie übrig bleiben, um sie später zu verwenden oder manuell zu löschen, wenn Sie sie nicht benötigen.

Das ist es. Genießen Sie Ihre neuen Thumbnails oder schauen Sie sich das Simple Image Sizes-Plugin an, das dasselbe tun kann.

Entfernen Sie Bildattribute für Breite und Höhe mit jQuery

Beim Hinzufügen von Bildern zu einem WordPress-Beitrag fügt das System automatisch seine Höhen- und Breitenattribute zum Bild hinzu. That's usually a good thing, but there are times when you won't like the fact that every image gets those attributes.

If you want to strip the attributes right at the point of upload, you can do that through a simple function which we showed you last time.

But if you read the article or tried the function yourself, you've noticed that it only affects images uploaded after the function was installed into your WP system. If you already have a database full of posts with inserted images, the aforementioned function won't help you much with your old image attributes.

Since you probably can't go through each and every image manually and delete width and height one by one, you are probably in a need of another function which will strip those attributes for all existing images embedded in your posts. In that case, you're in the right spot 'cause we're about to show you a simple way of automatically removing width and height image attributes with few lines of jQuery code. Don't get scared with the previous phrase – you don't even have to know what jQuery is, just follow the next three steps and you'll be done in a jiffy.

Remove width and height image attributes:

1. Open header.php file from your theme folder
2. Copy and paste this code anywhere between <head> and </head> tags:

 <script src="http://code.jquery.com/jquery-latest.js">
</script>
<Skript>
jQuery.noConflict();
jQuery(document).ready(function($){
$('img').each(function(){
$(this).removeAttr('width')
$(this).removeAttr('height');
});
});
</script>

3. Änderungen speichern

Und du bist fertig! The code will do its magic after you open a post which contains an image and will remove width and height tags from it.

How to create custom image sizes in Media Uploader

If you are using Media Uploader to deal with images in WordPress, you have probably seen numerous options for images. Between many, you are able to choose an image size which you can send to your article.

There are the thumbnail, medium, large and full-size options to choose from, but all those options have predefined values. So, if you're using a custom theme, more often than not you are stuck with changing width and height for each image over and over again.

Actually, you don't have to do that. There is a neat little function called add_image_size() which is a great tool for developers. And after this article, you will find it useful as well.

Let's say your theme has a custom width and you want to easily embed images to fit in there perfectly. Let's say that width is 666px (we won't go into why you have set the width to this number, it's your choice). To do that, you need to add an extra radio button to Media Uploader. With the code below, you'll be adding one more size which is the half size of the original one.

1. Öffnen Sie Ihre Datei functions.php
2. Copy and paste this piece of code:

 function custom_image_sizes() {
add_image_size( 'one-size', 333, 333, true );
add_image_size( 'another-size', 666, 666, true );
}

add_action( 'init', 'custom_image_sizes' );

function show_image_sizes($sizes) {
$sizes['one-size'] = __( 'Custom Size 1', 'isitwp' );
$sizes['another-size'] = __( 'Custom Size 2', '
isitwp' );
return $sizes;
}

add_filter('image_size_names_choose', 
'show_image_sizes');

3. Änderungen speichern
4. Try adding an image from your Media Uploader where you should see your new size options under the “Attachment Display Settings”

Create automatic screenshot of any website and publish it as image in your post

If you want to display a thumbnail of a website, you would have to go to the website, print screen it or take a screenshot with a program or a browser add-on. Then you would need to modify the image, cut it to the right size and upload it to your WordPress so that you can use the screenshot in a post.

If you don't have to take that snapshot every now and then, it won't be a problem, but if you're using screenshots of different websites more often, you will be happy to hear that there is an awesome function which will save you time and your nerves.

In this part of the guide, we are about to show you the complete function which creates a shortcode that you can use for taking snapshots of any web page you want.

Create automatic screenshot:

1. Öffnen Sie die Funktionen.php
2. Kopieren Sie den folgenden Code und fügen Sie ihn ein:

 function wp_webscreen($atts, $content = NULL) {
extract(shortcode_atts(array(
"snap" => 'http://s.wordpress.com/mshots/v1/',
"url" => 'http://www.firstsiteguide.com',
"alt" => 'wploop',
"w" => '600', // width
"h" => '450' // height
), $atts));

$img = '<img alt="' . $alt . '" src="' . $snap . 
'' . urlencode($url) . '?w=' . $w . '&h=' . $h . '" />';
return $img;
}
add_shortcode("screen", "wp_webscreen");

3. Change default variables in the array
4. Änderungen speichern

This function creates a shortcode that you can easily use anywhere on your WordPress website. Whether you want to use the screenshot of a web page in a post, sidebar widget or your footer, for example, simply c/p the shortcode in the right spot:

[screen url=”http://www.firstsiteguide.com” alt=”fsg” w=”600″ h=”450″]

What's great about this function is that it saves the image as dynamic URL which means that once you create a snapshot with the shortcode, it will automatically refresh itself in the future and always show the current looks of the website specified in the shortcode.

Note that you can change the parameters of the shortcode directly from it. You don't have to modify the code in the functions.php file if you want to take the snapshot of another URL or to take the snapshot in a different dimension.

Example:

Let's say that you want to take a screenshot of Google and make it 200×400 pixels big:

[screen url=”http://www.google.com” alt=”Google” w=”200″ h=”400″]

You can make everything even easier by saving the shortcode into a button so that you can insert it into a post with a single click of a button.

Abschluss

You don't have to install all plugins and functions we mentioned in order to improve the images on your WordPress site. But we hope that you have found at least a few tips that will help you to optimize images or make them better in any way.