Erfolgreiche Website Tipp 19 – Website Bilder optimieren und richtig einbinden

Deine Website ist zu langsam? Liegt es daran das du deine Website Bilder unkomprimiert verwendest? Bilder und Grafiken ziehen oft die Ladezeiten der Website unnötig in die Länge. Was du alles darüber wissen musst und beachten solltest, um dies zu verhindern, werde ich dir in diesem Beitrag erklären.

Über eines solltest du dir aber im Klaren Sein, die Website Bilder optimieren alleine reicht nicht aus, um die Ladezeiten zu verkürzen. Es trägt aber sehr viel zur Optimierung der Website bei.

Warum verlangsamen unkomprimierte Bilder und Grafiken die Website?

Meist werden diese Dateien von Bildagenturen oder direkt von einer Kamera heruntergeladen. Für gewöhnlich sind die Bilddateien sehr groß. Um die Dateien auch für den Druck verwenden zu können, müssen sie sogar so sein. Großteils haben diese eine Größe von über 10 Megabyte. Bei Websites sind allerdings auf andere Kriterien zu achten.

Wenn du auf deiner Startseite zwei Bilder mit je 10 Megabyte verwenden würdest, wären sie Ladezeiten so extrem groß, das niemand deine Website zu sehen bekommt. Nämlich bevor die Seite vollständig geladen ist, ist der Website Besucher längst wieder verschwunden. Und genau das wollen wir absolut nicht.

Solltest du dann nicht auf Fotos und Grafiken verzichten?

Nein! Fotos und Grafiken sind genauso wichtig wie die Texte auf der Website. Damit lässt sich der Inhalt auflockern und auch ergänzen. Grafiken erklären auf einfache Weise was du mit Worten nur schwer erklären kannst. Leider wissen unerfahrene oft gar nicht wie schnell sich die Ladezeit durch nicht oder falsch komprimierte Bilder drastisch erhöht. Ein Grund gänzlich auf Bilder zu verzichten ist dies allerdings nicht. Stell dir einmal vor, du besuchst einen Online-Shop, und bei deinem gesuchten Produkt gibt es keine Bilder dazu. Und, kaufst du nun das Produkt ohne zu wissen, wie es aussieht?

Hast du eigentlich schon einmal eine Website besucht, wo es keine Grafik zu sehen gibt und auch kein einziges Foto? Ich persönlich nicht. Beim richtigen Aufbau einer Webseite ist schon einmal ein Logo vorhanden. Gut, ein Logo kann auch aus reinem Schriftzug, wie beispielsweise einer Google-Font bestehen. Ich gebe zu, vielleicht ist das nicht das beste Beispiel. Was ich damit verdeutlichen möchte, beim richtigen Aufbau eine Website, ist entweder eine Grafik oder mindesten ein Foto vorhanden. Gleichgültig ob es sich um eine Startseite, einer Microsite oder einer Landingpage handelt. Grafiken oder Fotos sind immer eingebunden.

Wenn nicht, dann ist zumindest ein Video eingebunden. In den letzten Monaten verbreitet sich der Einbau von Videos enorm. Kein Wunder, es verhilft zu größerer Reichweite und bringt zusätzlichen Traffic. Allerdings gibt es beim Verwenden und einbinden von Videos andere Richtlinien an du dich halten solltest. Darüber werde ich aber bei einem anderen Beitrag näher darauf eingehen.

Was muss man beim Integrieren von Fotos und Grafiken nun genau wissen?

Grundsätzlich musst du beim Integrieren nur über 3 Dinge Bescheid wissen. Erstens über das Dateiformat, zweitens über die Bildgröße und drittens über die Dateigröße. Drei Dinge, nicht mehr und nicht weniger. Klingt einfach, oder? Nun ganz so einfach ist dann doch nicht.

Dateiformat, was es zu beachten gibt

Dateiformate gibt es unzählige, doch welches ist für die Website das richte? Vier davon kommen üblicherweise zum Einsatz: SVG, JPG, PNG und das GIF.

In den letzten Jahren ist die Verwendung von SVG’s immens gestiegen. In Zusammenhang mit responsive Design und der minimalistischen Darstellung wurden die vielen Vorzüge des Dateiformates erkannt. Ein großer Vorteil ist die verlustfreie Skalierung. Durch die Verwendung des SVG-Formats werden Grafiken mit verschiedensten Auflösungen immer bestmöglich dargestellt. Im Vergleich zu anderen Grafikformate benötigt es weniger Speicherplatz, da die Dateigröße geringer ist. Allerdings hat dieses Format auch einen Nachteil. Bei Animationen kann es durchaus zu Kompatibilitätsproblemen führen, nicht alle verfügbaren Features funktionieren einwandfrei in allen Browsern.

Das JPG bzw JPEG Format wird für Fotos und Grafiken ohne transparente Bereiche verwendet. Perfekt zum Komprimieren geeignet und passend für Bilder mit viel Details und vielen Farben.

Das PNG-Format findet bei Grafiken mit transparenten Bereiche Verwendung. Ideal zum Verschmelzen mit Hintergründe auf der Website. Für transparente Bereiche ist somit das PNG das passende Format. Bei der Komprimierung bleibt die Grafik so gut wie verlustfrei. Im Vergleich zum JPG kann es mehr Information speichern.

Das GIF-Format wird für Grafiken mit Animation angewandt. Hat aber den Nachteil das es sich mit nur 256 Farben darstellen lässt. Mittlerweile kannst du vieles mit CSS3 und JavaScript umsetzen.

Wenn du mehr über die einzelnen Formate erfahren möchtest, empfehle ich dir dich hier einzulesen: Optimizing Images 

Bildgröße im Web – welche Bildgröße ist für deine Website ideal?

Die Bildgröße hängt sehr von der Art der Verwendung ab. Ein Bild welches vollflächig im Header eingebunden ist, hat eine andere Größe als das Bild eines Logos. Sehr oft wird der Fehler gemacht, das ein Bild mit über 3000 Pixel in das zu verwendende CMS-System hochgeladen, aber auf der Website dann mit nur 700 Pixel angezeigt wird. Im Klartext, das Originalbild wird verkleinert dargestellt.

Dies bedeutet, dass das Bild in einer schlechten Qualität angezeigt wird. Sind meist sehr pixelig und wirken unprofessionell. Und, es benötigt viel Speicherplatz. Die Ladezeit der Webseite erhöht sich dadurch enorm. Je größer die Datei, umso größer ist auch die Dateigröße und die damit verbundenen Ladezeit. Selbst mit der heutigen Internetgeschwindigkeit spielt es eine wichtige Rolle.

Was ist die richtige Dateigröße

Während bei der Bildgröße die Anzahl der Pixel gemeint ist, handelt es sich bei der Dateigröße um den Speicherplatz. Dennoch sind sie voneinander abhängig. Für ein Websitebild ist eine Dateigröße von 200 kB ein sehr guter Richtwert. Je nach Anwendungsbereich wie beispielsweise ein Header-Bild ist die Dateigröße natürlich viel. Höher. Achte aber stets auf die gesamte Ladezeit der Website.

Nachteile bei falscher Einbindung und Optimierung

Für mich zählt zur falschen Einbindung auch das falsch ausgewählte Grafikformat. Wie bereits erwähnt ist nicht jedes Format geeignet und du erreichst dadurch auch nicht das bestmögliche komprimierte Ergebnis. Somit leidet die Performance darunter.

Weiteres zählt für mich zur falschen Einbindung auch falsche oder mangelhafte Bildinformationen. Mache beim Dateinamen keine Leerzeichen, stattdessen einen Bindestrich. Verwende keine Großbuchstaben, keine Umlaute und keine Sonderzeichen. Auch darf das alt-Attribut nicht vergessen werden.

Vorteile bei richtiger Einbindung und Optimierung

Wie bereits erwähnt ist die Komprimierung wichtig. Sie trägt zur schnelleren Ladezeit der Website bei, was die Zufriedenheit für Website-Besucher mit mobilem Internetzugang erhöht. Je geringer die Datenmenge, umso schneller verläuft die Übertragung. Zusätzlich kann sich eine schnelle Ladezeit positiv auf das Ranking bei diversen Suchmaschinen auswirken.

Einen weiteren Tipp, den ich dir mit geben kann, ist beim Komprimieren und abspeichern der Datei, gleich auf den sinnvollen und passende Namen zu achten. Idealerweise enthält der Dateiname gleich das Keyword. Aussehen könnt dies dann so:

<img src="alte-villa-1934.jpg" alt="Alte Villa" title="Alte Villa aus dem Jahr 1934">

Bildbearbeitungsprogramme

Um Website Bilder zu optimieren it mein Favorit der tinypng Compressor. Tinypng ist ein kostenloses Online-Tool, welches somit direkt im Browser angewandt wird. Ein hilfreiches Werkzeug um Bildformate wie PNG und JPG zu komprimieren. Du lädst deine Files hoch und kannst sie dann komprimiert wieder herunterladen. Je nach Bild kann es zu einer 70 % Verringerung der Dateigröße kommen. Das ist bei 1 Megabyte extrem viel.

Die einzigen beiden Nachteile des Online-Tools ist, das nur maximal 20 Dateien gleichzeitig mit einer jeweiligen Größe von 5 Megabyte hochgeladen werden können. Dies ist aber meiner Meinung nach bei so einem hilfreichen und kostenlosen Tool vertretbar. Seit tinypmg für mich zur Routine geworden ist, möchte ich das kostenlose Tool nicht mehr missen.

Welches Tool für dich auch immer am besten geeignet ist und du dann verwendest, achte stets darauf das du einen guten Kompromiss zwischen maximaler Komprimierung und bestmöglicher Qualität findest.

Fazit

Generell solltest du nur Fotos und Grafiken verwenden, die zum einen für die Webnutzung geeignet sind und zum andern optimiert sind. Optimiert für den Website-Besucher und optimiert für die Suchmaschinen. Mit den passenden Bildinformationen für die Bilder-SEO verhilft dir das ganze zu einem positiven Ranking. Im Idealfall liefert es sogar wichtige Backlinks. Eine win-win Situation.

Zurücklehnen und keine aktuellen Ressourcen für Webdesigner und Entwickler mehr verpassen und lasse dir die Informationen direkt in dein Postfach überbringen.

Jederzeit Kündbar! Kein Spam!

So geht es weiter

Beim 20. Tipp der Artikelserie geht es um den „Interne Verlinkung optimieren und was es zu beachten gibt“.

Wenn dir der Beitrag gefallen hat, empfiehl ihn bitte weiter oder hinterlasse einen Kommentar:

Add a Comment

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.

Shares