Bilder für SEO komprimieren — Kostenlos, schnell & privat
Bilder sind meistens der Hauptgrund, warum eine Seite langsam lädt, und der Largest Contentful Paint (LCP) ist oft genau das Hero-Bild eines Marketing-Textes oder Artikels. Googles Core Web Vitals wirken direkt auf das SEO-Ranking — ein langsamer LCP, ein instabiler CLS oder ein träger INP kosten alle Sichtbarkeit. Bilder gut zu komprimieren gehört damit zu den SEO-Optimierungen mit dem größten Hebel überhaupt. Bevor du loslegst, lohnt sich ein Blick auf das tatsächliche Ausmaß: Füg deine URL in den Bildgewicht-Analyzer der Seite ein, um zu sehen, wie viele Bilder die Seite lädt, wie viel sie insgesamt wiegen und wie viel eine Komprimierung realistisch herausholen würde.
Das Minimum für 2026: moderne Formate (AVIF, WebP) mit JPEG-Fallback ausliefern, responsive Größen via srcset bereitstellen, und das LCP-Bild auf Mobilgeräten unter 100 KB halten. Nichts davon braucht ein bezahltes CDN — MiniPx erzeugt das komplette Set clientseitig, und du lädst es zu jedem beliebigen statischen Hosting hoch, das du ohnehin schon nutzt.
Formatwahl 2026
AVIF liefert die beste Kompressionsrate (typischerweise 30-50% kleiner als ein gleichwertiges JPEG). WebP ist der sicherere Fallback mit breiterer Unterstützung. JPEG bleibt der universelle Fallback für sehr alte Browser. Die richtige Strategie ist, alle drei über <picture> auszuliefern und den Browser das am besten unterstützte Format wählen zu lassen.
Responsive Größen via srcset
Ein 4K-Hero-Bild an ein Smartphone zu schicken ist Verschwendung. Mit srcset bietest du Browsern mehrere Größen an (typischerweise 150 / 640 / 1280 / 2560 px breit), und der Browser wählt anhand von Viewport und DPR die richtige aus. Der Responsive-Set-Generator von MiniPx erzeugt die komplette Matrix aus einer einzigen Eingabedatei in einem Schritt.
Jenseits der Formate: LCP-Optimierungen
Sind deine Bilder gut komprimiert, liegen die verbleibenden LCP-Gewinne hier: das Hero-Bild vorladen mit <link rel="preload" as="image">, fetchpriority="high" auf dem <img>-Tag setzen, explizite width- und height-Attribute vergeben, um CLS zu verhindern, und bei langsamem Hosting über ein CDN ausliefern. Nichts davon braucht ein spezielles Bild-Tool — das ist HTML-Hygiene. Ein kleiner Feinschliff, der das Bild selbst betrifft: Gib dem reservierten Platz eine background-color, die zum dominanten Farbton des Fotos passt — den exakten Hex-Wert aus dem Bild entnehmen — damit der Platzhalter nicht weiß aufblitzt, bevor das Hero-Bild erscheint.
Der MiniPx + Netlify/Vercel-Workflow
Nutze MiniPx Pro, um ein Responsive-Set zu erzeugen (4 Größen × 4 Formate = 16 Dateien), benannt nach dem Muster hero-{width}.{ext}. Leg die ZIP-Datei in das public/img/-Verzeichnis deines Repos. Referenziere sie über <picture> mit drei <source>-Tags (AVIF, WebP, JPEG) plus den passenden srcset- und sizes-Attributen. Das CDN von Netlify oder Vercel liefert sie global aus. Kosten: null. Performance: meist besser als bei Drittanbieter-Bild-CDNs, weil kein zusätzlicher Round-Trip anfällt.