Imágenes rasterizadas en el navegador
Una imagen rasterizada es una cuadrícula de píxeles con metadatos: ancho, alto, canales de color y formato contenedor. JPEG, PNG y WebP equilibran de manera distinta compresión, fidelidad, transparencia y compatibilidad. Esta familia convierte, redimensiona, inspecciona y toma muestras de color completamente en el navegador; los bytes del archivo no se suben a un servidor.
Para crear un WebP pequeño desde una foto, pruebe De JPG a WEBP. El formato de destino depende del siguiente consumidor: un CMS antiguo, un límite de peso, un sistema de diseño con alfa o un presupuesto de rendimiento.
Formatos y canal de procesamiento
JPEG comprime fotografías con pérdidas y no tiene canal alfa. Recodificar con menos calidad elimina más información; pasar JPEG a PNG no recupera detalle perdido. PNG es sin pérdidas y admite transparencia, ideal para interfaz y capturas, aunque las fotos PNG suelen pesar más. WebP tiene modos con y sin pérdidas y suele producir archivos menores con calidad visual similar.
El proceso lee un File local, lo decodifica a bitmap, dibuja un canvas al tamaño elegido, exporta con un tipo MIME y calidad opcional, y descarga el resultado. El control de calidad afecta JPEG y WebP con pérdidas; PNG conserva el búfer del canvas. Al convertir PNG o WebP transparente a JPEG, las zonas transparentes suelen componerse sobre un fondo sólido.
Herramientas de la familia
- De JPG a WEBP y De PNG a WEBP.
- De WEBP a JPG, De PNG a JPG y De JPG a PNG.
- Redimensionar por ancho o alto, Información de imagen y Colores dominantes.
Tamaño, metadatos y límites
Indique solo ancho o alto para conservar la proporción. Reducir mejora el rendimiento; ampliar inventa píxeles y no recupera detalle óptico. Tamaño en disco y megapíxeles responden preguntas diferentes; Información de imagen los reúne. Canvas procesa píxeles, no es un archivo EXIF completo: puede aplicar orientación al mostrar, pero normalmente no conserva etiquetas GPS o de cámara.
La extracción de paleta cuenta o agrupa colores tras un posible muestreo reducido y ofrece referencias hex/RGB para CSS. Las suposiciones sRGB y el submuestreo de croma JPEG alteran los colores ganadores. Evite cadenas con pérdidas, como JPEG → WebP → JPEG; WebP 80 no equivale numéricamente a JPEG 80. Las imágenes enormes pueden agotar la memoria de la pestaña y no se esperan TIFF CMYK ni animaciones de varios fotogramas. Conserve un máster y cree una sola codificación de entrega.