Eines der wichtigsten Kriterien der Indexierung bei Googles, ist die LadeZeit Geschwindigkeit ihre WebSeite. Die DatenFresser dabei sind Bilder, Videos und Grafiken. Texte und der Quellcode sind hingegen, da optimiert für das Internet, zu vernachlässigen. Allerdings gibt es auch für diese Inhalte sinnvolle OptimierungsTools (folgt). Glücklicherweise können sie die Dateigröße der Bilder und Videos reduzieren, um die LadeLeistung ihrer WebSeite zu verbessern. Ein Problem dabei ist allerdings, dass diese Änderungen oft die Qualität beeinträchtigen. Es gibt aber auch einige Tricks und Techniken, mit denen sie die Dateigröße ihrer Bilder reduzieren können und diese dennoch optisch schön bleiben und nicht verpixeln. So können sie ihren Besuchern ihre Bilder präsentieren und gleichzeitig eine gute LadeZeit erreichen. Schauen wir uns also an, wie wir ihre Bilder komprimieren können, ohne sie unschön zu machen und wie sie die LadeZeit ihrer WebSeite optimieren können.
- DatenMengen Basics
- Vorteile der Optimierung der WebSeiten Bilder
- Bilder einer WebSeite komprimieren
- Bilder einer WebSeite auf ein CDN auslagern
DatenMengen Basics
GigaByte (GB), TeraByte (TB) sind gängige Größen auf unseren Rechnern und mobilen Geräten, unseren Alltag bestimmen diese gigantischen Datenmenge. Aufgrund der Datenübertragung im Internet, also der Bandbreite der WLAN Leitung, ist das Internet allerdings noch lange nicht bei diesen Größen angelangt. Viel mehr sprechen und denken wir im www eher mit den GrößenMengen KiloByte (KB) und MeganByte (MB). Die Core-System Größe von wordpress zum Beispiel liegt gerade mal bei kleinen 30,8MB. shopware, ein sehr großes und leistungsfähiges eCommerce ShopSystem liegt 191,5 MB.
Byte B – 1 Byte = 8 bit
KiloByte kB – 1 kB = 1024 Byte
MegaByte MB – 1 MB = 1024 kB
GigaByte GB – 1 GB = 1024 MB
TeraByte TB – 1 TB = 1024 GB
Die DatenQuellen verteilen sich dabei wie folgt. Schnell zu erkennen, dass die bilder einer WebSeite den größten Teil der zu ladenden Daten sind. Wie diese Auswertung von httparchive zeigt, sind ganze 1810 KB von 3376KB der gesamten WebSeite Bilder. Das ist ein prozentualer Anteil von 54%. Dieser Anteil kann durchaus mit Video Daten addiert werden, da diese den gleichen Nutzen auf einer WebSeite darstellen. Dann kommen wir sogar auf einen Anteil von 77%.
Kurz noch etwas zu Bildern. Ein Bild das auf HD optimert ist und komprimiert wurde, zum Beispiel für den Header Slider, beträgt ca. 250 KB. Das gleiche Foto mit der Kamera gemacht, jetzt kommt es dabei wirklich auf die Kamera und Einstellungen an, kann schnell 10 MB und mehr groß sein. Ein solches Foto, wenn man die Grafik unten betrachtet, sprängt natürlich alle LadeZeiten Vorgaben. Im Allgemeinen ist es am besten, wenn sie die GesamtGröße einer WebSeite unter 1 MB bis max. 2 MB halten können.
Vorteile der Optimierung der WebSeiten Bilder
Warum müssen wir Bilder und Videos formatieren, haben wir bereits oben mit der Grafik der DatenMengen mehr als verdeutlicht? Aber was sind die Vorteile und vor allem der wirtschaftliche Nutzen?
Die Optimierung der Bilder auf ihrer WebSeite, bietet für die Leistung, LadeZeit und Indexierung zahlreiche Vorteile. Nach Angaben von HTTP-Archive machen Bilder im Durchschnitt 54% des GesamtTraffics und Bilder mit Videos sogar 77% einer WebsSeite aus. Wenn es darum geht ihre WebSeite in Sachen LadeZeiten zu optimieren, sind Bilder & Videos bei weitem der erste Punkt an dem es sich besonders lohnt anzugreifen! Nicht gerade wichtiger als Skripte und Schriftarten, aber aufgrund der DatenGröße viel effektiver. Der Workflow für die Bildoptimierung ist zum Glück eines der einfachsten Dinge, die bei der Optimierung erarbeteitet werden muss.
Einfach gesagt, ist eine schnelle InternetSeite besser indexiert, bekommt mehr Besucher, bietet eine bessere User Experience (UX) und erreicht das was jeder WebSeiten Betreiber im Grunde möchte, dass die Seite ihren Nutzen erfüllt. Wenn Ihre WebSeite beim Laden zu lange braucht, werden Besucher müde vom Warten und können zu etwas anderem übergehen. Nicts leichter als das im Internet.
Bilder einer WebSeite komprimieren
Das Hauptziel der Optimierung von Bildern besteht darin, eine ausgewogene und sinnvolle Balance zwischen der niedrigsten Dateigröße und einer akzeptablen Qualität zu finden. Es gibt mehrere Möglichkeiten, um eine Komrimierung durchzuführen. Eine der beliebtesten Methoden ist es, sie vor dem Hochladen in ein CMS oder einen OnlineShop einfach zu komprimieren. Normalerweise kann dies in einem Tool wie Adobe Photoshop oder GIMP durchgeführt werden. Einige dieser Aufgaben können auch mit Plugins ausgeführt werden, auf die wir weiter unten eingehen.
Die zwei wichtigsten Punkte, die Sie berücksichtigen sollten, sind das Dateiformat und die Art der Komprimierung, die sie verwenden. Durch Auswahl der richtigen Kombination aus Dateiformat und Komprimierungsart können sie, bezogen auf das Beispiel von oben, die Bildgröße um mehr als das 40-Fache reduzieren. Sie müssen mit jedem Bild oder Dateiformat experimentieren, um zu sehen, was am besten funktioniert.
Bild Formate
Man kann eigentlich nur diese 3 Kandidaten aufzählen. jpg, png und gif. GEF ist eigentlich ein Relikt der Anfänger, allerdings aufgrund der Animationsmöglichkeit immer mehr im kommen. PNG wird immer dann eingesetzt wenn Transparenz notwendig ist. Die Datenmenge ist grundsätzlich größer als JPEG. JPEG ist eigentlich der Standard. In meinem Leben
Komprimieren oder Größe ändern
Wenn ein Bild zu stark komprimiert wird, verliert es an schärfe, ausgenommen PNG, da dieses Format nicht komprimiert werden kann. PixelBilder kennen wir alle, das digitale Zeitalter begann mit PixelSpielen und Anwendungen die aussahen wie Lego, aber was erzähle ich, kennt sicher jeder. Verwenden sie deshalb eine niedrige Komprimierungsrate, was zu höchster Qualität aber auch größerer Dateigröße führt. Bei PhotoShop CC (PS CC) ist die jpg Komprimierung 8 eine ideale Rate, für ein perfektes Ergebnis.
Die OriginalGröße eines Bildes aus der Kamera ist für ihre WebSeite eine Katastrophe, das haben wir oben ja schon erläutert. Eine HD Auflösung, also die Breite von 1920px, ist ideal für VollBilder. Für Bilder in Beiträgen oder Produkten reichen sicherlich auch schon 1280px bzw. 960px. Auch wenn inzwischen die Bildschirm Auflösung größer als 1920 Pixel betragen, reicht ein Bild Slider in 1920 Pixel vollkommen aus.
Verlustfreie und verlustfreie Optimierung
Es ist auch wichtig zu verstehen, dass es zwei Arten der Komprimierung gibt, die verwendet werden können: lossy und lossless. Siehe Adobe Help
Lossy – Dies ist ein Filter, der einige Daten eliminiert. Dadurch wird das Bild beeinträchtigt, sodass darauf zu achten ist, wie stark das Bild verkleinert werden soll. Die Dateigröße kann stark reduziert werden. Tools wie Adobe Photoshop, GIMP oder andere BildEditoren verwenden diese Technik, um die Qualitätseinstellungen eines Bildes anzupassen.
LossLess – Dies ist ein Filter, der die Daten komprimiert. Dadurch wird die Qualität nicht beeinträchtigt, die Bilder müssen jedoch vor dem Rendern dekomprimiert werden. Eine verlustfreie Komprimierung ist mit Tools wie Photoshop oder GIMP möglich.
Experimentieren sie am besten mit diesen Komprimierungstechniken, um herauszufinden, was für jedes Bild oder Format am besten geeignet ist. Wenn ihre Tools über die Option verfügen, stellen Sie sicher, dass Sie das Bild für das Web speichern. Dies ist eine Option in vielen Bildbearbeitungsprogrammen, mit der Sie die Qualität anpassen können, um eine optimale Komprimierung durchzuführen. Sie werden etwas an Qualität verlieren. Versuchen sie daher, die beste Balance zu finden, ohne die Bilder unschön zu machen.
Ändern der Skalierung von Bildern
Vor der Responsivität war es sehr wichtig, dass Sie Bilder hochskalieren und nicht von CSS skaliert waren. Dies ist jedoch inzwischen überflüssig geworden, da z. B. WordPress als CMS responsive Bilder unterstützt. Grundsätzlich erstellt WordPress zudem automatisch mehrere Größen für jedes in die Medienbibliothek hochgeladene Bild. Durch Einbeziehen der verfügbaren Größen eines Bildes in ein srcset-Attribut (aktueller Standard) können Browser jetzt die am besten geeignete Größe herunterladen und die anderen ignorieren. Die Bildgröße wir optimiert und reduziert die DatenMenge, da wo es möglich ist. Nachstehend das Beispiel des Bildes in diesem Beitrag
<img src="https://ideeos.de/wp-content/uploads/sites/2/2018/11/pexels-photo-618545.jpeg" srcset="https://ideeos.de/wp-content/uploads/sites/2/2018/11/pexels-photo-618545.jpeg 1920w, https://ideeos.de/wp-content/uploads/sites/2/2018/11/pexels-photo-618545-300x200.jpeg 300w, https://ideeos.de/wp-content/uploads/sites/2/2018/11/pexels-photo-618545-768x512.jpeg 768w, https://ideeos.de/wp-content/uploads/sites/2/2018/11/pexels-photo-618545-1024x683.jpeg 1024w, https://ideeos.de/wp-content/uploads/sites/2/2018/11/pexels-photo-618545-24x16.jpeg 24w, https://ideeos.de/wp-content/uploads/sites/2/2018/11/pexels-photo-618545-36x24.jpeg 36w, https://ideeos.de/wp-content/uploads/sites/2/2018/11/pexels-photo-618545-48x32.jpeg 48w" sizes="(max-width: 1920px) 100vw, 1920px" width="1920" height="1281">
Bilder einer WebSeite auf ein CDN auslagern
Eine sehr gute und profesionelle Lösung für die Reduzierung der DatenMenge einer WebSeite ist das Auslagern der Inhalte auf ein CDN. Ein Content Delivery Network (CDN) ist vereinfacht ein bzw. mehrere externe Server, auf welchen die Bilder und Videos verwaltet werden. Beim Laden der WebSeite werden dann diese Inhalte von extern geladen und das minimiert die LadeZeit des Servers auf dem die InternetSeite liegt.
Häufig wird youtube als CDN verwendet, auch wenn das nicht wirklich der Definition eines CDN entpricht. Das Ergebnis ist aber vergleichbar. Die meisten Videos auf WebSeiten werden eingebettet und befinden sich garnicht auf dem Server der WebSeite. Das erklärt auch, warum Videos bei der Ladezeiten Grafik oben weniger Prozent als Bilder aufweisen. Denn eigentlich sind Videos viel datenlastiger Tiger als Bilder oder Grafiken.
Lass sie uns gemeinsam
etwas Großes schmieden
Kontaktieren sie uns für ein schnelles & unverbindliches Angebot.
