Weiter zum Hauptinhalt

Hallo! Du kannst den Standard- und den Essentials-Tarif während einer kostenlosen Testphase ausprobieren. Starte noch heute kostenlos.

So optimierst du die Bilder für deine Website

Optimierte Bilder können deine Website beschleunigen und den Besuchern ein besseres Erlebnis bieten. Hier erfährst du, wie du die Bilder für deine Website optimieren kannst.

Stell dir vor, Websitebesucher haben gerade deine neue Werbeaktion gesehen. Sie waren so begeistert davon, dass sie sich das Angebot angeschaut haben, das du verkaufst. Leider können sie dann die Warenkorbseite nicht laden und ihren Kauf nicht abschließen. Was ist da gerade geschehen?

Viele Probleme können zu Problemen beim Laden von Seiten führen. Es kann zum Beispiel vorkommen, dass du am Anfang nicht über genügend Online-Speicherplatz für deine Website verfügst. Unter Umständen hat er auch keinen so großen Cache-Speicher, wie er benötigt.

Aber von allen Fehlern, die du beim Erstellen einer Website machen kannst, kann die mangelnde Optimierung von Bildern für Webseiten einer der problematischsten sein. Wenn du Bilder nicht ordentlich für das Internet optimierst, kann das deine Website verlangsamen, was wiederum zu weniger Traffic und verlorenen Verkaufschancen führt. Im Folgenden erklären wir, wie du Bilder für das Internet für eine Website optimieren kannst, damit jene die gewünschten Ergebnisse erzielt.

  • Was ist Bildoptimierung?
  • Warum ist es wichtig, Bilder für das Internet zu optimieren?
  • So optimierst du Bilder für das Internet
  • Tools zur Bildoptimierung
  • Dateitypen für die Web-Bildoptimierung
  • Zusammenfassung

Was ist Bildoptimierung?

Etwa 70 % der Befragten geben an, dass die Ladegeschwindigkeit einer Website ihre Bereitschaft beeinflusst, einen Online-Kauf zu tätigen. Darüber hinaus kaufen etwa 45 % dieser Personen nicht auf einer Website, wenn die Seite langsamer geladen wird, als sie es erwartet haben.

MailChimp Longform -15 graphic -1-01

Diese Statistiken unterstreichen die Bedeutung der Web-Bildoptimierung. 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 Kasse geschafft haben. Oftmals beginnt dieses Programm, wenn sie zum ersten Mal auf die Homepage deiner Website gelangen. Du kannst dies mit der Website-Bildoptimierung verhindern.

Bildoptimierung ist der Vorgang, bei dem du die Größe deiner Bilddateien reduzierst. Es geht aber auch darum, dass die Bild- und Grafikqualität während des „Schrumpfungsprozesses“ (der Komprimierung) nicht beeinträchtigt wird.

Ein Grund für das langsame Laden von Websites sind Bilder, die nicht richtig optimiert sind. Das bedeutet, dass die Dateien so groß sind, dass sie den Rest deiner Website belasten und Speicherplatz auf deiner Website verschlingen.

Bei der Bildoptimierung hingegen wird die Auflösung deiner On-Page-Bilder angepasst. Die Bildoptimierung reduziert auch die Dateigröße, sodass auf deinem Website-Server mehr Platz zur Verfügung steht. Indem du Speicherplatz auf deinem Server freimachst, kannst du die Ladezeiten deiner Website verkürzen und so die Navigation auf deiner Website einfacher und angenehmer gestalten.

Warum ist es wichtig, Bilder für das Internet zu optimieren?

Wenn du Bilder für Webseiten optimierst, freuen sich deine Benutzer. Es sorgt auch dafür, dass deine Domain-Server so laufen, wie sie sollten. Denke daran, dass etwa die Hälfte deiner Betrachter Mobiltelefone nutzt, um online nach Informationen zu suchen und Websites zu besuchen. Daher kann die Bildoptimierung einen großen Beitrag dazu leisten, deine Website für die mobile Seitengeschwindigkeit und mobile SEO zu optimieren. Die Optimierung von Web-Bildern kann Benutzern helfen, deine Inhalte auch bei einer langsamen WLAN-Verbindung zu sehen.

Letztendlich kann die Optimierung von Bildern für das Internet deiner Website in vielerlei Hinsicht helfen. Im Folgenden haben wir einige weitere Möglichkeiten aufgeführt, wie die Bildoptimierung für das Web deine Website verbessern kann.

MailChimp Longform -15 graphic -2-01

Seiten schneller laden lassen

Einer der Hauptgründe für die Optimierung von Bildern ist, dass sie schneller geladen werden sollen. Bilder, die nicht optimiert sind, können deine Website so verlangsamen, dass die Navigation schwierig und die Nutzung frustrierend wird.

Tipp: Bei der Optimierung von Bildern geht es darum, ihre Auflösung zu verringern, damit sie nicht zu viel Online-Speicherplatz in Anspruch nehmen. Außerdem kannst du Bilder komprimieren, aber trotzdem die gleiche Bildqualität wie im Original beibehalten oder Bilder und Grafiken nur bei Bedarf verwenden.

Benutzererfahrung optimieren

Wenn du Bilder für das Web optimierst, optimierst du auch die Benutzererfahrung. Mit anderen Worten: Du reduzierst die Frustration deiner Kunden. Wenn du nicht möchtest, dass Besucher sich fragen, wann der leere, weiße Webspace Text und Grafiken anzeigt, ist es an der Zeit, die Auflösung der einzelnen Bilder zu ändern.

Websitebesucher werden den verbesserten Komfort und die verbesserte Optik zu schätzen wissen, die mit einer schnelleren Ladezeit der Seite einhergehen. Statt einer Fehlermeldung, an der Stelle, wo alle Bilder angezeigt werden sollten, sehen sie die Symbole und Bilder, die angezeigt werden sollten.

SEO vorantreiben

Durch die Optimierung von Bildern kannst du die Suchmaschinenoptimierung (SEO) für deine Website potenziell verbessern. Du kannst Bilder auch mit Alt-Tags kennzeichnen, um die Zugänglichkeit zu verbessern und die SEO zu optimieren. Wenn du einen Website-Builder verwendest, kannst du dies ganz einfach erreichen, indem du Bilder in eine Medienbibliothek hochlädst.

Medienbibliotheken, wie die, die von WordPress oder Mailchimp bereitgestellt werden, bieten Textfelder, in die du Alt-Tags und Keywords eingeben kannst. Diese werden an das Bild angehängt und in Suchmaschinen angezeigt, solange du zulässt, dass deine Website im Internet gefunden wird.

Speicher auf deinem Server minimieren

Große Bild-, Video- oder Grafikdateien können Website-Server verlangsamen. Wenn die Medien, die du auf deiner Website anzeigst, die empfohlenen Größengrenzen überschreiten, kann es sein, dass die Seite zu lange braucht, um zu laden oder gar nicht erst geladen wird.

Wenn du weniger Bilddateien auf deinem Server speicherst, funktioniert deine Website mit der Geschwindigkeit, die deine Besucher erwarten. Wenn du gelernt hast, wie du Bilder für das Web optimierst, kannst du schnelle Ladezeiten für deine Seiten erreichen.

So optimierst du Bilder für das Internet

Es braucht nicht viel, um zu lernen, wie du Bilder für das Web optimierst. Im Folgenden erklären wir, wie du Bilder für deine Website komprimierst, und gehen auf die grundlegenden Schritte bei der Optimierung von Bildern für das Web ein.

MailChimp Longform -15 graphic -3-01

Dateiformat auswählen

Du wirst feststellen, dass es Hunderte verschiedener Dateitypen gibt. Zu den gängigsten gehören JPEG (oder .jpg), PNG oder GIF. Doch bevor du dich mit der Optimierung von Web-Bildern beschäftigst, musst du den Zweck der einzelnen Dateitypen verstehen.

  • JPEG – Das ist einer der meistgenutzten Dateitypen für Webbilder. Das liegt daran, dass es eine anständige Qualität bietet und weniger Platz beansprucht als ein PNG. Manche Grafiken behalten jedoch nicht immer ihren „Glanz“, wenn du die Größe der JPEG (JPG)-Bilddatei verringerst.
  • PNG – Dieses Format eignet sich oft besser, um die Dateigröße zu reduzieren und gleichzeitig die Qualität zu erhalten. Außerdem lassen sich damit Bilder mit transparentem Hintergrund verwenden und komprimieren.
  • GIF – Ein „GIF“-Dateiformat wird für Bilder im Internet nicht sonderlich bevorzugt. Es ist eher für die Erstellung animierter Grafikvideos gedacht. Dieser Dateityp eignet sich am besten für Demo-Tutorials. Heutzutage mag das GIF veraltet erscheinen, weil du komprimierte MP4-, MOV- oder WMV-Dateien hosten kannst, die Animationen von besserer Qualität erzeugen als ein GIF. Andererseits verbraucht das GIF weniger Speicherplatz und Ressourcen auf dem Webserver und verursacht keine langsamen Seitenladezeiten.
  • SVG – Dieses Format gewinnt zunehmend an Beliebtheit, seit Grafiken auf eine Vielzahl von Bildschirmgrößen reagieren müssen. Eine SVG-Datei lässt sich auf allen Geräten, einschließlich Computern, Mobiltelefonen und Tablets, vergrößern und verkleinern, ohne dass die Qualität beeinträchtigt wird. SVGs werden allerdings möglicherweise nicht in jedem Browser korrekt angezeigt.

Was den Dateityp betrifft, so werden sie alle unterschiedlich komprimiert. JPEG-Dateien werden beispielsweise "verlustbehaftet" komprimiert. Du benötigst ein nahezu perfektes Bild, um die gleiche Qualität für diesen Typ zu erzielen.

Bei der "verlustfreien" Dateikomprimierung hingegen wird die Qualität der Datei nicht beeinträchtigt, wenn die Größe reduziert wird. Das ist oft der Fall, wenn PNG-Bilder komprimiert werden. Die "verlustbehafteten" gegenüber den "verlustfreien" sind einige Arten der Komprimierung, die du bei der Verwendung von Plug-ins für die automatische Größenanpassung berücksichtigen musst. Der Dateityp spielt eine Rolle, aber das Plug-in-Design kann auch das endgültige Komprimierungsergebnis beeinflussen.

Alt-Text hinzufügen (die einfache Methode)

Das Hinzufügen von „alt“-Text ist mehr als nur die Optimierung eines Bildes für die SEO durch die Verwendung von Keywords. Dadurch wird eine Webseite zudem zugänglicher, da so eine Beschreibung zu den angezeigten Grafiken hinzufügt wird.

Alt-Text ermöglicht es sehbehinderten Personen, die angezeigten Fotos und Grafiken zu verstehen. Es ist auch praktisch, wenn Bilder in einem Tutorial nicht korrekt angezeigt werden, da du dadurch die Anweisungen trotzdem verstehen kannst.

Der einfachste Weg, Alt-Text hinzuzufügen, besteht darin, ihn in das dafür vorgesehene Feld einzugeben, wenn du ein Bild in eine Bildbibliothek hochlädst. Auf den meisten Hosting-Plattformen, auf denen Blogs gehostet werden, kannst du in der Regel auch Bilder zu Blogposts hochladen. Wenn du deinen Blogpost erstellst, wirst du wahrscheinlich ein Feld vorfinden, in das du den Alt-Text eingeben kannst, wenn du die Bilder hinzufügst.

Alt-Text hinzufügen (auf die harte Tour)

Wenn dein Blog- oder Website-Builder nicht die Möglichkeit bietet, Alt-Text und Bildbeschreibung schnell einzugeben, wirst du HTML verwenden müssen. Entweder tust du das in einem Textfeld in einem Blogpost oder auf einer Seite oder in einer Datei, die du von einer Notepad-Datei aus auf deinen Server hochladen würdest.

Die Verwendung von HTML ist ein wenig anspruchsvoller als die Verwendung eines visuellen Blog- oder Website-Seiteneditors. Das setzt voraus, dass du den Code zum Kopieren und Einfügen (oder zum Schreiben von Grund auf) im „Text“-Modus und nicht im „visuellen“ oder „Quell“-Modus hast. Wenn du keine Ahnung hast, was das bedeutet, sieh dir dieses Beispiel an, wie HTML-Code aussieht, wenn du Alt-Text zu einem Bild hinzufügst.

Mach dir keine Sorgen, wenn du gerade erst mit deiner Website anfängst. Du kannst Alt-Text auch ohne HTML-Kenntnisse erstellen, wenn du die oben beschriebene einfache Methode anwendest. Andernfalls kannst du zumindest den HTML-Code erlernen, der zum Formatieren des Bildes erforderlich ist, sobald du es in einen Blogpost hochlädst.

Den HTML-Alt-Tag-Code „auf die harte Tour“ zu erlernen, betrifft vor allem Leute, die lernen wollen, wie sie eine Website von Grund auf neu erstellen können. In diesem Fall würden sie lernen, wie sie diese in eine Notepad-Datei einfügen und mit einem FTP-Client oder beim Aufbau einer Website mit einem Code-Editor auf ihre Website hochladen.

Wenn du gerade erst mit dem Aufbau deiner Website loslegst, brauchst du das wahrscheinlich nicht zu tun. Jetzt weißt du jedoch, dass es eine Option ist, Bilder für das Internet zu optimieren.

Dateigrößen optimieren

Es ist einfacher, die Größe der Dateien zu optimieren, wenn du sie noch nicht ins Internet hochgeladen hast. In diesem Fall kannst du sie in deinem bevorzugten Fotobearbeitungsprogramm in der von dir benötigten Größe speichern. Für einen Header sind das rund 1024 Pixel in der Breite x 786 Pixel in der Höhe.

Deine Hintergrundbilder müssen etwa 1920 x 1080 Pixel groß sein. Logoabbildungen variieren zwischen 100 und 400 Pixeln in der Breite und sind in der Regel 50 bis 100 Pixel hoch. Beachte, dass die Größe, die du verwenden kannst, insbesondere bei Hintergrundbildern von der Größe der Bilddatei abhängt.

Deine Bilder komprimieren

Die Bilder auf deiner Website, die sich am meisten auf die Ladezeiten auswirken, sind der Header und die Hintergrundbilder der Seiten. Für den Header und die Hintergrundbilder der Seiten solltest du in der Regel eine GIF- oder JPEG-Komprimierung verwenden. Verkleinere sie so weit wie möglich, um deiner Website die nötige professionelle Ausstrahlung zu verleihen.

Tools und Plug-ins zur Bildoptimierung verwenden

Eine Möglichkeit, um zu vermeiden, dass du unzählige Stunden damit verbringen musst, Bilder manuell für das Web zu optimieren, ist der Einsatz von Bildoptimierungstools. Diese Plug-ins werden in der Regel mit den meisten führenden Blog-Plattformen zusammen geliefert und passen die Größe deiner Bilder automatisch an. Plug-ins und Tools zur Bildoptimierung bieten auch eine schnelle Methode zum Hinzufügen der Alt-Tags. Normalerweise kannst du einfach Bilder aus der Medienbibliothek auswählen, die du komprimieren möchtest. Dies geschieht mit wenigen Klicks und reduziert ihre Größe bei gleichbleibender Qualität.

Tools zur Bildoptimierung

Wenn du versuchen würdest, Bilder für Webseiten Stück für Stück zu optimieren, müsstest du dich mit fortgeschrittenem Code auskennen. Tools zur Bildoptimierung automatisieren den Prozess. Außerdem erspart es dir, Dutzende oder sogar Hunderte von Bildern oder Grafikdateien zu löschen und neu hochzuladen.

Anstatt die mühsame Arbeit des Änderns der Bilddateitypen und ‑größen zu übernehmen, erledigen die Plug-ins das für dich. Einige Beispiele dafür sind LazyLoad, TinyPNG oder Shortpixel. Das hängt jedoch von der Blog-Plattform ab, die du verwendest.

In vielen Fällen ist dies alles, was du tun musst, um deine Bilder automatisch zu komprimieren:

  1. Installiere das Plug-in zur Bildkomprimierung.
  2. Passe die Einstellungen so an, dass sie deinen Komprimierungsstandards entsprechen.
  3. Lass den Kompressor seine Arbeit erledigen.
  4. Stelle unveränderte Bilder für die zukünftige Komprimierung manuell ein.

Der vierte Schritt, den du oben siehst, bezieht sich auf Fälle, in denen ein Bildkomprimierungs-Plug-in hochgeladene Bilder nicht erkennt. Es hängt von dem von dir verwendeten Plug-in ab, aber es kann sein, dass es Bilder, die du nicht verändert hast, nicht erkennt. Du hast jedoch die Möglichkeit, dieses Bild mit einigen Bildkomprimierungs-Plug-ins manuell zu bearbeiten.

Dateitypen für die Web-Bildoptimierung

Wie bereits erwähnt, stehen bei der Optimierung von Bildern für das Web verschiedene Dateitypen zur Auswahl. Zu den gängigen Dateitypen für die Web-Bildoptimierung gehören JPG (JPEG), PNG, GIF und in einigen Fällen SVG.

Ein weiteres Format, das du vielleicht bemerkst, ist das Web Picture Format (.webp), das sich zunehmend als nützlich erweist, um Bilder für alle Gerätebildschirme zu vereinheitlichen. Einige Versionen von Chrome, Android, Microsoft Edge und Opera oder Firefox unterstützen es.

Zusammenfassung

Wenn du lernst, Bilder für Webseiten zu optimieren, solltest du Folgendes beachten: Du kannst ihre Größe reduzieren und dabei die ursprüngliche Qualität so gut wie möglich beibehalten.

Mit Plug-ins kannst du die Größe all deiner Bilder automatisch ändern. Die besten Ergebnisse erzielst du, wenn du die Tools verwendest, die wissen, wie sie auf deine Dateitypen reagieren müssen. Solange du mit dem Bild, mit dem du angefangen hast, zufrieden bist, sollte es nicht allzu schwer sein, es für die Anzeige im Internet zu optimieren.

Häufig gestellte Fragen

Wie komprimiere ich Bilder für meine Website?

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 automatisiertes Plug-in verwenden, das dies für dich erledigt. Es ist am besten, das Plug-in auf deiner Website oder deinem Blog zu installieren, bevor du neue Bilder hinzufügst, damit sie automatisch komprimiert werden. Du kannst die Bildgrößen manuell verkleinern, nachdem du sie hochgeladen und bevor du ein Komprimierungs-Plug-in installiert hast. Das ist möglicherweise nur dann erforderlich, wenn das Plug-in einige ältere Dateien nicht erkennt.

Wie optimiere ich ein JPEG für das Internet?

Das Komprimieren von JPEG-Bildern kann die Ladezeiten von Seiten verkürzen. In der Regel bleibt dabei auch die Qualität des Originalbildes erhalten. Um die besten Ergebnisse zu erzielen, musst du allerdings zunächst mit einem qualitativ hochwertigen Bild beginnen.

Um eine JPEG für das Internet schnell zu komprimieren, solltest du Bildoptimierungstools und Plug-ins verwenden. Du kannst mit Content-Studio und dem Foto-Editor von Mailchimp verschiedene Bildtypen bearbeiten, die Größe von Bildern ändern und diese optimieren.

Was ist die ideale Bildgröße für eine Website?

Die ideale Bildgröße hängt von deinem Verwendungszweck ab. Die ideale Logogröße ist in der Regel etwa 100 Pixel breit und passt sich in der Breite dem Bildschirm an. Das ideale Hintergrundbild für den Header beträgt mindestens 1024 Pixel, kann aber auch bis zu 2500 Pixel breit sein.

Bedenke, dass dies nicht das Qualitätsniveau nach der Komprimierung berücksichtigt. Mit automatischen Kompressoren kannst du allerdings die beste Qualität mit dem geringsten Aufwand erzielen.

Artikel teilen