Stelle dir vor, einige Besucher deiner Website haben gerade deine neue Werbeaktion gesehen. Sie sind so begeistert, dass sie den vor dir beworbenen Artikel tatsächlich direkt ausprobieren möchten. Leider wird die Seite mit dem Warenkorb nicht geladen, wodurch sie ihren Kauf nicht abschließen können. Was ist passiert?
Es gibt viele Gründe, die zu Problemen beim Laden von Seiten führen können. Zum Beispiel kann es sein, dass du nicht genügend Online-Speicherplatz für deine Seite hast. Möglicherweise ist auch der Cache-Speicher nicht groß genug.
Aber von allen Fehlern, die du bei der Erstellung einer Website machen kannst, ist die mangelnde Optimierung von Bildern für Webseiten einer der problematischsten. Wenn du deine Bilder nicht richtig für das Web optimierst, kann das deine Website verlangsamen, was wiederum zu weniger Besuchern und verpassten Umsatzchancen führt. Im Folgenden erklären wir dir, wie du Bilder für das Internet optimierst, damit du eine Website erstellen kannst, die Resultate erzielt.
Was ist Bildoptimierung?
Etwa 70 % der Menschen geben an, dass die Ladegeschwindigkeit einer Webseite ihre Bereitschaft zum Online-Kauf beeinflusst. Außerdem kaufen 45 % dieser Menschen nicht auf Websites, wenn deren Seiten langsamer laden als erwartet.
Diese Statistiken unterstreichen, wie wichtig die Optimierung von Bildern im Internet ist. Wenn du nicht dafür gesorgt hast, dass deine Seiten schnell genug laden, kannst du von Glück reden, dass deine Kunden es überhaupt bis zur Checkout-Seite deines Warenkorbs geschafft haben. Dieses Problem beginnt oft schon, wenn sie auf der Startseite deiner Website landen. Mit der Optimierung von Websitebildern kannst du dem entgegenwirken.
Ein Grund für das langsame Laden einer Website sind Bilder, die nicht richtig optimiert sind. Das bedeutet, dass die Dateien so groß sind, dass sie den Rest deiner Website belasten und zu viel Speicherplatz auf deiner Website beanspruchen.
Bei der Bildoptimierung hingegen wird die Auflösung deiner Bilder auf der Seite angepasst. Außerdem wird dadurch die Dateigröße der Bilder verringert, sodass mehr Platz auf dem Server deiner Website zur Verfügung steht. Indem du mehr Speicherplatz auf deinem Server freigibst, kannst du die Ladezeiten deiner Website verkürzen und so die Navigation einfacher und angenehmer gestalten.
Warum ist es wichtig, Bilder für das Web zu optimieren?
Die Optimierung von Bildern für Webseiten sorgt für Zufriedenheit bei deinen Nutzern. Außerdem wird dadurch sichergestellt, dass deine Domain-Server ordnungsgemäß funktionieren.
Denke daran, dass etwa die Hälfte deiner Besucher Mobiltelefone für die Suche nach Informationen im Internet und den Besuch von Websites nutzt. Daher kann die Optimierung von Bildern einen großen Beitrag zur Verbesserung der Seitengeschwindigkeit für mobile Geräte und der mobilen SEO leisten. Die Bildoptimierung für das Web kann dazu beitragen, dass die Besucher deine Inhalte auch bei einer langsamen WLAN-Verbindung sehen.
Letztendlich kann die Optimierung von Bildern für das Web deiner Website in vielerlei Hinsicht helfen. Im Folgenden haben wir einige weitere Möglichkeiten zusammengestellt, wie die Bildoptimierung für das Web deine Website verbessern kann.
Seiten schneller laden lassen
Einer der Hauptgründe für die Optimierung von Bildern ist, dass sie schneller geladen werden. Bilder, die nicht optimiert sind, können deine Website so stark verlangsamen, dass sie schwer zu navigieren ist und für Frustration bei der Nutzung sorgt.
Tipp: Bei der Optimierung von Bildern geht es darum, ihre Auflösung zu verringern, damit sie nicht zu viel von deinem Online-Speicherplatz beanspruchen. Du kannst Bilder auch komprimieren, aber die Bildqualität des Originals beibehalten oder Bilder und Grafiken nur im Bedarfsfall verwenden.
Benutzererfahrung optimieren
Wenn du Bilder für das Internet optimierst, optimierst du auch das Nutzererlebnis. Mit anderen Worten: Du reduzierst die Frustration deiner Kunden. Wenn du verhindern möchtest, dass deine Besucher sich fragen, wann auf der leeren, weißen Fläche endlich Text und Grafiken erscheinen, solltest du die Auflösung der einzelnen Bilder anpassen.
Website-Besucher werden den verbesserten Komfort und das verbesserte Erscheinungsbild zu schätzen wissen, das mit einer schnelleren Ladezeit der Seite einhergeht. Statt einer Fehlermeldung an der Stelle, an der alle Bilder sein sollten, sehen sie die Symbole und Bilder, die tatsächlich angezeigt werden sollten.
SEO verbessern
Durch die Optimierung von Bildern kannst du die Suchmaschinenoptimierung (SEO) für deine Website verbessern. Mit Alt-Tags kannst du Bilder kennzeichnen, um die Zugänglichkeit zu verbessern und die SEO zu verbessern. Wenn du einen Website-Builder verwendest, lässt sich dies ganz einfach bewerkstelligen, wenn du Bilder in eine Medienbibliothek hochlädst.
Mediatheken, wie die von WordPress oder Mailchimp, bieten Textfelder, in die du Alt-Tags und Stichwörter eingeben kannst. Diese werden an das Bild angehängt und tauchen in Suchmaschinen auf, solange du zugelassen hast, dass deine Website im Internet gefunden wird.
Den Speicherplatz auf deinem Server reduzieren
Nicht optimierte Bilder können die Server einer Website verlangsamen. Wenn die auf deiner Website angezeigten Medien die empfohlenen Größenbeschränkungen überschreiten, kann es sein, dass die Seite zu lange zum Laden braucht oder gar nicht geladen wird.
Wenn du weniger Bilddateien auf deinem Server speicherst, läuft deine Website mit der Geschwindigkeit, die deine Besucher erwarten. Sobald du weißt, wie man Bilder für das Web optimiert, kannst du auch schnelle Ladezeiten erzielen.
Abonniere für weitere Marketingtipps, die direkt in deine Inbox gesendet werden.
So optimierst du Bilder für das Web
Es ist nicht viel nötig, um zu lernen, wie man Bilder für das Internet optimiert. Im Folgenden erklären wir, wie du Bilder für deine Website komprimieren kannst, und gehen auf die grundlegenden Schritte bei der Optimierung von Bildern für das Web ein.
Ein Dateiformat wählen
Du wirst feststellen, dass es Hunderte von verschiedenen Dateitypen gibt. Zu den gängigsten gehören JPEG (oder .jpg), PNG oder GIF. Bevor du dich mit der Optimierung von Bildern für das Internet beschäftigst, solltest du den Zweck der einzelnen Dateiformate verstehen.
- JPEG – Dies ist einer der am häufigsten verwendeten Bilddateitypen im Web. Das liegt daran, dass es eine gute Qualität bietet, die weniger Speicherplatz benötigt als ein PNG. Einige Grafiken verlieren jedoch möglicherweise ihren „Glanz“, wenn du die Dateigröße der JPEG-Bilder reduzierst.
- PNG – Dieses Format eignet sich oft besser, um die Dateigröße von Bildern zu verringern und die Qualität zu erhalten. Es ermöglicht dir auch, Bilder mit transparentem Hintergrund zu verwenden und zu komprimieren.
- GIF – Das Dateiformat „GIF“ wird für Bilder im Internet nicht besonders bevorzugt. Es eignet sich eher für die Erstellung von animierten Bildern und Grafikvideos. Am besten eignet sich dieser Dateityp für Demonstrationsanleitungen. Heutzutage mag das GIF veraltet erscheinen, weil du komprimierte MP4-, MOV- oder WMV-Dateien hosten kannst, die eine bessere Qualität der Animationen liefern als ein GIF. Andererseits beansprucht das GIF weniger Platz und Ressourcen auf dem Webserver und verursacht keine langsamen Seitenladezeiten.
- SVG – Dieses Format hat an Beliebtheit gewonnen, nachdem es notwendig wurde, Grafiken an eine Vielzahl von Bildschirmgrößen anzupassen. Eine SVG-Datei lässt sich auf allen Geräten, einschließlich Computern, Handys und Tablets, vergrößern und verkleinern, ohne dass die Qualität darunter leidet. SVGs werden jedoch nicht in jedem Browser korrekt angezeigt.
Was den Dateityp angeht, so werden alle Dateien unterschiedlich komprimiert. JPEG-Dateien zum Beispiel werden verlustbehaftet komprimiert. Du brauchst ein nahezu perfektes Bild, um die gleiche Qualität zu erreichen.
Bei der verlustfreien Komprimierung hingegen wird die Dateiqualität bei der Reduzierung der Größe nicht beeinträchtigt. Das ist oft der Fall, wenn PNG-Bilder komprimiert werden. „Verlustbehaftet“ und „verlustfrei“ sind einige Arten der Komprimierung, die du bei der Verwendung von Plugins für die automatische Größenanpassung berücksichtigen musst. Neben dem Dateityp kann auch das Design des Plugins das Ergebnis der Komprimierung beeinflussen.
Alt-Text hinzufügen (auf einfache Weise)
Das Hinzufügen von „alt“-Text dient nicht nur der SEO-Optimierung eines Bildes durch die Verwendung von Keywords. Es macht eine Webseite auch zugänglicher, indem es eine Beschreibung der angezeigten Grafik hinzufügt.
Mithilfe des Alt-Textes können sehbehinderte Menschen die angezeigten Fotos und Grafiken interpretieren. Er ist auch nützlich, wenn Bilder in einer Anleitung nicht richtig angezeigt werden, da so die Anweisungen trotzdem verstanden werden können.
Am einfachsten fügst du einen Alt-Text hinzu, indem du ihn in das dafür vorgesehene Feld einträgst, wenn du ein Bild in eine Bildbibliothek hochlädst. Auf den meisten Hosting-Plattformen, die Blogs bereitstellen, kannst du in der Regel auch Bilder für entsprechende Beiträge hochladen. Wenn du deinen Blogbeitrag erstellst, wirst du wahrscheinlich ein Feld sehen, in das du beim Einfügen von Bildern den dazu passenden Alt-Text eingeben kannst.
Alt-Text hinzufügen (auf die schwierigere Weise)
Wenn dein Blog- oder Website-Builder nicht die Möglichkeit bietet, schnell einen Alt-Text und eine Bildbeschreibung einzugeben, musst du HTML verwenden. Das kannst du entweder in einem Textfeld für einen Blogbeitrag oder eine Seite machen oder mithilfe einer Textdatei, die du auf deinen Server hochlädst.
Die Verwendung von HTML ist ein wenig fortgeschrittener als die Verwendung eines visuellen Blog- oder Website-Editors. Dazu musst du den Code zum Kopieren und Einfügen (oder zum Schreiben von Grund auf) im „Text“- und nicht im „Visual-“ oder „Quell“-Modus haben. Wenn du nicht weißt, was das bedeutet, siehst du hier ein Beispiel dafür, wie HTML-Code aussieht, wenn du einem Bild einen Alt-Text hinzufügst.
Wenn du gerade erst mit deiner Website anfängst, solltest du dir keine Sorgen machen. Du kannst den Alt-Text auch ohne HTML-Kenntnisse erstellen, wenn du die oben beschriebene einfachere Methode verwendest. Ansonsten kannst du zumindest den erforderlichen HTML-Code lernen, um das Bild nach dem Einfügen in einen Blogbeitrag zu formatieren.
Den HTML-Code für Alt-Tags in der schwierigeren Variante zu lernen, betrifft vor allem diejenigen, die lernen möchten, wie man eine Website von Grund auf erstellt. In diesem Fall würden sie lernen, wie sie den Code in eine Notepad-Datei einfügen und mit einem FTP-Client oder einem Code-Editor auf ihre Website hochladen.
Wenn du gerade erst mit dem Aufbau deiner Website beginnst, wirst du das wahrscheinlich nicht brauchen. Aber zumindest weißt du jetzt, dass dies eine Option ist, um Bilder für das Web zu optimieren.
Die Dateidimensionen optimieren
Die Optimierung der Dateigröße ist einfacher, wenn du die Bilder noch nicht ins Internet hochgeladen hast. In diesem Fall kannst du sie in deinem bevorzugten Bildbearbeitungsprogramm in der benötigten Größe speichern. Das sind etwa 1024 Pixel Breite x 786 Pixel Höhe für den Header.
Deine Hintergrundbilder sollten etwa 1920 x 1080 Pixel groß sein. Logobilder sind zwischen 100 und 400 Pixel breit und normalerweise 50 bis 100 Pixel hoch. Gerade bei Hintergrundbildern hängt die Größe, die du verwenden kannst, von der Größe der Bilddatei ab.
Deine Bilder komprimieren
Die Bilder auf deiner Website, die sich am meisten auf die Ladezeiten auswirken, sind die Header- und Hintergrundbilder.
Für den Header und den Seitenhintergrund solltest du in der Regel eine GIF- oder JPEG-Komprimierung verwenden. Sie sollten so klein wie möglich sein, um deiner Website das nötige professionelle Aussehen zu verleihen.
Tools und Plugins zur Bildoptimierung verwenden
Eine Möglichkeit, um zu vermeiden, dass du unzählige Stunden mit der manuellen Optimierung von Bildern für das Web verbringst, ist die Verwendung von Bildoptimierungstools. Diese Plugins sind in der Regel im Lieferumfang der meisten großen Blog-Plattformen enthalten und passen die Größe deiner Bilder automatisch an.
Plugins und Tools zur Bildoptimierung bieten auch eine schnelle Möglichkeit für das Hinzufügen der Alt-Tags. In der Regel kannst du einfach Bilder aus der Mediathek auswählen, die du komprimieren möchtest. Das geht mit ein paar Klicks und reduziert ihre Größe, während die Qualität erhalten bleibt.
Tools zur Bildoptimierung
Wenn du die Bildoptimierung für einzelne Webseiten versuchen würdest, müsstest du dich mit fortgeschrittenem Code auskennen. Tools für die Bildoptimierung automatisieren diesen Prozess. Außerdem musst du nicht Dutzende oder sogar Hunderte von Bildern oder Grafikdateien löschen und neu hochladen.
Anstatt sich die Mühe zu machen, die Bilddateitypen und -größen zu ändern, übernehmen die Plugins diese Aufgabe für dich. Einige Beispiele sind LazyLoad, TinyPNG oder Shortpixel. Das hängt allerdings von der von dir verwendeten Blog-Plattform ab.
Der vierte Schritt, den du oben siehst, bezieht sich auf Fälle, in denen ein Bildkomprimierungs-Plugin hochgeladene Bilder nicht erkennt. Es hängt von dem von dir verwendeten Plugin ab, aber es kann sein, dass es Bilder, die du nicht verändert hast, nicht erkennt. Bei einigen Bildkomprimierungs-Plugins hast du jedoch die Möglichkeit, das Bild manuell zu ändern.
Dateitypen zur Optimierung von Webbildern
Wie bereits erwähnt, gibt es verschiedene Dateitypen, aus denen du bei der Optimierung von Bildern für das Web wählen kannst. Zu den gängigen Dateitypen für die Optimierung von Bildern für das Web gehören JPG (JPEG), PNG, GIF und in einigen Fällen auch SVG.
Ein weiteres Format, das dir vielleicht auffällt, ist das Web Picture Format (.webp), das für die universelle Darstellung von Bildern auf allen Geräten immer nützlicher wird. Es wird von einigen Versionen von Chrome, Android, Microsoft Edge, Opera und Firefox unterstützt.
Bildoptimierung für Mobilgeräte
Viele Menschen surfen mit ihrem Handy im Internet. Deshalb ist es für mobile Nutzer wichtig, dass die Bildgröße entsprechend angepasst ist. Mobile Endgeräte verfügen oft über langsamere Verbindungen und begrenzte Datentarife, was bedeutet, dass es bei deinen JPG- und PNG-Bildern auf jedes Byte an Dateigröße ankommt.
Stell dir vor, jemand versucht, deine Website in der U-Bahn oder in einem Café mit schlechtem WLAN zu besuchen. Wenn deine Bilder nicht richtig für Mobilgeräte optimiert sind und die Dateien unnötig groß sind, werden sie wahrscheinlich aufgeben und zur Website eines Konkurrenten wechseln, die schneller lädt.
Die gute Nachricht ist, dass es mehrere effektive Möglichkeiten zur Optimierung von Bildern für mobile Nutzer gibt. Eine der leistungsfähigsten Methoden ist das responsive Bild, das die Bildgröße automatisch an die Bildschirmgröße und die Fähigkeiten des Geräts anpasst.
Du kannst auch adaptive Bilder verwenden, mit denen du verschiedene Bildversionen für unterschiedliche Geräte und Viewport-Größen erstellen kannst. Im Gegensatz zu responsiven Bildern, die sich fließend skalieren lassen, werden bei adaptiven Bildern vorgefertigte Versionen mit fester Breite auf der Grundlage bestimmter Geräte-Breakpoints angezeigt. Wenn jemand deine Website besucht, erkennt der Server den Gerätetyp und stellt daraufhin die passende Version des Bildes bereit.
Dies unterscheidet sich von responsiven Bildern, die ein einziges Bild verwenden, das sich flexibel skalieren lässt. Adaptive Bilder können eine bessere Leistung bieten, da jedes Bild speziell für das jeweilige Zielgerät optimiert wird.
Die verlustfreie Komprimierung von PNG-Bildern ermöglicht die Erhaltung der Qualität bei gleichzeitiger Verringerung der Dateigröße, was besonders für Logos und Grafiken mit Text wichtig ist. Bei Fotos kann die JPG-Komprimierung auf mobilen Geräten aggressiver sein, da auf kleineren Bildschirmen die feinen Details nicht so deutlich zu erkennen sind.
Hier sind einige praktische Tipps zur Implementierung der Bildoptimierung für Mobilgeräte:
- Geräteerkennung: Achte auf die Bildgröße und verwende CSS-Media-Queries und JavaScript, um die Bildschirmgröße zu erkennen. So kannst du verhindern, dass mobile Geräte unnötig große Dateien herunterladen.
- Progressives Laden: Implementiere Strategien, bei denen die Bilddateien in Etappen geladen werden. Das gibt den Nutzern ein sofortiges visuelles Feedback, während sie auf das vollständige Bild warten.
- Kompressionsoptionen: Wähle die richtige Komprimierungsmethode für jeden Bildtyp. Verwende verlustfreie Komprimierung für Grafiken mit Text oder scharfen Kanten und Standardkomprimierung für Fotos, bei denen ein gewisser Qualitätsverlust auf mobilen Endgeräten nicht auffällt.
Die Auswirkungen der richtigen Bildoptimierung für Mobilgeräte können dramatisch sein. Gut optimierte Bilder mit angemessenen Dateigrößen und Bildabmessungen können die Ladezeiten von mobilen Seiten erheblich verkürzen und gleichzeitig eine gute visuelle Qualität gewährleisten.
Fortschrittliche Bildoptimierungstechniken
Auch wenn du die Grundlagen der Bildoptimierung beherrschst, können einige ausgefeiltere Techniken die Leistung deiner Website steigern.
Lazy Loading ist eine clevere Technik, die die Ladezeiten einer Seite drastisch verbessert. Anstatt alle Bilder auf einmal zu laden, wenn jemand deine Seite besucht, werden hierbei nur die Bilder geladen, die beim Scrollen angezeigt werden sollen.
Stelle dir vor, du hast einen langen Blogbeitrag mit 20 Bildern. Ohne Lazy Loading muss der Browser eines Besuchers sofort alle 20 Bilder herunterladen, auch wenn er nur den ersten Absatz liest und dann die Seite wieder verlässt. Das ist eine Menge verschwendete Bandbreite und verlangsamt den ersten Seitenaufbau. Mit Lazy Loading lädt der Browser zunächst nur die ersten paar Bilder herunter, wodurch die Seite viel schneller geladen wird.
Neben dem Lazy Loading kannst du auch das srcset-Attribut verwenden, um die passenden Bildgrößen für verschiedene Geräte bereitzustellen. Statt einer Einheitsgröße kannst du mit srcset mehrere Versionen desselben Bildes bereitstellen und den Browser entscheiden lassen, welche die beste Option ist. Das bedeutet, dass mobile Nutzer keine unnötig großen Bilder herunterladen müssen und Desktop-Nutzer immer noch qualitativ hochwertige Bilder erhalten.
Zusammenfassung:
Wenn es um die Optimierung von Bildern für Webseiten geht, solltest du bedenken, dass du ihre Größe reduzieren und gleichzeitig die ursprüngliche Qualität so gut wie möglich beibehalten kannst.
Es ist möglich, die Größe deiner Bilder mit Plugins automatisch zu ändern. Die besten Ergebnisse erzielst du mit Tools, die wissen, wie sie auf deine Dateitypen reagieren. Solange du mit dem Bild, mit dem du angefangen hast, zufrieden bist, sollte die Optimierung für die Darstellung im Internet nicht allzu schwierig sein.
Wichtige Erkenntnisse
- Die Bildoptimierung ist für die Leistung einer Website entscheidend und wirkt sich direkt auf die Ladegeschwindigkeit und das Nutzererlebnis aus.
- Zu einer effektiven Bildoptimierung gehört es, die Dateigröße zu reduzieren und gleichzeitig die Bildqualität zu erhalten. Dazu werden Techniken wie die Wahl des richtigen Dateiformats, die Komprimierung von Bildern und das Hinzufügen von Alt-Text zur Verbesserung von SEO und Barrierefreiheit eingesetzt.
- Es gibt zahlreiche Tools und Techniken zur Optimierung von Bildern, darunter automatische Komprimierungs-Plugins, responsives Bilddesign und Strategien wie Lazy Loading, die die Ladezeiten von Websites und das Engagement der Nutzer auf verschiedenen Geräten erheblich verbessern können.
Häufig gestellte Fragen
Wie kann ich Bilder für meine Website komprimieren?
Um Bilder für deine Website zu komprimieren, kannst du die Größe des Bildes auf die ideale Auflösung ändern, bevor du es auf deine Website hochlädst. Andernfalls kannst du ein automatisches Plugin verwenden, das diese Aufgabe für dich übernimmt. Am besten installierst du das Plugin auf deiner Website oder deinem Blog, bevor du neue Bilder hinzufügst, damit sie automatisch komprimiert werden. Du kannst die Bilder manuell verkleinern, nachdem du sie hochgeladen und bevor du ein Komprimierungs-Plugin installiert hast. Das ist nur notwendig, wenn das Plugin einige ältere Dateien nicht erkennt.
Wie optimiere ich ein JPEG für das Web?
Die Komprimierung von JPEG-Bildern kann die Ladezeit einer Seite verkürzen. In der Regel behältst du dabei auch die Qualität des Originalbildes bei. Um die besten Ergebnisse zu erzielen, musst du jedoch mit einem qualitativ hochwertigen Bild beginnen.
Um ein JPEG schnell für das Web zu komprimieren, kannst du Bildoptimierungstools und Plugins verwenden. Mit dem Content-Studio und dem Fotoeditor von Mailchimp lassen sich zum Beispiel verschiedene Arten von Bildern bearbeiten, in der Größe verändern und optimieren.
Was ist die ideale Bildgröße für eine Website?
Die ideale Bildgröße hängt davon ab, wofür du es brauchst. Die ideale Logogröße ist zum Beispiel etwa 100 Pixel breit und passt sich der Breite des Bildschirms an. Das ideale Header-Hintergrundbild hat eine Größe von mindestens 1024 Pixeln, kann aber auch bis zu 2500 Pixel breit sein.
Beachte, dass dies nicht die Qualität nach der Komprimierung berücksichtigt. Automatische Kompressoren helfen dir jedoch, die beste Qualität mit dem geringsten Aufwand zu erreichen.