Die richtige Bildgröße auf Webseiten – Teil 1
Bei der Gestaltung von Webseiten spielen Bilder eine Schlüsselrolle für das gesamte Benutzererlebnis. Hochwertige Bilder können eine Website optisch aufwerten und dabei helfen, die Geschichte Ihrer Marke zu erzählen.
Große oder schlecht optimierte Bilder wirken sich negativ auf die Seiten-Ladezeiten und das Benutzererlebnis auswirken.
In diesem Artikel besprechen wir Best Practices zur Optimierung von Bildern für die Webbereitstellung. Um Qualität und Leistung in Einklang zu bringen.
Bilddateigrößen
Die Dateigröße eines Bildes ist einer der größten Faktoren, die beeinflussen, wie schnell oder langsam eine Seite geladen wird. Das Herunterladen großer Bilddateien über das Internet dauert länger. Um Bilder zu optimieren, ist es wichtig zu verstehen, was zur Dateigröße beiträgt und wie man sie reduzieren kann.
Bildauflösung
Bilder mit höherer Auflösung haben mehr Pixel und daher größere Dateigrößen. Durch Ändern der Größe von Bildern auf nur die Größe, die für die Anzeige auf einer Seite erforderlich ist, kann die Dateigröße erheblich reduziert werden.
Bildformat
Verschiedene Bilddateiformate komprimieren Bilddaten auf unterschiedliche Weise, was zu unterschiedlichen Qualitätsstufen und Dateigrößen führt. Beliebte Webformate wie JPEG, PNG und WebP bieten unterschiedliche Komprimierungsgrade.
Komprimierung
Verlustbehaftete Formate wie JPEG wenden eine Komprimierung an, die die Dateigröße dauerhaft reduziert, indem unnötige Bilddaten entfernt werden, was zu Qualitätseinbußen führt. Verlustfreie Formate wie PNG und WebP komprimieren ohne Qualitätsverlust, jedoch nicht so stark wie JPEG. Höhere Komprimierung reduziert die Dateigröße weiter, allerdings auf Kosten eines stärker sichtbaren Qualitätsverlusts.
Bildabmessungen
Breitere und höhere Bilder haben mehr Pixel und beanspruchen mehr Speicherplatz, selbst bei gleicher Auflösung. Durch Verkleinern der Größe von Bildern auf die für die Verwendung auf einer Seite erforderlichen Abmessungen kann die Dateigröße erheblich reduziert werden.
Farbtiefe
Bilder mit mehr Farben erfordern mehr Daten, um sie darzustellen. RGB-Bilder (Vollfarbe) sind deutlich größer als Bilder, die mit weniger Farben wie Graustufen gespeichert werden.
Die Optimierung eines der oben genannten Faktoren kann dazu beitragen, die Größe der Bilddateien zu reduzieren, ohne die visuelle Qualität wesentlich zu beeinträchtigen. Ziel ist es, die Dateigröße so weit wie möglich zu reduzieren, ohne dass es zu spürbaren Qualitätsproblemen kommt.
Wählen Sie das richtige Dateiformat
JPEG
Am besten geeignet für fotografische Bilder und solche mit subtilen Farbverläufen oder Kanten.
Verwendet verlustbehaftete Komprimierung, die die Dateigröße dauerhaft reduziert. Mit zunehmender Komprimierung nimmt die Qualität stärker ab. Für ein ausgewogenes Verhältnis von Qualität und Größe sollte die Lagerung auf einem mittleren bis hohen Qualitätsniveau (60–80 %) erfolgen.
Webstandard, nahezu universelle Browserunterstützung.
PNG
Bevorzugt für Logos, Symbole, Strichzeichnungen, Text und einfache Grafiken mit wenigen Farben. Verlustfreie Komprimierung bedeutet keine Beeinträchtigung der scharfen Kanten oder des Textes.
Ideal für Logos.
WEBP
Neues Format, das 25–35 % kleinere Dateigrößen als JPEG und PNG erreicht. Nahezu universelle Browserunterstützung jetzt mit Ausnahme älterer IE-Versionen.
Verlustbehaftete und verlustfreie Varianten. Verlustbehaftet übertrifft JPEG oft in Bezug auf Qualität und Größe.
GIF
GIFs unterstützen nur 256 Farben/Paletten und eignet sich daher am besten für einfache Grafiken und minimale Animationen.
Verlustfreie Komprimierung, aber hochkomprimierte Formate wie JPEG bieten jetzt oft ein besseres Verhältnis von Qualität zu Größe.Durch die Wahl des richtigen Formats wird die Komprimierung maximiert und gleichzeitig die erforderliche Qualität beibehalten. Formate wie JPEG, PNG und WebP decken heute die meisten Webbildanforderungen ab.
Farbtiefe reduzieren
Die meisten Webbilder erfordern nicht die Millionen von Farben, die digitale Fotos erfassen. Die Reduzierung der Farbtiefen trägt in vielen Fällen dazu bei, die Dateigröße spürbar zu verringern, ohne dass die wahrgenommene Qualität darunter leidet.
Erwägen Sie Graustufen für nicht fotografische Bilder – Logos, Illustrationen und einfache Grafiken benötigen normalerweise keine Farbe. Beim Konvertieren in Graustufen werden Farbdaten entfernt.
Bildfarbe auf 256 Farben (8-Bit) verkleinern – Einfache Grafiken und Hintergründe können oft problemlos auf Paletten mit weniger als 1000 Farben reduziert werden.
Fotos auf 16-Bit-Farbe verkleinern – Bei Fotos führt die Reduzierung auf 16-Bit-Farbe zu einer besseren Qualität, während über 50 % der Farbdaten aus 24-Bit-RGB-Bildern entfernt werden. Kaum spürbarer Qualitätsverlust für das Web.Die Reduzierung der Farbtiefe funktioniert am besten in Kombination mit anderen Optimierungstechniken wie Größenänderung, Komprimierung und Neuformatierung. Das Ziel besteht darin, die Farben so weit zu minimieren, dass sichtbare Streifen oder Farbartefakte auf dem Bildschirm vermieden werden.
Bildoptimierung automatisieren
Die manuelle Optimierung aller Bilder kann äußerst zeitaufwändig sein, insbesondere bei großen Websites und Anwendungen mit Tausenden oder Millionen Bildern. Automatisierungstools verbessern die Optimierungseffizienz erheblich.
Nutzen Sie Cloud-Optimierungsdienste – Apps wie TinyPNG, ImageOptim und der Kraken-Kompressor verarbeiten Bilder automatisch in der Cloud in großem Maßstab. Integrieren Sie sich in bestehende Arbeitsabläufe.
Automatisierung in Arbeitsabläufe integrieren – Richten Sie Image-Builds ein, um Bilder durch Optimierungsprozesse beim Hochladen oder Exportieren mithilfe von Skripten und Middleware automatisch auszuführen.
Die automatisierte CMS-Komprimierung ist ideal für häufig aktualisierte Websites. Es ist kein zusätzlicher Entwicklungsaufwand erforderlich. Integrieren Sie die Komprimierung als Teil der Standard-CMS-Konfiguration.
Verwenden Sie die Bildkomprimierung im CMS
Viele Content-Management-Systeme (CMS) wie WordPress verfügen über Plugins, die hochgeladene Bilder während der Veröffentlichung automatisch optimieren. Dies gewährleistet eine qualitativ hochwertige Optimierung ohne manuellen Aufwand.
WordPress
TinyPNG/WP-Smush komprimiert Bilder verlustfrei oder mit hohen Qualitätseinstellungen beim Hochladen/Veröffentlichen.
Drupal
verfügt über Image Optimize- und Guetzli-Module, die Bilder beim Veröffentlichen von Inhalten komprimieren.
Joomla
verfügt über eine Erweiterung wie JImage zur Bildoptimierung während des Content-Workflows.
Das Gleiche gilt für gängige CMS wie Django, Ruby on Rails usw. Integrieren Sie Optimierer in App-Pipelines.Die automatisierte CMS-Komprimierung ist ideal für Websites mit häufigen Veröffentlichungen/Aktualisierungen. Kein zusätzlicher Entwicklereingriff erforderlich. Integrieren Sie Komprimierungs-Plugins als Teil von Standardseiten.
Fazit
Bei sorgfältiger Beachtung technischer Details und ausgewogenen Tests kann die Optimierung von Bildern erhebliche Leistungsvorteile für Websites und Anwendungen ohne Qualitätseinbußen bieten. Moderne Formate, Tools und Techniken machen die Optimierung für das Web einfacher als je zuvor.Mit Sorgfalt wird die Optimierung zu einem routinemäßigen Bestandteil der Entwicklungsabläufe und ermöglicht weltweit schnellere und umfassendere digitale Erlebnisse.
Lesen Sie auch >>>Teil 2<<< dieses Blogs
Wir begleiten Sie bereits ab der Erstellung Ihrer Fotos. Professionelle Ausrüstung in allen Varianten ist bei uns vorhanden. Wir können auch Fotos mit 42mio Pixel ganz leicht in der Nachbearbeitung angepassen – wenn… ja wenn die richtige Bildgestaltung bereits beim Fotoshooting eingehalten wurde.
Wir freuen uns, Sie >>> kennenzulernen <<< !