Saltar al contenido
uencoder

Comprimir and optimize images

Reducir image archivo tamaño por choosing el derecha formatear (WebP/AVIF), adjusting quality, y resizing. Improve página cargar speed y Core Web Vitals.

  1. 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. 2
    Compresor de imágenes →

    Comprimir 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. 3
    Convertidor de formato de imágenes →

    Convertir 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 a WebP for 30% size reduction

  4. 4
    Vista previa de imagen Base64 →

    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.

Preguntas frecuentes

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.

Herramientas relacionadas