Weboptimierte Bilder: Kein Luxus, sondern eine Notwendigkeit für Deinen Online-Erfolg!

Suchmaschinen lieben schnelle Websites

Wusstest Du, dass Google und andere Suchmaschinen die Ladegeschwindigkeit Deiner Website als Ranking-Faktor berücksichtigen? Eine schnelle Website wird von Suchmaschinen bevorzugt und landet eher auf den oberen Plätzen der Suchergebnisse. Das bedeutet im Klartext: Wenn Deine Bilder nicht optimiert sind und Deine Seite dadurch langsam ist, verpasst Du möglicherweise wertvollen Traffic, der über Suchmaschinen auf Deine Seite gelangen könnte. Bilder optimieren ist also direkt mit Deiner Sichtbarkeit im Netz verbunden.

Weniger Datenverbrauch, mehr Reichweite

Immer mehr Menschen greifen über mobile Geräte auf das Internet zu, oft mit begrenzten Datenvolumen. Große, unoptimierte Bilder verbrauchen unnötig viel Datenvolumen, was nicht nur die Ladezeiten verlängert, sondern auch zu höheren Kosten für Deine Nutzer führen kann. Indem Du Deine Bilder optimierst, reduzierst Du den Datenverbrauch erheblich. Das macht Deine Website nicht nur schneller, sondern auch zugänglicher für ein breiteres Publikum, insbesondere für Nutzer mit langsameren Internetverbindungen oder begrenztem Datenvolumen. Es ist ein Akt der Rücksichtnahme und erweitert Deine Reichweite.

Sparen von Speicherplatz und Kosten

Unoptimierte Bilder nehmen auf Deinem Server viel Platz ein. Das kann nicht nur zu Engpässen beim Speicherplatz führen, sondern auch zusätzliche Kosten für Dein Hosting verursachen. Durch die Komprimierung und Größenanpassung Deiner Bilder sparst Du wertvollen Speicherplatz und möglicherweise sogar bares Geld. Ein kleiner Aufwand, der sich langfristig auszahlt!

Wie optimierst Du Deine Bilder?

Es gibt verschiedene Wege, Deine Bilder für das Web zu optimieren:

• Richtige Dateiformate wählen: Für Fotos eignen sich oft JPGs, für Grafiken mit Transparenz PNGs. Neuere Formate wie WebP bieten oft noch bessere Komprimierung.
• Komprimierung: Nutze Tools oder Plugins, um die Dateigröße Deiner Bilder zu reduzieren, ohne dabei die Qualität sichtbar zu mindern.
• Größenanpassung: Skaliere Deine Bilder auf die tatsächliche Größe, in der sie auf Deiner Website angezeigt werden. Ein 3000px breites Bild für einen Bereich, der nur 800px breit ist, ist pure Verschwendung.
• Lazy Loading: Implementiere Lazy Loading, damit Bilder erst dann geladen werden, wenn sie im Sichtfeld des Nutzers erscheinen.

Denk daran: Jedes einzelne Bild auf Deiner Website zählt. Die Zeit und Mühe, die Du in die Weboptimierung Deiner Bilder investierst, zahlt sich vielfach aus – in Form einer besseren Benutzererfahrung, höherer Suchmaschinen-Rankings und einer effizienteren Website. Es ist keine Option mehr, sondern ein Muss für jeden, der online erfolgreich sein möchte!

Dein Bonus-Tool: Ein Script zur Bildoptimierung für Deine Website!

Du fragst Dich vielleicht, wie man Bilder am besten optimiert. Keine Sorge, es gibt viele Tools! Als kleinen Bonus haben wir hier ein Bash-Script vorbereitet, das Dir die Arbeit erleichtern kann. Es nutzt das leistungsstarke ImageMagick-Programm, um Deine Bilder schnell und effizient für das Web vorzubereiten.

Wofür ist dieses Script?

Dieses Script hilft Dir dabei:

• Bilder zu komprimieren: Es macht Deine Bilddateien kleiner, sodass sie schneller laden, ohne dass Du einen Qualitätsverlust bemerkst.
• In das WebP-Format umzuwandeln: WebP ist ein modernes Bildformat, das speziell für das Web entwickelt wurde und oft eine bessere Komprimierung als JPEG oder PNG bietet.
• Optional die Bildbreite anzupassen: Wenn Du alle Bilder auf Deiner Website auf eine bestimmte Breite bringen möchtest, kann das Script das automatisch für Dich erledigen.

Was Du dafür brauchst:

Einen Computer mit Linux, macOS (da es ein Bash-Script ist).

Das Programm ImageMagick muss auf Deinem Computer installiert sein. (Normalerweise kannst Du es über die Paketverwaltung Deines Systems installieren, z.B. sudo apt-get install imagemagick unter Ubuntu).

So nutzt Du das Script (Kurzanleitung):

Kopiere das Script in eine Textdatei und speichere sie unter einem Namen wie bilder_optimieren

Öffne Dein Terminal (das ist so ein schwarzes Fenster, in das man Befehle tippen kann), navigiere zu dem Ordner, in dem Du die Datei gespeichert hast, und gib ein: chmod +x bilder_optimieren

Bilder optimieren:

Nur Komprimieren & WebP-Konvertierung: 

Gehe im Terminal in den Ordner mit Deinen Bildern und rufe das Script so auf:

./bilder_optimieren

Es erstellt dann einen neuen Ordner namens bilder_optimiert mit den WebP-Versionen Deiner Bilder.

Komprimieren, WebP-Konvertierung & Breite anpassen: 

Wenn Du die Bilder zusätzlich auf eine bestimmte Breite skalieren möchtest (z.B. 800 Pixel), rufst Du es so auf:

./bilder_optimieren 800

Auch hier landen die optimierten und skalierten Bilder im Ordner bilder_optimiert.

Wichtiger Hinweis: Das Script erstellt immer neue, optimierte Dateien und speichert sie in einem separaten Ordner (bilder_optimiert). Deine Originalbilder bleiben dabei unverändert!

#!/bin/bash
clear
output_dir="bilder_optimiert"
mkdir -p "$output_dir"
# Variable to check if at least one image file was found
image_found=false
# Check if an argument is provided
if [ -z "$1" ]; then
    echo "No argument provided. Optimizing images..."
    for input_file in *.jpg *.jpeg *.png; do
        if [ -e "$input_file" ]; then
            image_found=true
            filename=$(basename "$input_file")
            output_file="$output_dir/${filename%.*}.webp"
            # Optimize image: convert to webp, quality 90, and strip metadata
            magick "$input_file" -quality 90 -strip "$output_file"
            echo "Image $input_file optimized and saved as: $output_file"
        fi
    done
else
    desired_width="$1"
    echo "Argument provided: resizing images to width $desired_width..."
    for input_file in *.jpg *.jpeg *.png; do
        if [ -e "$input_file" ]; then
            image_found=true
            filename=$(basename "$input_file")
            output_file="$output_dir/${filename%.*}.webp"
            # Resize and optimize image: convert to webp, resize to desired width, quality 90, and strip metadata
            magick "$input_file" -resize "${desired_width}x>" -quality 90 -strip "$output_file"
            echo "Image $input_file resized and optimized, saved as: $output_file"
        fi
    done
fi
# If no images were processed, output a message
if [ "$image_found" = false ]; then
    echo "No JPG, JPEG, or PNG image files found in the current directory."
fi