Bilder komprimieren für Ihre Website: schnell & mobiloptimiert

Bilder komprimieren für Ihre Website: schnell & mobiloptimiert

Zwei Schritte, die sofort helfen: Konvertieren Sie Ihre Fotos in WebP oder AVIF und skalieren Sie sie auf die tatsächliche Anzeigebreite im Layout. Das allein kann die Dateigröße eines typischen Handwerkerfotos von mehreren Megabyte um 50–70 % reduzieren, ohne dass das Bild schlechter aussieht.

Konkret bedeutet das:

• Bildgröße anpassen: Exportieren Sie Fotos in der Pixelbreite, die das Layout wirklich zeigt, zum Beispiel 1.200 px für ein Vollbild-Banner.
• In WebP speichern: WebP ist heute in allen gängigen Browsern unterstützt und liefert deutlich kleinere Dateien als JPEG bei gleicher Qualität.
• Hero-Bild eager laden: Das erste große Bild auf der Seite darf nicht lazy geladen werden, weil es den LCP-Wert (Largest Contentful Paint) direkt beeinflusst.

Profi-Tipp: Testen Sie Ihre Seite vor und nach der Optimierung mit PageSpeed Insights — der LCP-Wert zeigt Ihnen sofort, ob die Maßnahmen gewirkt haben.

---

Inhaltsverzeichnis

• Warum langsame Bilder Handwerksbetriebe Aufträge kosten
• Welche Bildformate heute sinnvoll sind
• So bereiten Sie Bilder vor dem Upload richtig vor
• Welche Werkzeuge Sie für die Bildkompression brauchen
• Drei Workflows: manuell, automatisch oder beauftragen
• So messen Sie den Effekt Ihrer Bildoptimierung
• Wann lohnt sich die Beauftragung eines Webdesigners?
• Wichtige Erkenntnisse
• Bildoptimierung gehört zur Basis, nicht zum Bonus
• Netivoo übernimmt das für Sie: Website in 7 Tagen, fertig optimiert
• Nützliche Quellen und Werkzeuge
• FAQ

Warum langsame Bilder Handwerksbetriebe Aufträge kosten

Wer als Elektriker, Dachdecker oder SHK-Betrieb eine Website mit Referenzfotos betreibt, hat ein konkretes Problem: Rohfotos von der Kamera sind oft sehr groß. Hochgeladen ohne Bearbeitung bremsen sie die Seite so stark, dass potenzielle Kunden abspringen, bevor sie überhaupt eine Anfrage stellen.

Durch korrekte Bildoptimierung können Sie einen großen Teil des Datenvolumens einsparen. Für eine Handwerkerseite mit zehn Referenzfotos bedeutet das den Unterschied zwischen einer Seite, die in zwei Sekunden lädt, und einer, die auf dem Mobilgerät fünf Sekunden braucht.

Timo Specht, der sich auf SEO für Handwerksbetriebe spezialisiert hat, betont: Technische Basis wie Core Web Vitals wirkt sich direkt auf die lokale Sichtbarkeit in Google aus. Wer bei „Elektriker Oldenburg“ gefunden werden will, braucht eine Seite, die schnell lädt. Und schnelle Seiten beginnen mit optimierten Bildern.

---

Welche Bildformate heute sinnvoll sind

WebP ist die Standard-Empfehlung für Fotos auf Handwerkerseiten. AVIF liefert noch kleinere Dateien, wird aber von älteren Browsern nicht unterstützt. PNG bleibt für Logos und Grafiken mit Transparenz. SVG eignet sich für Icons und einfache Illustrationen.

Format	Am besten für	Browser-Support	Dateigröße vs. JPEG
WebP	Fotos, Referenzbilder	Sehr gut (alle modernen Browser)	deutlich kleiner
AVIF	Hero-Bilder, große Fotos	Gut, aber nicht überall	deutlich kleiner
JPEG	Fotos (Fallback)	Universal	Referenzwert
PNG	Logos, Transparenz	Universal	Oft größer als JPEG
SVG	Icons, Vektorgrafiken	Universal	Sehr klein

Für die Praxis empfiehlt sich folgende Aufteilung:

• WebP als Standard für alle Fotos
• AVIF für das Hero-Bild, wenn die Build-Umgebung es unterstützt
• PNG nur für Logos und Grafiken mit transparentem Hintergrund
• SVG für Icons und einfache Symbole

Wer beide Formate ausliefern will, nutzt das HTML-Element <picture> mit <source type="image/avif"> und <source type="image/webp"> als Fallback. Das srcset-Attribut sorgt zusätzlich dafür, dass Mobilgeräte kleinere Bildversionen laden.

---

So bereiten Sie Bilder vor dem Upload richtig vor

Die häufigste Ursache für schwere Seiten: Fotos werden direkt von der Kamera hochgeladen. Richtige Bildoptimierung beginnt vor dem Upload.

Checkliste für jedes Bild:

• Original sichern: Immer das Originalbild behalten, bevor Sie es bearbeiten.
• Pixelbreite anpassen: Exportieren Sie das Bild in der Breite, die das Layout zeigt, nicht größer.
• Zuschneiden: Unnötige Bildbereiche entfernen, bevor Sie komprimieren.
• Metadaten entfernen: EXIF-Daten (GPS, Kameramodell) erhöhen die Dateigröße und sind für Besucher irrelevant. Tools wie Squoosh entfernen sie automatisch.
• In WebP exportieren: Qualitätsstufe 75–85 % ist für Webfotos in der Regel ausreichend.
• Dateigröße prüfen: Banner unter 200 KB, Inhaltsbilder unter 80 KB.

Ein konkretes Beispiel: Ein Druckfoto mit 3 MB lässt sich durch Skalierung auf 1.200 px Breite und Bildoptimierung um 50–70 % reduzieren, ohne sichtbaren Qualitätsverlust.

Profi-Tipp: Das Hero-Bild niemals mit loading="lazy" versehen. Es ist fast immer das LCP-Element der Seite. Lazy Loading verzögert genau das Bild, das Google und Ihre Besucher zuerst sehen.

---

Welche Werkzeuge Sie für die Bildkompression brauchen

Die beste Kombination: ein schnelles Werkzeug für den manuellen Einzelfall und eine automatisierte Lösung für den laufenden Betrieb.

• TinyPNG: Einfache Weboberfläche, Drag & Drop, kostenlos für kleine Chargen. Ideal für gelegentliche manuelle Optimierung von JPEG und PNG.
• Squoosh: Kostenloses Google-Tool mit präziser Kontrolle über Format, Qualität und Metadaten. Eignet sich für kritische Einzelbilder wie das Hero-Foto.
• ShortPixel: WordPress-Plugin und API-Dienst, der Bilder beim Upload automatisch komprimiert und in WebP konvertiert. Kostenpflichtig ab einer bestimmten Bildanzahl, aber zeitsparend für Seiten mit regelmäßigen Updates.
• Cloudflare Polish / Image Resizing: CDN-seitige Konvertierung in WebP oder AVIF bei jedem Seitenaufruf. Sinnvoll für stark frequentierte Seiten, bei denen Build-Time-Optimierung nicht möglich ist.
• WordPress mit Plugins: ShortPixel oder vergleichbare Lösungen integrieren sich direkt in die Mediathek und optimieren Bilder automatisch beim Upload.

Werkzeug	Am besten für	Automatisierung	Kosten
TinyPNG	Manuelle Einzelbilder	Keine	Kostenlos für kleine Chargen
Squoosh	Präzise Einzeloptimierung	Keine	Kostenlos
ShortPixel	WordPress, Bulk-Verarbeitung	Hoch	Ab kostenlosem Kontingent, dann kostenpflichtig
Cloudflare	CDN-Ebene, große Seiten	Vollautomatisch	Im Cloudflare-Tarif enthalten

Jamie Grand weist darauf hin, dass Build-Time-Optimierung für Handwerkerportfolios oft die zuverlässigere Lösung ist als Laufzeit-Plugins, weil sie keine zusätzliche Serverlast beim Seitenaufruf erzeugt.

---

Drei Workflows: manuell, automatisch oder beauftragen

Der richtige Workflow hängt davon ab, wie oft Sie neue Bilder veröffentlichen und wie viel Zeit Sie investieren wollen.

1. Manuell (für gelegentliche Updates)

1. Foto auf Anzeigebreite skalieren (z. B. mit Squoosh oder einem Bildbearbeitungsprogramm)
2. In WebP konvertieren, Qualität 80 %
3. Metadaten entfernen
4. Hochladen
5. Zeitaufwand: ca. 5–15 Minuten pro Bild

2. Automatisch via Plugin oder CDN (für regelmäßige Updates)

• ShortPixel in WordPress einrichten: einmalige Konfiguration, danach läuft die Optimierung beim Upload automatisch.
• Cloudflare Polish aktivieren: ein Klick in den Cloudflare-Einstellungen, danach werden Bilder am CDN-Rand konvertiert.
• Zeitaufwand: einmalig 30–60 Minuten für die Einrichtung, danach null.

3. Beauftragen (wenn die Zeit fehlt oder die technische Basis fehlt)

Wer keine Zeit für Konfiguration hat oder eine neue Website aufbaut, gibt die Bildoptimierung an einen Dienstleister. Netivoo integriert Build-Time-Optimierung, WebP/AVIF-Auslieferung und CDN-Einbindung direkt in den Website-Erstellungsprozess. Das Ergebnis: optimierte Bilder von Anfang an, ohne nachträgliche Korrekturen.

Für SHK-Betriebe, die ihre digitale Infrastruktur weiter ausbauen wollen, lohnt sich auch ein Blick auf HVAC Pro, eine Servicesoftware speziell für SHK-Techniker.

---

So messen Sie den Effekt Ihrer Bildoptimierung

Messen Sie vor und nach der Optimierung mit PageSpeed Insights. Das Tool zeigt den LCP-Wert, die Gesamtseitengröße und konkrete Hinweise auf nicht optimierte Bilder.

Zielwerte als Richtwerte:

• LCP (Largest Contentful Paint): unter 2,5 Sekunden
• CLS (Cumulative Layout Shift): unter 0,1
• Bildgrößen: Banner unter 200 KB, Inhaltsbilder unter 80 KB

Metrik	Zielwert	Werkzeug
LCP	< 2,5 s	PageSpeed Insights, Lighthouse
CLS	< 0,1	Lighthouse, Chrome DevTools
Bildgröße Banner	< 200 KB	Browser DevTools, Squoosh
Bildgröße Inhalt	< 80 KB	Browser DevTools

Für einen Vorher/Nachher-Test: Lighthouse-Bericht vor der Optimierung speichern, Bilder optimieren, Bericht erneut ausführen und LCP sowie Gesamtseitengröße vergleichen. Auch ein Test auf einem echten Mobilgerät im Mobilfunknetz zeigt den Unterschied deutlicher als jede Desktop-Simulation.

---

Wann lohnt sich die Beauftragung eines Webdesigners?

Outsourcing lohnt sich, wenn mindestens eines dieser Kriterien zutrifft:

• Sie veröffentlichen regelmäßig neue Referenzfotos und haben keine automatisierte Lösung.
• Ihr PageSpeed-Score liegt unter 50 und Sie wissen nicht, wo Sie anfangen sollen.
• Die technische Basis der Website ist veraltet (kein WebP-Support, kein CDN, keine responsiven Bilder).
• Die Zeit für Konfiguration und Wartung fehlt im Tagesgeschäft.

Fragen, die Sie einem Anbieter stellen sollten:

1. Optimieren Sie Bilder zur Build-Zeit oder per Laufzeit-Plugin?
2. Unterstützen Sie WebP und AVIF als Auslieferungsformate?
3. Ist ein CDN im Hosting enthalten?
4. Wie messen Sie den Erfolg nach dem Launch?
5. Was passiert mit meinen Bildern bei einem Update?

Red Flags: Anbieter, die ausschließlich auf Plugins setzen ohne Build-Time-Strategie, oder die keinen LCP-Wert nach dem Launch messen.

Für die Übergabe an einen Dienstleister empfiehlt sich ein strukturierter Asset-Ordner mit Originaldateien, einer Namenskonvention (z. B. projekt-kueche-vorher.jpg) und einem kurzen Bildstil-Guide, der Bildausschnitt und Qualitätsstandard beschreibt.

---

Wichtige Erkenntnisse

Durch konsequente Bildoptimierung lassen sich Ladezeiten und Dateigröße einer Handwerkerwebsite erheblich verbessern, was sich direkt auf lokale Sichtbarkeit und Anfragenquote auswirkt.

Thema	Details
Sofortmaßnahme	Fotos auf Anzeigebreite skalieren und als WebP mit einer angemessenen Qualitätsstufe exportieren.
Hero-Bild	Niemals lazy laden, da es den LCP-Wert direkt bestimmt.
Zielwerte	LCP unter 2,5 s, Banner unter 200 KB, Inhaltsbilder unter 80 KB.
Werkzeuge	TinyPNG und Squoosh für manuelle Optimierung, ShortPixel oder Cloudflare für Automatisierung.
Netivoo	Integriert Build-Time-Bildoptimierung, WebP/AVIF und CDN direkt in jede Handwerker-Website.

---

Bildoptimierung gehört zur Basis, nicht zum Bonus

Viele Handwerksbetriebe behandeln Bildoptimierung als nachträgliche Aufgabe. Das ist ein Fehler. Wer eine neue Website aufbaut oder eine bestehende überarbeitet, sollte die Bildstrategie von Anfang an einplanen, nicht als letzten Schritt.

Bei Netivoo ist das anders. Jede Website, die wir für Elektriker, Dachdecker oder SHK-Betriebe erstellen, enthält von Beginn an eine Build-Time-Optimierung: Bilder werden beim Deployment verarbeitet, in WebP ausgeliefert, über ein CDN bereitgestellt und nach dem Launch mit Lighthouse gemessen. Das ist kein Luxus. Es ist die Voraussetzung dafür, dass eine Handwerkerseite auf dem Mobilgerät tatsächlich funktioniert.

Was ich in der Praxis immer wieder sehe: Betriebe, die viel Geld in ein schönes Design investiert haben, verlieren Anfragen, weil das Hero-Bild vier Sekunden braucht. Der Besucher ist längst weg. Bildoptimierung ist keine technische Spielerei. Sie ist der Unterschied zwischen einer Seite, die Aufträge bringt, und einer, die nur existiert.

---

Netivoo übernimmt das für Sie: Website in 7 Tagen, fertig optimiert

Wenn Ihnen die Zeit für manuelle Bildoptimierung fehlt oder Sie eine neue Website von Grund auf richtig aufbauen wollen, ist Netivoo der direkte Weg.

Netivoo erstellt mobiloptimierte Handwerker-Websites in rund 7 Tagen, inklusive Build-Time-Bildoptimierung, WebP-Auslieferung, CDN-Einbindung und technischem Audit nach dem Launch. Kein Plugin-Flickwerk, keine nachträglichen Korrekturen. Transparente Preise, ein fester Ansprechpartner, und Sie sehen das Ergebnis in PageSpeed Insights.

Schicken Sie uns Ihre aktuelle Website-Adresse und wir prüfen kostenlos, wo Ihre Bilder die Ladezeit bremsen. Jetzt anfragen und innerhalb von 24 Stunden eine Rückmeldung erhalten.

---

Nützliche Quellen und Werkzeuge

• TinyPNG: Schnelle manuelle Kompression von JPEG und PNG, kostenlos für kleine Chargen.
• Squoosh: Kostenloses Google-Tool für präzise Format- und Qualitätskontrolle, ideal für kritische Einzelbilder.
• PageSpeed Insights: Misst LCP, CLS und gibt konkrete Hinweise auf nicht optimierte Bilder.
• Hostinger-Tutorial: Bilder optimieren: Guter Einstieg in Formate, srcset und Lazy Loading.
• Webinteger: Bilder richtig optimieren: Praxisnahe Erklärung mit Einsparungsbeispielen.
• GeoImgr: Geo-Tags für Bilder setzen, nützlich für lokale SEO-Signale.

---

FAQ

Was ist der schnellste Weg, Bilder für eine Website zu komprimieren?

Laden Sie das Bild bei TinyPNG hoch oder öffnen Sie es in Squoosh, wählen Sie WebP als Format und exportieren Sie mit einer angemessenen Qualitätsstufe. Das dauert unter einer Minute pro Bild.

Welches Bildformat ist für Handwerker-Websites am besten geeignet?

WebP ist die erste Wahl: breite Browser-Unterstützung, deutlich kleinere Dateien als JPEG und kein sichtbarer Qualitätsverlust bei Qualitätsstufe 75–85 %.

Warum darf das Hero-Bild nicht lazy geladen werden?

Das Hero-Bild ist fast immer das LCP-Element der Seite. Lazy Loading verzögert seinen Aufbau und verschlechtert den LCP-Wert, was sich negativ auf Google-Rankings und die wahrgenommene Ladegeschwindigkeit auswirkt.

Ab wann lohnt sich ein Plugin wie ShortPixel für WordPress?

Sobald Sie regelmäßig neue Bilder hochladen, zum Beispiel nach jedem abgeschlossenen Projekt, spart ShortPixel mehr Zeit als es kostet. Für Seiten mit selten wechselnden Inhalten reicht manuelle Optimierung mit TinyPNG oder Squoosh.

Was macht Netivoo bei der Bildoptimierung anders als ein Standard-WordPress-Theme?

Netivoo integriert Bildoptimierung zur Build-Zeit statt per Laufzeit-Plugin, liefert WebP über ein CDN aus und misst den LCP-Wert nach dem Launch mit Lighthouse. Das Ergebnis sind schnelle Handwerker-Websites ohne nachträgliche Korrekturen.

Empfehlung

• Blog | Webdesign-Tipps für Handwerker in Oldenburg – Netivoo | Netivoo
• Webdesign Oldenburg | Websites für Handwerker in 7 Tagen | Netivoo | Netivoo
• Warum jeder Handwerker in Oldenburg eine professionelle Website braucht | Netivoo
• Website für Elektriker | Webdesign für Elektrobetriebe – Netivoo | Netivoo