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.
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.
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.
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.