Sie sind freiberuflich tätig oder selbstständig und betreiben eine Website um sich am Markt zu präsentieren? Dann sind Sie auf geringe Ladezeiten angewiesen. Denn aktuell suchen User meistens unterwegs und meistens über mobile Endgeräte. Websites, die aufgrund von hohem Datenverbrauch langsam laden werden schon bevor der Inhalt erscheint weg-geklickt.
Damit Sie also Erfolg mit Ihrer Website haben, sollten Sie die Ladezeiten Ihrer Hompage also möglichst gering halten. Wie das funktioniert und was Sie konkret tun können beschreibe ich in diesem Artikel.
Aus meiner Erfahrung heraus empfehle ich vor allem die Bilder so zu optimieren, dass die Bildqualität erhalten bleibt, aber die Dateigröße möglichst gering ist. Wenn Du deine Bilder verkleinerst und konsequent daran arbeitest Websiteinhalte möglichst speichersparend umzusetzen hast du nachweislich schon eine großen Pluspunkt gegenüber deinen Mitbewerbern. Um sir als Selbstständigen UnternehmerIn, als Arzt, Zahnarzt oder Allgemeinmediziner oder Heilpraktiker zu helfen, biete ich Dir regelmäßig meine Praxis Tipps.
Ich bin freiberufliche Webdesignerin und spezialisiert auf die Erstellung erfolgreicher Websites. Seit mehr als 20 Jahren arbeite ich in dem Bereich und realisiere erfolgreiche Internet-Präsentationen und Homepages für Mediziner, Ärzte und Mitarbeiter in Heilberufen sowie Selbstständige, Freiberufler oder KMU. Ich weiß aus Erfahrung das optimierte Bilddaten oft der ausschlaggebende Punkt für erfolgreiche Websites sind. Falls Du Hilfe benötigst erreichst du mich unter kexDESIGN.
Wie wichtig sind Ladezeiten oder der Page-Speed wirklich für eine Website und damit für SEO?
Seit Jahren verweisen SEOs auf die Wichtigkeit von Page Speed beziehungsweise auf kurze Ladezeiten innerhalb der Suchmaschinenoptimierung (SEO). Doch wie wichtig ist dieser Rankingfaktor tatsächlich? Wann ist eine Website überhaupt schnell genug für Google? Und was bedeutet schnell? Sind es kurze Ladezeiten, niedrige Response Time, Größe der Seite oder gar die Download-Geschwindigkeit? Nach meiner Erfahrung sind all diese Dinge zwar nicht unwichtig, denn allein die Zufriedenheit des Nutzers Deiner Website ist entscheidend. Wenn er zu lange auf die Anzeige deiner Website warten muss entscheidet er sich für einen anderen Anbieter, der ein schnelleres Ergebnis bietet. Sicher hast auch du schon die Erfahrung gemacht, dass lange Ladezeiten für einen schnelleren Absprung sorgen, denn Surfer – auch du – sind ungeduldig, sie möchten schnelle Ergebnisse ohne lange zu warten. Und gerade diese Internet-Surfer – vor allem mobil – sind für Google das Maß der Dinge. Google möchte Suchenden möglichst schnell ein möglichst relevantes sowie auch umfassendes Ergebnis bieten.
Ende Mai 2020 gab Google dann auch bereits für 2021 geplante Anpassungen bekannt: Es werden Metriken in ein Update des Algorithmus einfließen, bei der die „Page Experience“ „also die Zufriedenheit des Suchenden mit dem Suchergebnis) eine große Rolle spielt. Eine neue Möglichkeiten zur Beurteilung der Website und für das Ranking wir demnach die Zufriedenheit der Websitebesucher sein. Dieses Update soll im Laufe des Jahres 2021 erscheinen und es lohnt sich für Websitebetreiber bereits jetzt daran zu arbeiten.
Nutzen Sie folgende Optimierungsmöglichkeiten:
- Um für Websites die ich erstelle optimale Daten zu erstellen, nutzen wir bei kexDESIGN folgende Instrumente:
- – Vorschau bei MAC alternativ für Windows IrfanView.
- – TinyPNG: Die Komprimierung mit dem süßen Panda
Hier meine PraxisTipps zum Download
Optimale Bildgrößen:
Sicher fragen Sie sich jetzt welches die richtigen Bildgrößen im Web sind. Zum einen zählt die gesamte Datenmenge, also die Speicherkapazität, die das Bild insgesamt benötigt. Und zum anderen die Auflösung. Da Bildschirme keine Auflösung von 300 px/inch darstellen reichen hier 72 dpi.
-> Hero-Bild oder Bild für eine Slideshow: Breite 1.200 px – 1.450 px
-> Breites Bild bei einspaltigem Layout: Breite 1.280 px
-> Bild bei zeispaltigem Layout: Breite 640 px
-> Bild bei vierspaltigem Layout: Breite 320 px
-> Bilder im Fließtext: Breite 320 px – 300 px
-> Galeriebild ohne Großansichten: Breite 500 px
-> Galeriebild mit Großansichten: Breite 1000 px
Achten Sie jedoch unbedingt auf die Größe der Gesamtdatei:
-> Die gesamte Dateigröße sollte möglichst 200 KB oder alternativ bei großen Bildern maximal 400 KB nicht überschreiten. Ausnahmen können evtl. bei einer Vollbild-Anzeige gemacht werden.
Wie verringern Sie die Bildgrößen möglichst so, dass Sie noch gut aussehen?
Beim MAC öffnest Du die Vorschau (oder in Windows IrfanView). Danach verringerst Du die Datenkapazität über „Werkzeuge“ unter „Größenkorrektur“. Nach den gemachten Einstellungen speichere das Bild erneut ab. Sollte die Datei jetzt noch immer zu groß sein erreichst Du optimale Ergebnisse über TinyPng. Rufe die Website auf und optimiere die Bilder hier weiter.
Das Datenspar-Tool mit dem Panda: TinyPng komprimiert PNGs, aber auch JPG-Dateien – und zwar ohne Qualitätsverlust – probiere es einfach mal aus.
Eine genaue Anleitung (inkl. PDF zum Download) findest Du bei kexDESIGN in den Praxis-Tipps
Warum Bilder optimieren? Wichtige Punkte, die dafür sprechen:
Bilder sind ein essentieller Bestandteil einer jeden Website, sie gehören deshalb als zentrales Element zur öffentlichen Darstellung. Nicht umsonst heißt es „Ein Bild sagt mehr als 1000 Worte“. Und spätestens wenn es um die Schnelligkeit geht, mit der Deine Website aufgebaut wird, ist die Ladezeit ein wichtiger Faktor und somit ein Rankingfaktor für Suchmaschinen wie Google. Wenn Du also gut gefunden werden möchtest um im Ranking möglichst weit vorne zu erscheinen, gilt es unter anderem auf gut optimierte Bilder mit geringer Ladezeit zu achten. Denn professionell komprimierte Bilder sorgen für eine schnelle Anzeige der Website und verbessern damit das Nutzungserlebnis.
Bilder sprechen für sich, sie unterstreichen Gefühle oder Aussagen und verdeutlichen Inhalte ohne viele Worte. Aus dem Bereich Social Media sind wir es gewohnt über Bilder zu sprechen und Sachverhalte über Bilder zu kommunizieren. Deshalb werden auch auf Webseiten gerne und reichhaltig viele Bilder eingesetzt.
Auf den meisten Homepages verursachen diese Bilddaten deshalb auch die größten Datenmengen. Neben einem guten und ansprechenden Bildmotiv, kommt es daher darauf an, das richtige Bildformat auszuwählen und die Bilder dann möglichst optimal und ohne Verlust zu komprimieren. Denn je kleiner die Bilddateien insgesamt sind (von Speicherkapazität aus betrachtet) desto schneller lädt deine Website – und das mag nicht nur der Nutzer sondern auch Google. Geringe Ladezeiten steigern das positive Nutzungserlebnis für Deine Besucher, das registriert Google und für Google ist das eine win-win-Situation die das Ranking insgesamt verbessert.
Meine persönliche Erfahrung aus 20 Jahren Webdesign:
Kornelia Exner/kexDESIGN
Durch die professionelle Komprimierung vonBilddaten lässt sich nicht selten eine zweistellige Prozentzahl am gesamten Bild-Datenvolumen einsparen. Das ist bei nahezu allen Websites der wichtigste Punkt um Ladezeiten nachhaltig zu verbessern. Um Websitebetreibern hier zuhelfen, habe ich eine Anleitung erstellt.
Aktuelle Bildformate
Die Bildauflösung ist bei Bildern für das Internet unerheblich, wichtig sind die Bildmaße.
Eine hohe Auflösung wie Sie bei Print-Produkten benötigt wird ist bei Bildern für eine Hompage unwichtig. Bildschirme können diese Qualität ohnehin nicht anzeigen, sodass eine Auflösung von 72 dpi deshalb völlig ausreichend ist. Wichtiger für das Datenvolumen im Web sind die richtigen Bildmaße. Sie ergeben sich aus der gewünschten Darstellungsgröße des Bildes auf der jeweiligen Webseite und diese ist natürlich von Webseite zu Webseite und von Bild zu Bild unterschiedlich.
Die Dateiformate für Bilder im Überblick
Im Web sollten lediglich drei Bildformate verwendet werden: JPG, GIF und PNG. Das SVG-Format habe ich zwar nachstehend erläutert, technisch ist es jedoch aus verschiedenen Gründen nicht empfehlenswert. (Ich verzichte hier auf die genaue Erklärung des „warum“ das mir dies zu weit abschweift).
Das JPG-Format, manchmal auch JPEG geschrieben, steht für Joint Photographic Experts Group und wurde speziell zum Speichern von Fotografien entwickelt. Das JPG dürfte das meistverbreitete Bildformat im Web sein. Das JPG-Format eigentlich sich vor allem für Bilder mit fotorealistischen Motiven, in guter Qualität.
Das PNG-Format (Portable Networks Graphics) ist relativ junges Bildformat, welches als Alternative zum GIF entwickelt wurde.
Beim PNG ist eine gute Optimierung erreichbar, es kann als 24 Bit (PNG-24) und als 8 Bit (PNG-8) abgespeichert werden. Die 24 Bit-Variante ist sozusagen der Standard für fotorealistische Motive (mit der Möglichkeit über 16 Mio. Farben). Die 8 Bit-Variante kann nur 256 mögliche Farben darstellen und eignet sich daher nur für Motive mit wenigen Details.
Das GIF-Format kann Bilder nur mit maximal 256 Farben (8 Bit) darstellen. Es kommt daher vor allem bei Motiven mit einem geringen Farbspektrum, wie z.B. Logos, Icons, Illustrationen oder Navigationsbilder zum Einsatz. Es kann außerdem Transparenzen darstellen. Was das GIF den anderen beiden voraus hat, ist die Möglichkeit (kurze) Animationen, bzw. vielmehr einzelne Bilder nacheinander, abzuspielen.
Das SVG-Format (Scalable Vector Graphics) ist das einzige Vektorformat in dieser Reihe. Damit gibt es hier keine Bildgröße mit Pixelmaßen.
Vektorgrafiken haben einige Vorteile gegenüber Pixelgrafiken und weil sie aus mathematisch exakt beschriebenen Punkten, Linien und Kurven bestehen, sind sie auflösungsunabhängig und daher beliebig skalierbar.
Weitere Fragen zu Bilder und Bildformaten:
Gibt es eine indeale Bildgröße?
Manche Websites brauchen unendlich lange um zu laden. Eigentlich schade, denn der Nutzer klickt höchstwahrscheinlich weiter und wartet nicht, bis alle Inhalte korrekt dargestellt werden. Da für lange Ladezeit ein hauptgrund zu groß gewählte Bildgrößen sind habe ich diesen Artikel geschrieben. Auch wenn die Bilder bei großer Datenmenge scharf dargestellt werden haben Sie mehr Nachteile als Vorteile denn dei meisten betrachter weden einfach abspringen und die Ladezeit nicht abwarten. Die Kür liegt also folglich darin, sowohl das Format als auch die Bildauflösung korrekt an die individuelle Website anzupassen.
Wie finde ich heraus, wie groß ein Bild auf meiner Website ist?
Klicke einfach mit der rechten Maustaste auf das gewünschte Bild. Bei Verwendung von Google Chrome erhältst du über den Menüpunkt Untersuchen die entsprechenden Größenangaben des gewählten Bildes. Im Firefox-Browser bekommst du über den Menüpunkt „Grafik-Info anzeigen“ diese Info.
Wie wähle ich das Bildformat richtig aus?
Bildformate zeigen sich in den Dateiendungen. Wahrscheinlich kennst du folgende: JPG, PNG und GIF.
Insgesamt haben diese Formate unterschiedliche Vor- und Nachteile: Das JPG-Format eignet sich aufgrund seiner hohen Farbauflösung besonders gut für Fotos und findet daher auch in Digitalkameras Verwendung. Das PNG-Format ist überzeigend durch seine Fähigkeit, Transparenzen darzustellen (Logo auf Bildern). Aus diesem Grund wird es vorwiegend für Grafiken, Icons und Logos verwendet. Das GIF- Format eignet sich für Animationen und findet sein Haupteinsatzgebiet in kleinen animierten Grafiken.
WebP – Die Komprimierung von Google
WebP ist das Bildformat von Google mit dem besten Ergebnis an Komprimierung. Besonders bei Fotos hat sich gezeigt, dass dieses Format das beste Verhältnis von Qualität zu Dateigröße bietet. Im Vergleich zum JPG Format kann teilweise bis zu 30% an Speicherkapazität eingespart werden – auch oder vor allem bei detailreichen Bildern. Bei Word Press können Plugins die Umrechung in ein WebP Format erleichtern.
Welches Bildformat kann ich wann verwenden?
Wenn Du Urlaubsbilder auf Facebook oder einer Webite hochladen möchtest, ist JPG der Gewinner. (Dies gilt auch für Handy und Kamerafotos.) Allerdings achte auf die Bildgröße.
Möchtest du eine kurze Animation erstellen dann ist das GIF das richtige Format. Gilt es hochwertige Bilder, detaillierte Icons oder Transparenzen darzustellen lohnt ich das PNG-Format.
Das SVG-Format ist ideal für qualitativ hochwertige Illustrationen und Icons. Es kann auf jede Größe verlustfrei skaliert werden. Allerdings kann es mein manchen Browsern zu Problemen führen.
Hast du dich auch schon gefragt was eigentlich der Unterschied zwischen JPG und JPEG ist?
Um es kurz zu machen: Die beiden Ausdrücke meinen absolut das Gleiche. Das von der Joint Photographic Experts Group ins Leben gerufene Bildformat hatte ursprünglich einmal die Dateiendung .jpeg. Da jedoch früher bei Windows nur dreistellige Dateiendungen zulässig waren wurde aus JPEG die Endung JPG. bei Macintosh-Nutzer gab es diese Einschränkung nicht, sodass sie die ursprüngliche vierstellige Endung .jpeg nutzen konnten. Mit der Zeit sind auch unter Windows die mehrstelligen Endungen zulässig, wodurch auf beiden Betriebssystemen alle zwei Endungen immer wieder auftauchen und das ist auch der Grund dafür, dass bis heute beide Endungen gebraucht werden.
Wie kann ich ein Logo auf einen Hintergrund darstellen ohne eine weiße Fläche zu unterlegen?
Hier eignet sich das PNG-Format, es ist für die Darstellung von Transparenzen geeignet. PNG-8 lässt sich mit GIF, die anderen Versionen mit JPG vergleichen. Der wesentliche Unterschied liegt in der besseren Transparenz und gegenüber dem JPG-Format in einer verlustfreien Komprimierung.
Was ist der Unterschied zwischen den Bildformaten PNG-24 und PNG-32
Beide Versionen des PNG-Bildformats verwenden den gleichen Farbraum mit je acht Bit pro Kanal. Dadurch können pro Pixel über 16 Millionen Farben dargestellt werden.
PNG-24 unterstützt dabei eine einfache Index-Transparenz, wohingegen PNG-32 die weiteren acht Bit für einen Alpha-Kanal verwendet und 256 Transparenz-Stufen darstellen kann. Auch wenn im Web oft behauptet wird, dass PNG-24 einen Alpha-Kanal verwendet ist das falsch. Bekannt wurde das PNG-Format durch Adobe, da Photoshop und Illustrator mit PNG-8 oder PNG-24 arbeiten. Bei Nutzung von PNG-24 wird ein Alpha-Kanal genutzt und Adobe muss ein PNG-32 produzieren, um die weiteren acht Bit unterbringen zu können.
Oft wird das PNG-Format mit RGB-Farbraum meistens mit einer erhelichen Dateigröße verbunden. Dies hängt jedoch mit der Unterstützung von Transparenzen und der verlustfreien Komprimierung zusammen. Sinnvoll ist dieses Format deswegen bei Grafiken mit vielen verschiedenen Farben und einer benötigten Transparenz.
Warum und Wozu überhaupt optimierte Bilder verwenden?
Wie wir alle wissen, werden Bilder vom menschlichen Gehirn besser interpretiert und aufgenommen als Text. Der visuelle Sinn ist der Sinn, der am meisten ausgeprägt ist. Aus diesem Grund bevorzugt unser Gehirn Bilder. Und weil wir Menschen Bilder lieben erfreuen sich Galerien an Beliebtheit, werden länger betrachtet und erhöhen im Idealfall die Verweildauer auf der jeweiligen Website. Dies mag auch Google.
Warum Bilder die Ladezeiten erheblich verkürzen und die Performance der Internetseite steigern können:
Bei einem Webseiten besuch werden Datenmengen vom Browser geladen. Je kleiner also die Datenmenge bei jedem Besuch ist, umso schneller und umso geringer die zeit in der die Website angezeigt wird. Wird die Datengröße eines Bildes also verringert, so verringern sich auch die Ladezeiten und das Tempo der Webseite steigt. Gerade bei Webseiten mit vielen Bildern wie Produkt-Online-Shops, Bilddatenbanken oder Fotografen-Webseiten sind hier extreme Einsparungen erreichbar.
Haben geringe Ladezeiten auch bei der Google Bildersuche Vorteile?
Geringe Ladezeiten durch professionell optimierte Grafiken und Bilder ranken insgesamt besser und das wirkt sich auch in der Google Bildersuche aus. Da die jeweiligen Bilder mit der Website verknüpft sind wirkt sich das natürlich auch auf die Homepage aus – auch wenn für die Google Bildersuche weiter Punkte von Bedeutung sind.
Wie wichtig ist ein Bild-Slider auf meiner Website
Dynamische Slider benötigen insgesamt schon mehr Datenvolumen, verbunden mit Bildern steigt das Datenvolumen weiter. Sobald der Slider auch noch im Header liegt, lädt bereits der obere Teil der Website langsamer. Dies kann dann auch durch eine längere Wartezeit bis zum Erstaufbau der Website zu einer erhöhten Absprungrate führen. Prüfe also genau ob Du einen Slider benötigst und wenn ja wo er platziert werden soll.