Ich zeige Ihnen, wie Sie Ihre Website-Bilder optimieren können, damit sie gut aussehen und vor allem schnell laden!
Das Wichtigste von allem ist, dass wir dies tun, um die Benutzererfahrung zu verbessern, nicht den Page Score (Pingdom, GTmetrix), ok??? Und wir werden alles optimieren.
- Bilder, Icons, Balken und farbige Dinge. (Jedes visuelle Element, wirklich.)
- Bildgröße (Dimension, Speicherplatz), Gerätegröße (Desktop, Tablet, Mobile, Retina), Brennpunktkontrolle.
- SEO und Zugänglichkeit – Tags, Beschriftungen, Kompatibilität mit sozialen Medien.
- Formate und Qualität – jpeg, png, webp, svg.
- Browser-Caching und CDN.
- Bildanzeige – normale Anzeige vs. Diashow, Thumbnail-Management, Animationen und Filter, Code-Effizienz.
Wie ich schon sagte, alles! Also nehmen Sie sich etwas Zeit und legen Sie los! Nehmen Sie einen Entwickler zur Hand, wenn Sie nicht so ein Profi darin sind.
Ich werde Ihnen alle meine Taktiken erklären, vom Einfachsten zum Schwersten.
1. BASICS – (Formate, Abmessungen, Seitenverhältnisse)
Gängige Bildformate (für Websites):
- JPEG – am besten für Fotos oder Bilder mit vielen Farben. Gute Qualität, große Farbauswahl und geringe Dateigröße.
- PNG (auch bekannt als "png‑8") – am besten für Bilder mit wenig Farbe, scharfen Linien und Kontrast und kann auch Transparenz. Liefert scharfe Details ohne Kompressionsartefakte, auch kleinere Größe.
- PNG 24 – höherwertige Version von PNG, die für Fotos geeignet ist. Leider immer noch eine größere Dateigröße als JPEG, daher wird es nicht empfohlen, es sei denn, Sie brauchen Transparenz und/oder versuchen, es an einen Ort hochzuladen, der Bilder oft neu komprimiert (wie Facebook).
- WEBP – neues Bildformat von Google, das das Beste von JPEG und PNG kombiniert und eine gute Qualität unabhängig vom Bildtyp und auch Transparenz ermöglicht. Bessere Kompression als JPEG (was kleinere Dateigrößen bedeutet). War ursprünglich nur mit dem Google Chrome-Browser kompatibel, aber andere Browser haben jetzt WebP-Kompatibilität hinzugefügt. Dennoch: Warum Sie kein webp nutzen sollten
- SVG – wird typischerweise für Icons verwendet, kann aber auch einfache Animationen ausführen (seltener Fall). Es kann auch per CSS anders gefärbt werden (nützlich, wenn Sie es an mehreren Stellen auf Ihrer Website wiederverwenden).
- GIF – am häufigsten in Meme-Animationen von geringer Qualität verwendet. Nützlich, wenn Sie ein Video teilen möchten, aber keine Schärfe oder Ton benötigen. GIF ist im Grunde ein Bild-Diashow-Format, das sich als Videoformat mit niedriger Qualität tarnt. Wird selten in einer professionellen Umgebung wie einer Website verwendet, wo Sie normalerweise hochauflösende Bilder und Videos wünschen.
Übliche Gerätegrößen (Mal 2 für Retina):
- Die Desktop-Ansicht wird (meistens) 1200px breit sein.
- Die Tablet-Ansicht ist wahrscheinlich um die 800px breit (meistens). Querformat wäre die Desktop-Ansicht.
- Mobile Ansicht ist etwa 400px breit. Querformat wahrscheinlich 600px.
Wenn Sie die Größe des Mediengeräts im Hinterkopf haben, sollten Sie kein größeres Bild als nötig verwenden. Zum Beispiel, wenn ein Bild nur die Hälfte eines Desktop-Bildschirms einnehmen soll, dann müsste das Bild an dieser Stelle nur 600px breit sein für einen normalen Desktop-Bildschirm und 1200px breit für einen Retina-Desktop-Bildschirm. Es wäre eine absolute Verschwendung, ein Bild mit 2000px Breite zu laden, wenn es nur 300px Platz einnimmt!
Gängige Bild-Ratios im Internet:
- Die meisten Geräte sind für Medien im Format 3:2 und 16:9 optimiert.
- Social-Media-Seiten bevorzugen ein quadratisches Seitenverhältnis von 1:1.
2. SEO & Zugänglichkeit (Tags, Bildunterschriften, Social-Media-freundlich)
SEO-Tipps für Bilder:
- Title-Tags – sind interne Titel Ihrer Bilder (z. B. "Roter Tisch #5"). Viele Leute sagen, dass es keinen SEO-Nutzen dafür gibt. Dieser Text wird auch angezeigt, wenn Sie mit dem Mauszeiger über das Bild fahren.
- Alt-Tags – sind für Screenreader und andere Geräte, um zu sehen, was Ihr Bild ist. Stellen Sie sich vor, wie eine blinde Person das Bild beschreiben könnte (z. B. "roter Tisch im Schlafzimmer").
- Bildunterschriften – sind Text, der normalerweise unter oder an der Seite eines Bildes steht. Das kann alles Mögliche sein, eine persönliche Beschreibung, oder Informationen über das Produkt/den Ort, oder über den Fotografen, alles Mögliche…
- Normalerweise mache ich meine Titel-Tags genauso wie meine Alt-Tags. Ich verbringe nicht wirklich die extra Zeit damit, sie sorgfältig zu gestalten. Einige hilfreiche Titel, Beschreibungen oder Schlüsselwörter sind alles, was Sie brauchen.
Social-Media-freundlich:
- Stellen Sie sicher, dass Ihre Website und all ihre Seiten für Facebook Opengraph bereit sind.
- Bereiten Sie quadratische Bilder vor, wenn Sie wollen, dass sie für soziale Medien gut aussehen.
3. Bildkompression (Qualität und Skalierung)
Manuelle Komprimierung:
- Verwenden Sie die Photoshop-Funktion "Exportieren" oder "Speichern im Web", um manuell die genaue Qualität und Größe zu bestimmen.
- Sie können auch Lightroom oder andere Fotobearbeitungsprogramme verwenden.
- JPEGs werden in der Regel nach Qualität eingestellt. PNGs werden in der Regel nach der Anzahl der Farben angepasst und danach, ob sie transparent sind oder nicht.
- Sie können auch ein kostenloses Online-Komprimierungstool verwenden, wie z. B. auf der ShortPixel-Website oder verschiedenen anderen Websites.
- Ich empfehle dies für Ihre wichtigsten Bilder. Normalerweise sind das die größten Bilder, die die beste Qualität erfordern.
Automatische Komprimierung:
- Installieren Sie ein Plugin mit Bildkomprimierungsfunktionen. ShortPixel, LiteSpeed Cache und WP Compress sind meine Favoriten. Lassen Sie sie alle Ihre Bilder automatisch komprimieren.
- Ich empfehle diese Methode für Ihre weniger wichtigen Bilder. Diejenigen, die überall auf Ihrer Website zu finden sind und hauptsächlich nur zur Dekoration Ihrer Website verwendet werden und nicht wirklich so kritisch betrachtet werden.
4. Verwaltung der Anzeigen
Adaptive Bilder
- Diese Fähigkeit sorgt dafür, dass Ihre Website kleinere Versionen Ihrer Bilder anzeigt, wenn sie auf kleineren Geräten geladen werden.
- Ihr Theme sollte dies automatisch handhaben. Wenn nicht, würde ich lieber ein neues Theme besorgen (oder programmieren), als zu versuchen, dies mit einem Plugin zu hacken. Ich glaube, WordPress sollte dies jetzt sowieso nativ tun.
Reguläre Bilder vs. Slideshow Bilder
- Reguläre Bilder sollten sauber und scharf sein.
- Diashow-Bilder können etwas unschärfer oder von geringerer Qualität sein (vor allem, wenn Sie Text darüber haben), da sie vielleicht nicht so genau betrachtet werden.
Animationen und Filter Effekte
- Wenn Sie können: Die Anwendung von Bildeffekten mit CSS ist sauberer als mit JS.
- Sie brauchen wahrscheinlich nicht viele Effekte! Die meisten Leute wollen einfach nur Ihren Inhalt sofort sehen. Stellen Sie sich vor, wie Sie auf Ihrem Telefon schnell durch Dinge scrollen. Das Letzte, was Sie wollen, ist, dass Sie warten müssen, bis etwas geladen ist. Niemand mag Ladeanimationen!
Thumbnail-Verwaltung
- BITTE! Lassen Sie einen Entwickler Ihre Theme-Einstellungen durchgehen und unbenutzte Thumbnail-Größen beseitigen.
- Viele Themes, besonders diese aufgeblähten All-in-One-Themes, erstellen bis zu 20–30 Thumbnail-Größen, selbst wenn Sie nur 3 davon verwenden. Das macht Ihre Medienbibliothek in kurzer Zeit unnötig groß.
- Nachdem Sie die unnötigen Thumbnail-Größen beseitigt haben, müssen Sie wahrscheinlich ein Plugin verwenden, um alle Ihre Bild-Thumbnails neu zu generieren.
Code-Effizienz
Ich bin immer ein Befürworter von sauberem Code. Achten Sie beim Einsatz von ausgefallenen Bildeffekten oder bildbezogenen Plugins darauf, dass Sie Ihre Website nicht mit einer Menge Ballast ausbremsen.
Lazy loading
Eine Taktik zur Verbesserung der Seitenladezeit, indem man das Laden von Bildern verzögert.
Ich bin kein großer Fan davon (ich hasse "Lazy Loading"). Ich habe nicht das Gefühl, dass es die Benutzererfahrung in irgendeiner Weise verbessert.
5. Speicher, Caching & CDN
Speicherplatz für große Seiten
Speicherplatz ist nicht nur eine Frage der Kosten, sondern auch der Leistung. Im Idealfall möchten Sie, dass alle Ihre Bilder auf demselben Webserver liegen, damit es am schnellsten aussieht. Aber was passiert, wenn Ihre Site gigantisch ist?
- Vergrößern des Servers – die einfachste und bequemste Option, aber sehr kostspielig, da Sie meist für mehr CPU und RAM bezahlen, wenn Sie eigentlich nur mehr Platz brauchen.
- Block storage – wenn Sie einen VPS haben, können Sie zusätzlichen Blockspeicher kaufen, der schnell genug für das Hochladen von Bildern ist, aber immer noch langsamer als das Laden von Ihrem lokalen Laufwerk. Leider hätte ich mir eine Möglichkeit gewünscht, den Blockspeicher für alle Bilder außer denen des letzten Jahres oder Monats zu mounten, aber WordPress erlaubt dies (nativ) nicht, so dass Sie keine andere Wahl haben, als ihn komplett in das wp-uploads-Verzeichnis zu mounten.
- Offload zu S3 – S3 ist die gängigste Option, da sie wirklich billig und einfach genug einzurichten ist. Der Nachteil ist, dass es noch langsamer als Blockspeicher ist. Sicher, Sie können Ihre S3-Buckets mit Cloudfront synchronisieren und das würde es bei höheren Kosten sicher etwas schneller machen.
Option 1 ist bei Leuten üblich, die es nicht besser wissen. Option 3 ist bei großen Sites am gebräuchlichsten, da sie unbegrenztes Wachstum ermöglicht. Option 2 wird selten verwendet, obwohl sie technisch sehr einfach zu implementieren ist. Natürlich ist es besser, wenn Sie Ihre Bilder von vornherein optimieren, damit Ihnen nicht der Speicherplatz ausgeht (aber das kann nicht jedem helfen).
Caching von Bildern
Die gängige Taktik zum Zwischenspeichern von Bildern ist das "Browser-Caching". Dies wird typischerweise durch das Setzen von längeren Verfallszeiten über htaccess-Regeln erreicht. Damit wird dem Browser des Besuchers mitgeteilt, dass er das Bild (für eine bestimmte Zeit) speichern soll, damit es nicht erneut heruntergeladen werden muss.
Eine übliche Verfallszeit wäre, Bilder im Browser zwischen 1 Monat und sogar 1 Jahr zu speichern. Ich denke, das macht Sinn für ältere Beiträge. Bei neueren Beiträgen sollte es höchstens 1 Tag sein, und der einzige Grund dafür ist, dass wir manchmal unsere Bilder direkt nach dem Posten aktualisieren. Vielleicht wurde es falsch beschnitten oder, Gott bewahre, Sie haben das falsche Bild hochgeladen.
Ich denke, die beste Leistung und vernünftige Nutzung des Gerätespeichers des Benutzers ist ein Browser-Cache irgendwo zwischen 7–30 Tagen. Es könnte auch klug sein, bestimmte Bildtypen anders zu cachen. Ich finde, dass PNG, SVG und FAVICON typischerweise mit dem Thema und dem Branding-Design zusammenhängen und fast nie geändert werden… also können diese am längsten gecached werden (bis zu 1 Jahr).
CDN (Content Delivery Network)
Sie brauchen ein CDN wirklich nur, wenn Sie viele Besucher aus der ganzen Welt haben. Bitte lesen Sie meinen Leitfaden Was ist ein CDN? (Und brauchen Sie es?)
Wenn Sie sich entscheiden, dass Sie unbedingt ein CDN wollen:
- Beginnen Sie mit Cloudflare. Nutzen Sie den kostenlosen Service. Wenn er gut funktioniert, gut! (Er funktioniert in den meisten Regionen und in den meisten Fällen gut, ist aber nicht perfekt.)
- Wenn Cloudflare nicht schnell genug für Sie ist, versuchen Sie BunnyCDN.
- Wenn Sie tonnenweise Optionen benötigen und/oder Bilder in S3 ausgelagert haben, dann wäre Amazon Cloudfront eine einfachere Integration.
6. Icons
Die einfachste Website kann ohne jegliche Icons erstellt werden. Sie könnten Ihre Pfeile, das Hamburger-Menü und das Suchsymbol mit CSS oder Inline-SVG zeichnen. Aber was ist mit der durchschnittlichen Website, die Social-Media-Icons (Facebook, Twitter, etc.) oder E‑Commerce-Icons (Warenkorb, Einkaufswagen, Tasche, etc.) benötigt. Es gibt ein paar Taktiken.
- Icon-Bibliotheken (Font Awesome) – werden oft wegen ihrer Bequemlichkeit und Flexibilität verwendet. Leider verlangsamt es die Ladezeit Ihrer Website, weil es alle möglichen Schrift-Icons lädt (etwa 3–5k Icons, obwohl Sie nur 20 verwenden) und nicht nur das, sondern es lädt sie auch extern (von externen Servern statt von Ihren eigenen). Der andere Nachteil ist, dass Sie keine eigenen Icons hinzufügen können.
- Benutzerdefinierte Icon-Fonts (IcoMoon, Fontastic) – diese erlauben es Ihnen, Ihre eigenen Icons auszuwählen/zu erstellen. Sie erfordern mehr Arbeit beim Einrichten (besonders für Nicht-Entwickler), bieten aber mehr Flexibilität.
- Selbstgemachte Icon-Fonts – machen Sie es selbst. Das ist es, was ich gerne mache. Winzig kleine Icon-Fonts, die nur 2kb oder so groß sind, aber alle Icons haben, die ich brauche. Erfordert ein bisschen mehr Arbeit, lädt aber am schnellsten.
- SVG – verwendet eine winzige separate Datei für jedes Icon. Ich empfehle das wirklich nicht, es sei denn, Sie haben so wenige Icons und/oder planen, das Icon in größeren Größen zu haben und brauchen mehr Farboptionen. Sie können sich meinen Beitrag über Icon-Fonts vs. SVGs ansehen.
Die meisten der Optionen hier hängen von Ihren oder den Programmierkenntnissen Ihres Entwicklers ab. Und wenn Sie nicht programmieren können, empfehle ich dringend, jemanden zu bezahlen, der manuell eine Icon-Schriftart für Sie erstellt. Sicher, es kostet Geld, aber ich denke, es ist es wert. Viel besser als eine aufgeblähte Font-Awesome-Bibliothek die bei jedem laden der Seite geladen wird.
7. CSS-Optimierung
Ich gehe auf einige Taktiken zur Verwendung oder Optimierung von CSS ein, um Ihre Bilder oder grafischen Elemente besser darzustellen oder um Platz zu sparen und die Ladezeiten zu verbessern.
- Farben – ältere Themes verwendeten kleine PNG-Bilder für jedes Farbelement im gesamten Theme. Neuere Themes verwenden nun CSS, um Farbelemente zu zeichnen. Neuere CSS können auch Schatten und Farbverläufe, Farbfilter (schwarz-weiß, sepia, etc.) und sogar Animationen darstellen. Sie müssen also nicht mehr so viele zusätzliche Bilder für jeden kleinen Unterschied verwenden.
- Sprites – eine Taktik, viele Bilder in einer Datei zu kombinieren und sie per CSS aufzurufen. Es ist immer noch eine großartige Taktik zur Verbesserung der Seitenladezeit für superschlanke Seiten. Aber wahrscheinlich lohnt sich der zusätzliche Aufwand für die meisten Leute nicht. Und es ist im Grunde auch keine große Verbesserung, da HTTP/2 mehrere parallele Verbindungen gleichzeitig erlaubt.
- Transparenz – in manchen Fällen ist es cleverer (und sogar von besserer Bildqualität), ein Bild mit transparentem Hintergrund zu verwenden (indem man die Hintergrundfarbe mit CSS zeichnet), als ein Bild mit einem vollfarbigen Hintergrund zu exportieren.