Bildoptimierung fürs Web

2.1 Auswahl des richtigen Bildformats

Die Bildoptimierung fürs Web ist ein entscheidender Prozess, der darauf abzielt, die Dateigrößen von Bildern zu reduzieren, ohne die Qualität erheblich zu beeinträchtigen. Bildoptimierung beschleunigt das Laden von Webseiten, verbessert das Nutzererlebnis und erhöht das Ranking der Website in Suchmaschinen.

Dieser Prozess ist besonders in der Ära des mobilen Internets wichtig, wo die Ladegeschwindigkeit eine kritische Rolle spielt.

Auswahl des richtigen Bildformats

Die Wahl des richtigen Bildformats ist der erste Schritt zur effektiven Optimierung. Jedes Format hat seine eigenen Vorteile und Anwendungsbereiche:

JPEG

• Anwendung: Fotos und Bilder mit vielen Farben
• Vorteile: hohe Komprimierung mit Verlusten, was die Dateigröße deutlich reduziert
• Nachteile: Qualitätsverlust bei erneutem Speichern

PNG

• Anwendung: Bilder mit Transparenz und Grafiken mit klaren Linien, Text
• Vorteile: verlustfreie Komprimierung, die die Bildqualität bewahrt
• Nachteile: größere Dateigrößen im Vergleich zu JPEG

GIF

• Anwendung: Animationen und Bilder mit begrenzter Farbpalette (bis zu 256 Farben)
• Vorteile: Unterstützung von Animationen und Transparenz
• Nachteile: begrenzte Farbpalette

WebP

• Anwendung: modernes Format für verschiedene Bildtypen
• Vorteile: Unterstützung sowohl von verlustbehafteter als auch verlustfreier Komprimierung, Animationen und Transparenz. Hohe Kompressionsrate
• Nachteile: nicht in allen Browsern unterstützt (obwohl sich dies verbessert)

SVG

• Anwendung: Vektorbilder, Logos und Icons
• Vorteile: skalierbar ohne Qualitätsverlust, kleine Dateigrößen
• Nachteile: nur für Vektorgrafiken geeignet

2.2 Komprimierung von Bildern

Die Komprimierung von Bildern ist ein wichtiger Schritt im Optimierungsprozess. Sie ermöglicht es, die Dateigröße zu reduzieren und trotzdem die Bildqualität beizubehalten.

Verlustbehaftete Komprimierung

Diese Methode entfernt einen Teil der Bilddaten, was zu einer Reduzierung der Dateigröße und einem geringen Qualitätsverlust führt. Wird für JPEG und WebP verwendet.

Beispiele für Werkzeuge:

• TinyPNG/TinyJPG: Online-Tools zur Komprimierung von PNG- und JPEG-Bildern. Sie reduzieren die Dateigröße und bewahren dabei eine hohe Qualität
• ImageOptim: App für macOS, die Bilder ohne erheblichen Qualitätsverlust komprimiert
• Squoosh: Tool von Google, das verschiedene Formate und Komprimierungsmethoden unterstützt

Verlustfreie Komprimierung

Diese Methode reduziert die Dateigröße, ohne Daten zu entfernen, was die ursprüngliche Bildqualität beibehält. Wird für PNG und WebP verwendet.

Beispiele für Werkzeuge:

• PNGGauntlet: kostenloses Tool für Windows, das mehrere Komprimierungsmethoden verwendet, um die Dateigröße von PNG-Bildern verlustfrei zu reduzieren
• OptiPNG: Kommandozeilenwerkzeug zur Optimierung von PNG-Dateien durch Entfernung überflüssiger Daten

2.3 Änderung der Bildgrößen

Das Anpassen der Bildgröße bevor dem Upload auf die Website hilft, die Größe zu verringern und die Seitenladezeit zu beschleunigen. Dies ist besonders wichtig für responsives Webdesign.

Tools zur Größenänderung:

• Adobe Photoshop: leistungsstarker Bildeditor, der es ermöglicht, die Größe zu ändern und das Bild mit optimalen Webeinstellungen zu speichern
• GIMP: kostenloser Bildeditor mit Funktionen zur Größenänderung und umfangreichen Bearbeitungsmöglichkeiten
• Online Image Resizer: Online-Tools zum Ändern der Bildgröße, ohne zusätzliche Software installieren zu müssen

Verwendung von Breiten- und Höhenattributen in HTML

Durch die Angabe der Attribute width und height in den <img>-Tags können Browser Platz für die Bilder reservieren, bevor sie geladen werden, was "Sprünge" des Inhalts beim Laden der Seite verhindert. Dies verbessert den Komfort für den Nutzer und hilft, Layoutverschiebungen zu vermeiden.

Beispiele:

    
      <img src="images/photo.jpg" alt="Foto der Natur" width="800" height="600">
    
  

Dieser Code stellt sicher, dass der Browser Platz für das Bild reserviert, um Inhaltssprünge zu vermeiden.

2.4 Praktische Empfehlungen

Lazy Loading

Lazy Loading (verzögertes Laden) ermöglicht es, Bilder erst dann zu laden, wenn sie in den sichtbaren Bereich des Bildschirms gelangen. Dies verkürzt die anfängliche Ladezeit der Seite und spart Datenvolumen.

Beispiel:

    
      <img src="example.jpg" alt="Bildbeschreibung" loading="lazy">
    
  

Dieses Attribut loading="lazy" weist den Browser an, das Bild nur zu laden, wenn es für den Nutzer sichtbar wird.

Caching von Bildern

Die Konfiguration des Server-Cachings für Bilder ermöglicht es, dass wiederverwendete Bilder aus dem Browser-Cache geladen werden, was die erneute Ladezeit von Seiten beschleunigt.

Mehr über Caching werden wir im zweiten Modul besprechen, wenn ihr tiefer in das HTTP-Protokoll und die Web-Server-Einstellungen eintaucht.

Die Optimierung von Bildern fürs Web ist ein umfassender Prozess, der die Wahl des richtigen Formats, Komprimierung, Größenänderung, Nutzung von HTML-Attributen und die Implementierung bewährter Praktiken zur Leistungssteigerung einer Website umfasst. Die Anwendung dieser Methoden trägt zur Verbesserung des Nutzererlebnisses, zur Beschleunigung der Seitenladezeiten und zur Verbesserung der SEO bei.