Komprimieren and optimize images
Reduzieren image Datei Größe durch choosing der rechts formatieren (WebP/AVIF), adjusting quality, und resizing. Improve Seite laden speed und Core Web Vitals.
- 1
Image optimization: (1) Choose format — WebP (broad support, 30% smaller than JPEG), AVIF (50% smaller, newer), PNG (lossless, for graphics), JPEG (photos, legacy). (2) Set quality — 80-85 for photos (visually lossless), 90+ for graphics with text. (3) Resize to display dimensions — don't ship a 4000px image for a 400px display. (4) Use responsive images (srcset) for different screen sizes. (5) Lazy-load images below the fold.
- 2 Bild-Kompressor →
Komprimieren an image. Choose the output format (WebP for broad support, AVIF for smallest size), quality level (80-85 for photos), and optionally resize. The tool shows before/after size and compression ratio. Target: <100KB for hero images, <50KB for thumbnails.
- 3 Bildformat-Konverter →
between formats without compression — useful when you need a specific format but want to control quality separately. Convert PNG to WebP for photos, keep PNG for graphics with transparency. Convert JPEG in WebP for 30% size reduction konvertieren
- 4 Base64-Bildvorschau →
Preview the compressed image as base64 — useful for inline images (data URIs) in HTML/CSS or for verifying the compression result. Note: base64 increases size by 33% — use it only for small images (<4KB) where the HTTP request overhead exceeds the base64 inflation.
Häufige Fragen
- WebP vs AVIF — which should I use?
- AVIF produces 10-20% smaller files than WebP but has slower encoding and less browser support (Safari < 16.4). WebP is universally supported in modern browsers. Use AVIF with a WebP fallback (picture element): <picture><source type="image/avif"><source type="image/webp"><img></picture>. For simplicity, use WebP alone.
- What quality level should I choose?
- For photographs: 80-85 is visually lossless and 50-70% smaller than quality 100. For graphics with text or sharp edges: use PNG (lossless) or WebP at 90+ quality. Always compare visually — quality numbers are not comparable across formats or tools. Use a comparison tool to find the lowest acceptable quality.