Wie fange ich mit Optimole an?

Optimole ist eine cloudbasierte Lösung zur Optimierung der Bilder Ihrer Website. In diesem Leitfaden erfahren Sie, wie Sie es in wenigen Schritten auf Ihrer WordPress-Website aktivieren können. Um es auf Nicht-WordPress-Websites zu verwenden, erstellen Sie einfach Ihr kostenloses Konto und folgen Sie den Schritten zur benutzerdefinierten Integration.

Hero-Bild Preloader

Eine wichtige Funktion von Optimole ist die Fähigkeit, das Hero-Bild auf den Webseiten zu erkennen, um ein schnelles Laden zu gewährleisten, ohne die Leistung erheblich zu beeinträchtigen. Dazu wird das Attribut fetchpriority="high" hinzugefügt, um deren Laden zu priorisieren. Es scannt das erste Bild, das die Kriterien erfüllt, und wendet dies nicht auf andere Bilder an. Darüber hinaus wird es auch auf das Site-Logo angewendet.

📚 Was ist in diesem Leitfaden?

📩 Installieren Sie das Optimole-Plugin auf Ihrer WordPress-Site

1

Melden Sie sich in Ihrem WordPress-Admin-Bereich an und gehen Sie zu Plugins → Neu hinzufügen.

2

Suchen Sie mithilfe des Felds rechts nach dem Optimole-Plugin:

3

Klicken Sie auf Jetzt installieren neben dem Namen des Plugins:

4

Nach Abschluss der Installation erscheint die Schaltfläche Aktivieren anstelle der Schaltfläche Jetzt installieren. Klicken Sie darauf. Ein neues Panel Optimole wird angezeigt.

⛳️ Aktivieren Sie Optimole

Sobald Sie das Optimole-Plugin installiert und aktiviert haben, werden Sie aufgefordert, ein Konto zu registrieren und Ihren persönlichen API-Schlüssel einzugeben, der Ihnen die Verbindung zum Optimole-Dienst ermöglicht.

Klicken Sie auf die Schaltfläche Konto erstellen & verbinden (Sie werden gebeten, eine E-Mail-Adresse anzugeben, die zum Einrichten Ihres neuen Kontos verwendet wird).

🚄 Wie Sie wissen, wird Optimole Ihre Bilder verarbeiten und optimierte Versionen davon kostenlos an 1.000 Besucher Ihrer Website pro Monat liefern.

Wenn Ihr Konto eingerichtet ist, erhalten Sie Ihren API-Schlüssel per E-Mail. Diese E-Mail sieht ungefähr so aus:

In der E-Mail erhalten Sie neben dem API-Token auch die Anmeldedaten für Ihr Benutzerprofil auf dashboard.optimole.com

Wenn Sie bereits ein aktives Optimole-Konto haben, können Sie den Schritt "Konto erstellen und verbinden" überspringen und direkt die Schaltfläche "Ich habe bereits einen API-Schlüssel" verwenden.

Auf dem nächsten Bildschirm können Sie Ihren API-Schlüssel aus dem Optimole-Dashboard verwenden und damit den Optimole-Dienst verbinden.

Nach ein paar Sekunden können Sie mit Optimole arbeiten. Sie sehen diese Benachrichtigung:

🏁 Beginnen Sie mit Optimole

Das Tolle an Optimole ist, dass es automatisch funktioniert; wenn Sie nicht möchten, müssen Sie keine weiteren Einstellungen vornehmen, damit Optimole seine Arbeit erledigt - es funktioniert bereits!

Sie können zum Haupt-Dashboard von Optimole gehen, um den Status des Dienstes zu sehen (im Optimole-Panel). Dort zeigt Optimole Ihre Kontoinformationen zusammen mit Ihrer Nutzung des Optimole-Dienstes und dem erreichten Optimierungsgrad an.

⚠️ Der zentrale Teil dieses Optimole-Tutorials endet hier. Alles unterhalb dieses Punktes ist optional. Optimole ist bereits zu 100 % betriebsbereit und funktionsfähig.

Obwohl Optimole automatisch arbeitet, gibt es dennoch mehrere Optionen, die Ihnen ein bisschen mehr Kontrolle darüber geben, was vor sich geht. Um diese Optionen zu sehen, wechseln Sie zur Registerkarte Einstellungen.

⚙️ Optimole-Einstellungen - Allgemein

Hier können Sie die wichtigsten Einstellungen sehen:

• Optimole Bildbearbeitung aktivieren - dies stellt das Herzstück von Optimole dar; lassen Sie diese Einstellung aktiviert, um die fortschrittliche Bildoptimierung von Optimole zu nutzen - mehr erfahren
• Skalierung und Lazy Loading - wie der Text darunter erklärt, werden Bilder je nach Bildschirmgröße des Besuchers skaliert und dann per Lazy Loading geladen - mehr erfahren
• Diagnosetool aktivieren - ermöglicht den eingebauten Fehlerbehebungsmechanismus von Optimole - mehr erfahren
• Zwischengespeicherte Ressourcen löschen - optimieren Sie Bilder neu, indem Sie den Cache löschen. Wie in der Beschreibung erwähnt, kann es vorkommen, dass Optimole alte Versionen von aktualisierten Ressourcen anzeigt - mehr erfahren
• Optimole-Abzeichen aktivieren - durch Aktivierung dieser Option wird ein "Optimiert von Optimole"-Abzeichen auf Ihrer Website angezeigt. Als Belohnung erhalten Sie 20.000 weitere Besuche - mehr erfahren

⚠️ Hinweis: Vergessen Sie nicht, nach Änderungen die Schaltfläche Änderungen speichern zu klicken.

🚀 Erweiterte Einstellungen

In der Registerkarte Erweitert können Sie noch mehr Kontrolle darüber übernehmen, wie Optimole Ihre Bilder optimiert. Lassen Sie uns jede Unterregisterkarte einzeln durchgehen:

Komprimierung

Standardmäßig komprimiert Optimole die Bilder auf Ihrer Website und nutzt dabei Machine-Learning-Algorithmen, um die kleinste mögliche Größe bei minimalem Qualitätsverlust zu erreichen. Falls Sie der Meinung sind, dass dieser automatische Prozess nicht Ihren Anforderungen entspricht, können Sie ihn deaktivieren und manuell das gewünschte Komprimierungs-/Qualitätsniveau festlegen.

Unten befindet sich ein Regler, mit dem Sie das Komprimierungsniveau anpassen können. Sobald Sie den Regler bewegen, zeigt Optimole eine Vorschau basierend auf einem Bild aus Ihrer Mediathek an.

Wenn Sie sich für ein Komprimierungsniveau entschieden haben, vergessen Sie nicht, die Schaltfläche Änderungen speichern zu drücken.

Manuelle Komprimierung aktiviert

📝 Hinweis: Erfahren Sie mehr über die automatische Qualitätsoptimierung durch ML (Machine Learning) in diesem Dokument.

Über dem Regler gibt es weitere Optionen:

• Automatische Auswahl des besten Bildformats - Optimole bietet den besten Format-Support für seine Benutzer, was bedeutet, dass die Bilder in minimaler Größe ohne Qualitätsverlust zurückgegeben werden - mehr erfahren
• Netzwerkbasierte Optimierungen - Bilder werden schneller auf Internetverbindungen mit niedriger Geschwindigkeit geladen - mehr erfahren
• CSS- und JS-Dienste durch Optimole - wenn Sie Bilder in CSS/JS-Dateien eingebettet haben, optimiert Optimole diese Bilder und liefert den CSS/JS-Inhalt über das CDN aus - mehr erfahren
• GIF-zu-Video-Konvertierung - aktivieren Sie diese Option, wenn Sie viele animierte GIFs veröffentlichen möchten - mehr erfahren
• AVIF-Bildunterstützung - AVIF ist ein neues Bildformat, das erhebliche Kompressionsgewinne gegenüber anderen Formaten wie JPEG und WebP bietet - mehr erfahren

• Bild-Metadaten entfernen - die Möglichkeit, das Entfernen von Metadaten (wie EXIF, IPTC usw.) aus den generierten Bildern ein- oder auszuschalten, wodurch den Benutzern größere Autonomie über ihren Inhalt gewährt wird - mehr erfahren

Größe anpassen

Optimole bietet Ihnen einige coole Einstellungen zum Zuschneiden Ihrer Bilder, damit sie noch besser auf den Zielbildschirm des Besuchers passen:

• Intelligentes Zuschneiden - dies ist eine KI-gestützte Funktion, die für einige Websites nützlich sein kann, abhängig von der Art der veröffentlichten Bilder - mehr erfahren
• Retina-Bilder - Retina-Bildschirme, auch als HiDPI-Bildschirme bekannt, haben eine viel höhere Pixeldichte als Standardbildschirme; daher werden Bilder in doppelter Größe benötigt, um alles scharf aussehen zu lassen; aktivieren Sie diese Funktion, um sicherzustellen, dass Ihre Bilder auf Retina-Bildschirmen gut aussehen - mehr erfahren
• Bildgrößen begrenzen - wie der Name schon sagt, können Sie benutzerdefinierte maximale Breiten oder Höhen für die von Optimole bereitgestellten Bilder festlegen. Wenn diese Einstellung aktiviert ist, wird die Option für Retina-Bilder deaktiviert, um Konsistenz zwischen den Bildern zu gewährleisten - mehr erfahren
• Neue Bildzuschnittgröße hinzufügen - geben Sie Breite und Höhe für zugeschnittene Bilder ein. Sobald Sie die Größe hinzugefügt haben, werden die zugeschnittenen Bilder dort aufgelistet - mehr erfahren

Lazyload

In diesem Abschnitt können Sie feinabstimmen, wie Optimole Lazy Loading ausführt.

• Lazy Load mit generischem Platzhalter - wenn ein Bild auf das Lazy Loading wartet, sieht der Besucher eine unscharfe Version davon - mehr erfahren
• Lazy Load für erste Bilder umgehen - vermeiden Sie Lazy Loading für einige der ersten Bilder oder verwenden Sie 0, um die Funktion zu deaktivieren - mehr erfahren
• Browser-native Lazy Load - fügt ein zusätzliches Flag hinzu, das dem Browser ermöglicht, eine Lazy Load-Methode zu wählen. Wenn dies aktiviert ist, stoppt Optimole den Reskalierungsprozess - mehr erfahren
• Bildskalierung - skaliert die Bilder beim Lazy Load - mehr erfahren
• CSS-Hintergrund Lazy Load - aktivieren Sie Lazy Loading für Ihre Hintergrundbilder - mehr erfahren
• Lazy Loading für eingebettete Videos und iFrames - standardmäßig funktioniert Lazy Loading nicht für Ihre eingebetteten Videos und iFrames - mehr erfahren
• Noscript-Tag - standardmäßig ist diese Option für neue Benutzer deaktiviert und für bereits verbundene Benutzer aktiviert. Dies hilft Browsern, die keine Optimole-Funktionen verarbeiten können, Fallback-Bilder zu laden - mehr erfahren
• Erweitertes CSS-Hintergrund-Lazy Loading - wenn einige Hintergrundbilder immer noch nicht Lazy Loaded werden, können Sie deren CSS-Selektoren hier hinzufügen - mehr erfahren

Ausschlüsse

Wenn Sie möchten, können Sie die Optimierung oder das Lazy Loading von Optimole für einzelne Seiten Ihrer Website, einzelne Bilder oder sogar bestimmte Bildtypen oder Klassen deaktivieren.

📝 Hinweis: Lesen Sie mehr über das Ausschließen von Bildern aus der Optimierung oder Lazy Loading hier.

☁️ Cloud-Bibliothek

Die Registerkarte Cloud-Bibliothek bietet, wie der Name schon sagt, Optionen, um Optimole-Cloud-Bibliotheksbilder auf Ihrer Website zu verwenden. Weitere Informationen finden Sie in unserem Leitfaden zu Einheitlicher Bildzugriff hier.

📤 Bildspeicherung 

Die Funktion "Speichern Sie Ihre Bilder in der Optimole-Cloud" wird von Optimole bereitgestellt und ermöglicht es Website-Besitzern, ihren Server-Speicher zu optimieren und die Website-Leistung zu verbessern, indem Bilder in die Cloud-Infrastruktur von Optimole übertragen werden. Weitere Informationen zu dieser Funktion finden Sie hier.

✅ Benutzerdefinierte Integration 

Um den Dienst auf einer Nicht-WordPress-Website zu nutzen, folgen Sie einfach zwei Schritten: Aktivieren Sie Ihr Optimole-Konto und folgen Sie der Anleitung zur benutzerdefinierten Integration. So können Sie Optimole verwenden, um Websites außerhalb von WordPress zu erstellen.

🤝 Optimole-Tutorial abgeschlossen! 

Das war's! Optimole wird nun Ihre Bilder automatisch optimieren, ohne dass Sie etwas tun müssen.

Mit dem kostenlosen Plan kann Optimole bis zu 1.000 Besucher pro Monat bedienen und Bilder von über 400 CloudFront-CDN-Standorten ausliefern. 🏃🏃

Wenn Sie mehr möchten, melden Sie sich für Optimole  Premium-Pläne an und upgraden auf 40.000 monatliche Besucher und 400+ CDN-Standorte. 🏃🏃🏃🏃🏃🏃🏃🏃🏃

🎥 Video - So beschleunigen Sie Ihre WordPress-Website mit Optimole