Der große Guide zur Bild-Optimierung für Internetseiten

Ich zei­ge Ihnen, wie Sie Ihre Website-Bilder opti­mie­ren kön­nen, damit sie gut aus­se­hen und vor allem schnell laden!

Das Wichtigste von allem ist, dass wir dies tun, um die Benutzererfahrung zu ver­bes­sern, nicht den Page Score (Pingdom, GTmetrix), ok??? Und wir wer­den alles optimieren.

• Bilder, Icons, Balken und far­bi­ge Dinge. (Jedes visu­el­le Element, wirklich.)
• Bildgröße (Dimension, Speicherplatz), Gerätegröße (Desktop, Tablet, Mobile, Retina), Brennpunktkontrolle.
• SEO und Zugänglichkeit – Tags, Beschriftungen, Kompatibilität mit sozia­len Medien.
• Formate und Qualität – jpeg, png, webp, svg.
• Browser-Caching und CDN.
• Bildanzeige – nor­ma­le Anzeige vs. Diashow, Thumbnail-Management, Animationen und Filter, Code-Effizienz.

Wie ich schon sag­te, alles! Also neh­men Sie sich etwas Zeit und legen Sie los! Nehmen Sie einen Entwickler zur Hand, wenn Sie nicht so ein Profi dar­in sind.

Ich wer­de Ihnen alle mei­ne Taktiken erklä­ren, vom Einfachsten zum Schwersten.

 

1. BASICS – (Formate, Abmessungen, Seitenverhältnisse)

Gängige Bildformate (für Websites):

• JPEG – am bes­ten für Fotos oder Bilder mit vie­len Farben. Gute Qualität, gro­ße Farbauswahl und gerin­ge Dateigröße.
• PNG (auch bekannt als "png‑8") – am bes­ten für Bilder mit wenig Farbe, schar­fen Linien und Kontrast und kann auch Transparenz. Liefert schar­fe Details ohne Kompressionsartefakte, auch klei­ne­re Größe.
• PNG 24 – höher­wer­ti­ge Version von PNG, die für Fotos geeig­net ist. Leider immer noch eine grö­ße­re Dateigröße als JPEG, daher wird es nicht emp­foh­len, es sei denn, Sie brau­chen Transparenz und/oder ver­su­chen, es an einen Ort hoch­zu­la­den, der Bilder oft neu kom­pri­miert (wie Facebook).
• WEBP – neu­es Bildformat von Google, das das Beste von JPEG und PNG kom­bi­niert und eine gute Qualität unab­hän­gig vom Bildtyp und auch Transparenz ermög­licht. Bessere Kompression als JPEG (was klei­ne­re Dateigrößen bedeu­tet). War ursprüng­lich nur mit dem Google Chrome-Browser kom­pa­ti­bel, aber ande­re Browser haben jetzt WebP-Kompatibilität hin­zu­ge­fügt. Dennoch: Warum Sie kein webp nut­zen sollten
• SVG – wird typi­scher­wei­se für Icons ver­wen­det, kann aber auch ein­fa­che Animationen aus­füh­ren (sel­te­ner Fall). Es kann auch per CSS anders gefärbt wer­den (nütz­lich, wenn Sie es an meh­re­ren Stellen auf Ihrer Website wiederverwenden).
• GIF – am häu­figs­ten in Meme-Animationen von gerin­ger Qualität ver­wen­det. Nützlich, wenn Sie ein Video tei­len möch­ten, aber kei­ne Schärfe oder Ton benö­ti­gen. GIF ist im Grunde ein Bild-Diashow-Format, das sich als Videoformat mit nied­ri­ger Qualität tarnt. Wird sel­ten in einer pro­fes­sio­nel­len Umgebung wie einer Website ver­wen­det, wo Sie nor­ma­ler­wei­se hoch­auf­lö­sen­de Bilder und Videos wünschen.

Übliche Gerätegrößen (Mal 2 für Retina):

• Die Desktop-Ansicht wird (meis­tens) 1200px breit sein.
• Die Tablet-Ansicht ist wahr­schein­lich um die 800px breit (meis­tens). Querformat wäre die Desktop-Ansicht.
• Mobile Ansicht ist etwa 400px breit. Querformat wahr­schein­lich 600px.

Wenn Sie die Größe des Mediengeräts im Hinterkopf haben, soll­ten Sie kein grö­ße­res Bild als nötig ver­wen­den. Zum Beispiel, wenn ein Bild nur die Hälfte eines Desktop-Bildschirms ein­neh­men soll, dann müss­te das Bild an die­ser Stelle nur 600px breit sein für einen nor­ma­len Desktop-Bildschirm und 1200px breit für einen Retina-Desktop-Bildschirm. Es wäre eine abso­lu­te Verschwendung, ein Bild mit 2000px Breite zu laden, wenn es nur 300px Platz einnimmt!

 

Gängige Bild-Ratios im Internet:

• Die meis­ten Geräte sind für Medien im Format 3:2 und 16:9 optimiert.
• Social-Media-Seiten bevor­zu­gen ein qua­dra­ti­sches Seitenverhältnis von 1:1.

 

2. SEO & Zugänglichkeit (Tags, Bildunterschriften, Social-Media-freundlich)

SEO-Tipps für Bilder:

• Title-Tags – sind inter­ne Titel Ihrer Bilder (z. B. "Roter Tisch #5"). Viele Leute sagen, dass es kei­nen SEO-Nutzen dafür gibt. Dieser Text wird auch ange­zeigt, wenn Sie mit dem Mauszeiger über das Bild fahren.
• Alt-Tags – sind für Screenreader und ande­re Geräte, um zu sehen, was Ihr Bild ist. Stellen Sie sich vor, wie eine blin­de Person das Bild beschrei­ben könn­te (z. B. "roter Tisch im Schlafzimmer").
• Bildunterschriften – sind Text, der nor­ma­ler­wei­se unter oder an der Seite eines Bildes steht. Das kann alles Mögliche sein, eine per­sön­li­che Beschreibung, oder Informationen über das Produkt/den Ort, oder über den Fotografen, alles Mögliche…
• Normalerweise mache ich mei­ne Titel-Tags genau­so wie mei­ne Alt-Tags. Ich ver­brin­ge nicht wirk­lich die extra Zeit damit, sie sorg­fäl­tig zu gestal­ten. Einige hilf­rei­che Titel, Beschreibungen oder Schlüsselwörter sind alles, was Sie brauchen.

Social-Media-freund­lich:

• Stellen Sie sicher, dass Ihre Website und all ihre Seiten für Facebook Opengraph bereit sind.
• Bereiten Sie qua­dra­ti­sche Bilder vor, wenn Sie wol­len, dass sie für sozia­le Medien gut aussehen.

 

3. Bildkompression (Qualität und Skalierung)

Manuelle Komprimierung:

• Verwenden Sie die Photoshop-Funktion "Exportieren" oder "Speichern im Web", um manu­ell die genaue Qualität und Größe zu bestimmen.
• Sie kön­nen auch Lightroom oder ande­re Fotobearbeitungsprogramme verwenden.
• JPEGs wer­den in der Regel nach Qualität ein­ge­stellt. PNGs wer­den in der Regel nach der Anzahl der Farben ange­passt und danach, ob sie trans­pa­rent sind oder nicht.
• Sie kön­nen auch ein kos­ten­lo­ses Online-Komprimierungstool ver­wen­den, wie z. B. auf der ShortPixel-Website oder ver­schie­de­nen ande­ren Websites.
• Ich emp­feh­le dies für Ihre wich­tigs­ten Bilder. Normalerweise sind das die größ­ten Bilder, die die bes­te Qualität erfordern.

Automatische Komprimierung:

• Installieren Sie ein Plugin mit Bildkomprimierungsfunktionen. ShortPixel, LiteSpeed Cache und WP Compress sind mei­ne Favoriten. Lassen Sie sie alle Ihre Bilder auto­ma­tisch komprimieren.
• Ich emp­feh­le die­se Methode für Ihre weni­ger wich­ti­gen Bilder. Diejenigen, die über­all auf Ihrer Website zu fin­den sind und haupt­säch­lich nur zur Dekoration Ihrer Website ver­wen­det wer­den und nicht wirk­lich so kri­tisch betrach­tet werden.

 

4. Verwaltung der Anzeigen

Adaptive Bilder

• Diese Fähigkeit sorgt dafür, dass Ihre Website klei­ne­re Versionen Ihrer Bilder anzeigt, wenn sie auf klei­ne­ren Geräten gela­den werden.
• Ihr Theme soll­te dies auto­ma­tisch hand­ha­ben. Wenn nicht, wür­de ich lie­ber ein neu­es Theme besor­gen (oder pro­gram­mie­ren), als zu ver­su­chen, dies mit einem Plugin zu hacken. Ich glau­be, WordPress soll­te dies jetzt sowie­so nativ tun.

Reguläre Bilder vs. Slideshow Bilder

• Reguläre Bilder soll­ten sau­ber und scharf sein.
• Diashow-Bilder kön­nen etwas unschär­fer oder von gerin­ge­rer Qualität sein (vor allem, wenn Sie Text dar­über haben), da sie viel­leicht nicht so genau betrach­tet werden.

Animationen und Filter Effekte

• Wenn Sie kön­nen: Die Anwendung von Bildeffekten mit CSS ist sau­be­rer als mit JS.
• Sie brau­chen wahr­schein­lich nicht vie­le Effekte! Die meis­ten Leute wol­len ein­fach nur Ihren Inhalt sofort sehen. Stellen Sie sich vor, wie Sie auf Ihrem Telefon schnell durch Dinge scrol­len. Das Letzte, was Sie wol­len, ist, dass Sie war­ten müs­sen, bis etwas gela­den ist. Niemand mag Ladeanimationen!

Thumbnail-Verwaltung

• BITTE! Lassen Sie einen Entwickler Ihre Theme-Einstellungen durch­ge­hen und unbe­nutz­te Thumbnail-Größen beseitigen.
• Viele Themes, beson­ders die­se auf­ge­bläh­ten All-in-One-Themes, erstel­len bis zu 20–30 Thumbnail-Größen, selbst wenn Sie nur 3 davon ver­wen­den. Das macht Ihre Medienbibliothek in kur­zer Zeit unnö­tig groß.
• Nachdem Sie die unnö­ti­gen Thumbnail-Größen besei­tigt haben, müs­sen Sie wahr­schein­lich ein Plugin ver­wen­den, um alle Ihre Bild-Thumbnails neu zu generieren.

Code-Effizienz
Ich bin immer ein Befürworter von sau­be­rem Code. Achten Sie beim Einsatz von aus­ge­fal­le­nen Bildeffekten oder bild­be­zo­ge­nen Plugins dar­auf, dass Sie Ihre Website nicht mit einer Menge Ballast ausbremsen.

Lazy loa­ding
Eine Taktik zur Verbesserung der Seitenladezeit, indem man das Laden von Bildern verzögert.
Ich bin kein gro­ßer Fan davon (ich has­se "Lazy Loading"). Ich habe nicht das Gefühl, dass es die Benutzererfahrung in irgend­ei­ner Weise verbessert.

 

5. Speicher, Caching & CDN

Speicherplatz für gro­ße Seiten
Speicherplatz ist nicht nur eine Frage der Kosten, son­dern auch der Leistung. Im Idealfall möch­ten Sie, dass alle Ihre Bilder auf dem­sel­ben Webserver lie­gen, damit es am schnells­ten aus­sieht. Aber was pas­siert, wenn Ihre Site gigan­tisch ist?

1. Vergrößern des Servers – die ein­fachs­te und bequems­te Option, aber sehr kost­spie­lig, da Sie meist für mehr CPU und RAM bezah­len, wenn Sie eigent­lich nur mehr Platz brauchen.
2. Block sto­rage – wenn Sie einen VPS haben, kön­nen Sie zusätz­li­chen Blockspeicher kau­fen, der schnell genug für das Hochladen von Bildern ist, aber immer noch lang­sa­mer als das Laden von Ihrem loka­len Laufwerk. Leider hät­te ich mir eine Möglichkeit gewünscht, den Blockspeicher für alle Bilder außer denen des letz­ten Jahres oder Monats zu moun­ten, aber WordPress erlaubt dies (nativ) nicht, so dass Sie kei­ne ande­re Wahl haben, als ihn kom­plett in das wp-uploads-Verzeichnis zu mounten.
3. Offload zu S3 – S3 ist die gän­gigs­te Option, da sie wirk­lich bil­lig und ein­fach genug ein­zu­rich­ten ist. Der Nachteil ist, dass es noch lang­sa­mer als Blockspeicher ist. Sicher, Sie kön­nen Ihre S3-Buckets mit Cloudfront syn­chro­ni­sie­ren und das wür­de es bei höhe­ren Kosten sicher etwas schnel­ler machen.

Option 1 ist bei Leuten üblich, die es nicht bes­ser wis­sen. Option 3 ist bei gro­ßen Sites am gebräuch­lichs­ten, da sie unbe­grenz­tes Wachstum ermög­licht. Option 2 wird sel­ten ver­wen­det, obwohl sie tech­nisch sehr ein­fach zu imple­men­tie­ren ist. Natürlich ist es bes­ser, wenn Sie Ihre Bilder von vorn­her­ein opti­mie­ren, damit Ihnen nicht der Speicherplatz aus­geht (aber das kann nicht jedem helfen).

Caching von Bildern
Die gän­gi­ge Taktik zum Zwischenspeichern von Bildern ist das "Browser-Caching". Dies wird typi­scher­wei­se durch das Setzen von län­ge­ren Verfallszeiten über htac­cess-Regeln erreicht. Damit wird dem Browser des Besuchers mit­ge­teilt, dass er das Bild (für eine bestimm­te Zeit) spei­chern soll, damit es nicht erneut her­un­ter­ge­la­den wer­den muss.

Eine übli­che Verfallszeit wäre, Bilder im Browser zwi­schen 1 Monat und sogar 1 Jahr zu spei­chern. Ich den­ke, das macht Sinn für älte­re Beiträge. Bei neue­ren Beiträgen soll­te es höchs­tens 1 Tag sein, und der ein­zi­ge Grund dafür ist, dass wir manch­mal unse­re Bilder direkt nach dem Posten aktua­li­sie­ren. Vielleicht wur­de es falsch beschnit­ten oder, Gott bewah­re, Sie haben das fal­sche Bild hochgeladen.

Ich den­ke, die bes­te Leistung und ver­nünf­ti­ge Nutzung des Gerätespeichers des Benutzers ist ein Browser-Cache irgend­wo zwi­schen 7–30 Tagen. Es könn­te auch klug sein, bestimm­te Bildtypen anders zu cachen. Ich fin­de, dass PNG, SVG und FAVICON typi­scher­wei­se mit dem Thema und dem Branding-Design zusam­men­hän­gen und fast nie geän­dert wer­den… also kön­nen die­se am längs­ten gecached wer­den (bis zu 1 Jahr).

CDN (Content Delivery Network)
Sie brau­chen ein CDN wirk­lich nur, wenn Sie vie­le Besucher aus der gan­zen Welt haben. Bitte lesen Sie mei­nen Leitfaden Was ist ein CDN? (Und brau­chen Sie es?)

Wenn Sie sich ent­schei­den, dass Sie unbe­dingt ein CDN wollen:

• Beginnen Sie mit Cloudflare. Nutzen Sie den kos­ten­lo­sen Service. Wenn er gut funk­tio­niert, gut! (Er funk­tio­niert in den meis­ten Regionen und in den meis­ten Fällen gut, ist aber nicht perfekt.)
• Wenn Cloudflare nicht schnell genug für Sie ist, ver­su­chen Sie BunnyCDN.
• Wenn Sie ton­nen­wei­se Optionen benö­ti­gen und/oder Bilder in S3 aus­ge­la­gert haben, dann wäre Amazon Cloudfront eine ein­fa­che­re Integration.

 

6. Icons

Die ein­fachs­te Website kann ohne jeg­li­che Icons erstellt wer­den. Sie könn­ten Ihre Pfeile, das Hamburger-Menü und das Suchsymbol mit CSS oder Inline-SVG zeich­nen. Aber was ist mit der durch­schnitt­li­chen 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) – wer­den oft wegen ihrer Bequemlichkeit und Flexibilität ver­wen­det. Leider ver­lang­samt es die Ladezeit Ihrer Website, weil es alle mög­li­chen Schrift-Icons lädt (etwa 3–5k Icons, obwohl Sie nur 20 ver­wen­den) und nicht nur das, son­dern es lädt sie auch extern (von exter­nen Servern statt von Ihren eige­nen). Der ande­re Nachteil ist, dass Sie kei­ne eige­nen Icons hin­zu­fü­gen können.
• Benutzerdefinierte Icon-Fonts (IcoMoon, Fontastic) – die­se erlau­ben es Ihnen, Ihre eige­nen Icons auszuwählen/zu erstel­len. Sie erfor­dern mehr Arbeit beim Einrichten (beson­ders für Nicht-Entwickler), bie­ten aber mehr Flexibilität.
• Selbstgemachte Icon-Fonts – machen Sie es selbst. Das ist es, was ich ger­ne mache. Winzig klei­ne Icon-Fonts, die nur 2kb oder so groß sind, aber alle Icons haben, die ich brau­che. Erfordert ein biss­chen mehr Arbeit, lädt aber am schnellsten.
• SVG – ver­wen­det eine win­zi­ge sepa­ra­te Datei für jedes Icon. Ich emp­feh­le das wirk­lich nicht, es sei denn, Sie haben so weni­ge Icons und/oder pla­nen, das Icon in grö­ße­ren Größen zu haben und brau­chen mehr Farboptionen. Sie kön­nen sich mei­nen Beitrag über Icon-Fonts vs. SVGs ansehen.

Die meis­ten der Optionen hier hän­gen von Ihren oder den Programmierkenntnissen Ihres Entwicklers ab. Und wenn Sie nicht pro­gram­mie­ren kön­nen, emp­feh­le ich drin­gend, jeman­den zu bezah­len, der manu­ell eine Icon-Schriftart für Sie erstellt. Sicher, es kos­tet Geld, aber ich den­ke, es ist es wert. Viel bes­ser als eine auf­ge­bläh­te Font-Awesome-Bibliothek die bei jedem laden der Seite gela­den wird.

 

7. CSS-Optimierung

Ich gehe auf eini­ge Taktiken zur Verwendung oder Optimierung von CSS ein, um Ihre Bilder oder gra­fi­schen Elemente bes­ser dar­zu­stel­len oder um Platz zu spa­ren und die Ladezeiten zu verbessern.

• Farben – älte­re Themes ver­wen­de­ten klei­ne PNG-Bilder für jedes Farbelement im gesam­ten Theme. Neuere Themes ver­wen­den nun CSS, um Farbelemente zu zeich­nen. Neuere CSS kön­nen auch Schatten und Farbverläufe, Farbfilter (schwarz-weiß, sepia, etc.) und sogar Animationen dar­stel­len. Sie müs­sen also nicht mehr so vie­le zusätz­li­che Bilder für jeden klei­nen Unterschied verwenden.
• Sprites – eine Taktik, vie­le Bilder in einer Datei zu kom­bi­nie­ren und sie per CSS auf­zu­ru­fen. Es ist immer noch eine groß­ar­ti­ge Taktik zur Verbesserung der Seitenladezeit für super­schlan­ke Seiten. Aber wahr­schein­lich lohnt sich der zusätz­li­che Aufwand für die meis­ten Leute nicht. Und es ist im Grunde auch kei­ne gro­ße Verbesserung, da HTTP/2 meh­re­re par­al­le­le Verbindungen gleich­zei­tig erlaubt.
• Transparenz – in man­chen Fällen ist es cle­ve­rer (und sogar von bes­se­rer Bildqualität), ein Bild mit trans­pa­ren­tem Hintergrund zu ver­wen­den (indem man die Hintergrundfarbe mit CSS zeich­net), als ein Bild mit einem voll­far­bi­gen Hintergrund zu exportieren.