Einer der Faktoren, die Ihre Website verlangsamen könnten, ist die Verwendung großer Fotos, die nicht für das Web optimiert sind.
Manchmal, wenn Leute versuchen, etwas schnell zu veröffentlichen, laden sie Fotos direkt von ihrer Fotokamera hoch, mit sehr hoher Auflösung und einem Gewicht von bis zu 4–5 MB.
Ein optimiertes Bild hat weniger Kilobyte ohne sichtbaren Qualitätsverlust, und Sie sollten Bilder stets ohne Qualitätsverlust optimieren, bevor oder während Sie sie auf Ihre Website hochladen.
Unabhängig davon, ob es sich bei Ihrer Website um WordPress oder eine andere Plattform handelt, können Sie Bilder für das Web optimieren und dafür sorgen, dass Ihre Website schneller lädt.
Ein Vorteil der Verwendung von WordPress besteht darin, dass Sie über Plugins verfügen, die Bilder optimieren können, während Sie sie auf Ihre Website hochladen, und auch vorhandene Bilder in großen Mengen optimieren können.
Was sind also die Best Practices für Fotos?
Verlieren Sie nicht an Qualität
Verfolgen Sie die Ziele Ihrer Website. Optimieren Sie nicht blind, nur weil Ihnen ein Tool eine schlechte Bewertung gegeben hat. Tools kennen die Ziele Ihrer Website nicht.
Wenn ich einen Modeblog oder einen Shop hätte, würde ich wunderschöne Bilder zeigen; Es ist mir egal, wie YSlow oder Pagespeed Insights mich bewertet haben.
Hängen Sie sich nicht an Noten und Ergebnissen auf, sondern tun Sie, was für Sie und Ihre Besucher am besten ist. Es ist besser, mehr für CDN auszugeben, um größere und bessere Bilder bereitzustellen, als Bilder zu stark zu optimieren und eine hässliche Website zu haben.
Es könnte Sie Besucher und Geld kosten.
Laden Sie keine Bilder hoch, die größer sind als Sie benötigen
Wenn Ihr Inhalt 620 Pixel breit ist, sollten Sie die Größe Ihrer Bilder auf 620 Pixel ändern, bevor Sie sie auf Ihre Website hochladen.
Wenn Sie möchten, dass Besucher ein größeres Bild sehen, wenn sie darauf klicken, können Sie eine Breite von 1024 Pixel verwenden. Stellen Sie eine der WordPress-Miniaturansichten auf eine Breite von 620 Pixel ein, verwenden Sie diese Miniaturansicht auf Ihrer Seite und verknüpfen Sie sie mit dem größeren Bild.
Sie benötigen wahrscheinlich keine Bilder mit mehr als 1024 Pixel (das sollte für die meisten Blogs ausreichen), aber was ist, wenn doch?
In diesem Fall könnten Sie erwägen, Bilder in größerer Auflösung hochzuladen und ein CDN zu verwenden.
Wir werden gleich ausführlicher auf CDN eingehen.
Optimieren Sie Bilder vor dem Hochladen
Mit Photoshop können Sie Ihre Bilder auf Ihrem Computer optimieren. Einige Leute empfehlen, dass Sie Ihr Bild mit Smart Sharpen, Unsharp Mask, High Pass Filter oder einem anderen Tool Ihrer Wahl etwas schärfer machen. Photoshop bietet mehrere Optionen.
Ich habe nach dem Schärfen keinen großen Unterschied (in KB) gesehen, aber ich bin kein Photoshop-Meister.
Passen Sie die Größe des Fotos an die Auflösung an, die Sie auf Ihrer Website benötigen, verwenden Sie „Für das Web speichern“, wählen Sie JPG, Qualität zwischen 60–80 %, aktivieren Sie „Progressiv“ und dann „Speichern“.
Ich empfehle Ihnen, JPG zu verwenden, es sei denn, Sie benötigen Transparenz und müssen PNG verwenden.
Wenn Sie nicht über Photoshop verfügen, können Sie diese Tools zur Optimierung verwenden:
- Aufstand (Windows)
- Imageoptim (Mac)
- Jpegmini (online, Mac & Windows)
- Kraken (online)
- Compressor.io (online)
Ich selbst verwende Jpegmini; Auch nach der Optimierung mit Photoshop kann ich noch weitere 5-10 % einsparen
Oder optimieren Sie während des Uploads
Ich glaube nicht, dass es eine Möglichkeit gibt, Bilder am besten zu optimieren. Wenn Sie nicht die Zeit damit verbringen möchten, Ihre Fotos vor dem Hochladen auf Ihrem Computer zu optimieren, können Sie die ganze Arbeit einem WordPress-Plugin überlassen für dich.
Es gibt viele WordPress-Plugins, die Sie verwenden können:
- WP Smush – Bildoptimierung
- ShortPixel-Bildoptimierer
- Kraken.io Bildoptimierer
- Optimus – WordPress-Bildoptimierer
- EWWW Image Optimizer Cloud
- Imagify Image Optimizer
Mit diesen Plugins können Sie Bilder beim Hochladen optimieren und auch die bereits hochgeladenen optimieren.
Ich habe sie nicht alle verwendet, nur WP Smush und ShortPixel, und ich fand ShortPixel ausgezeichnet. Selbst bei Bildern, die zuvor mit Photoshop und Jpegmini optimiert wurden, können einige KB eingespart werden.
Ein weiteres nützliches Plugin ist Imsanity .
Wenn Sie eine Website mit mehreren Autoren haben, müssen Sie steuern, welche Bilder die Leute hochladen. Legen Sie eine maximale Breite, Höhe und Qualität fest. Wenn ein Benutzer ein größeres Bild hochlädt, verkleinert das Plugin es automatisch auf die konfigurierte Größe.
WP Smush Pro macht das auch.
Bilder anzeigen
Nachdem Sie nun die Bilder optimiert haben, können Sie auch die Art und Weise verbessern, wie Sie diese Bilder auf Ihrer Website präsentieren.
Wenn Sie viele Fotos auf einer Seite haben, wie zum Beispiel auf einem Modeblog, können Sie Lazy Loading nutzen.
Das bedeutet, dass Ihre Bilder nur dann geladen werden, wenn sie sichtbar sind, wenn der Besucher nach unten scrollt.
Sie können dafür eines der folgenden WordPress-Plugins verwenden:
Ich kann Ihnen nicht sagen, welches Plugin besser ist. Sie müssen es testen, da es möglicherweise Inkompatibilitäten mit Ihrem Theme gibt. Beispielsweise funktioniert Lazy Loading für vorgestellte Bilder nicht, wenn Sie ein Genesis Framework-Theme haben.
Als ich Lazy Loading testete, sah es auf Mobilgeräten außerdem seltsam aus. An der Stelle, an der Fotos hätten sein sollen, gab es Leerstellen, da die Bilder nicht so schnell geladen wurden wie in der Desktop-Ansicht.
Eine weitere Möglichkeit, die Ladezeit zu verkürzen, besteht darin, Bilder von einer Subdomain wie images.domain.com bereitzustellen.
Sie müssen eine Subdomain von cPanel oder einem anderen Control Panel, das Ihr Hosting-Unternehmen anbietet, erstellen und dann WordPress so einrichten, dass es mithilfe des WP Original Media Path- Plugins Medien von dieser Subdomain lädt.
Ich kann einen ausführlichen Blog-Beitrag für Leute schreiben, die das tun möchten (falls jemand darum bittet), aber meine Empfehlung ist, stattdessen ein CDN zu verwenden. Es ist eine viel einfachere Lösung.
Verwenden Sie ein CDN
Cloudflare ist super einfach und kostenlos. Sie ändern einfach Ihre Domain-Nameserver in Cloudflare und aktivieren sie (überprüfen Sie die orangefarbene Cloud auf DNS-Einträge), und fertig. Ihre statischen Dateien (Bilder, CSS, JS) werden vom Cloudflare CDN geladen.
Es gibt weitere CDN-Unternehmen, die Sie nutzen können (siehe unten). Aber ich denke, Cloudflare ist am einfachsten zu implementieren:
Räumen Sie hinter sich auf
Jedes Mal, wenn Sie das Thema wechseln, hinterlassen Sie eine Spur ungenutzter Miniaturansichten und Datenbankeinträge zu diesen Bildern.
Wenn Sie das Thema wechseln, können Sie das AJAX Thumbnail Rebuild- Plugin verwenden, um Miniaturansichten neu zu erstellen, damit sie zu Ihrem neuen Thema passen.
Alte Miniaturansichten können mit einem der folgenden Plugins vom Server gelöscht werden:
Ich empfehle Thumbnail Cleaner, weil es schnell ist. Es werden jedoch alle Ihre Miniaturansichten entfernt, nicht nur die unbenutzten. Nach dem Löschen müssen Sie das AJAX-Thumbnail-Rebuild- Plugin verwenden, um die benötigten Miniaturansichten neu zu erstellen.
Die nicht verwendeten Miniaturansichten haben keinen Einfluss auf die Leistung Ihrer Website. Sie belegen lediglich Speicherplatz auf Ihrem Server. Es gibt jedoch Datenbankeinträge, die sich auf diese Miniaturansichten beziehen, und es empfiehlt sich, die Datenbank so sauber wie möglich zu halten.
Das machen wir im nächsten Schritt – die WordPress-Datenbank bereinigen.
Hinterlasse eine Antwort.