Convertidor de PNG a WebP
PNG no tiene pérdidas, pero es voluminoso para la web. WebP admite la transparencia y, a menudo, ofrece archivos mucho más pequeños para logotipos, íconos e ilustraciones. Convierta recursos PNG localmente antes de implementarlos en producción.
¿Cómo convertir PNG a WebP
1. Cargue su PNG (con o sin alfa).
2. Elige configuraciones WebP con o sin pérdidas si se ofrecen.
3. Compare el tamaño de salida con el PNG original.
4. Descargue el WebP
Ejemplos
Logotipo en un sitio de marketing
Un logotipo PNG de 120 KB puede convertirse en un WebP de 40 KB con idéntica transparencia: cargas de encabezado más rápidas.
Hoja de sprites del juego
Los sprites de colores planos se comprimen agresivamente en el modo sin pérdidas de WebP en comparación con PNG.
Gráficos de la tienda de aplicaciones
Reemplace capturas de pantalla PNG grandes en activos incluidos donde el tiempo de ejecución admite WebP.
Cuando PNG a WebP ayuda
• Cuando necesitas transparencia alfa en la web con bytes más pequeños.
• Al migrar interfaces con mucho PNG a modernas formatos.
• Cuando Lighthouse señala recursos PNG de gran tamaño.
¿Cuándo conservar PNG
• Cuando los entornos de destino solo aceptan PNG (algunos canales de correo electrónico y PDF).
• Cuando los diseñadores necesitan un intercambio de edición universal sin pérdidas.
• Cuando la compatibilidad con Safari en iOS antiguo es un requisito estricto sin alternativas.
PNG frente a WebP para recursos de interfaz de usuario
Los diseñadores exportan PNG por costumbre. Para la web de producción, WebP con transparencia frecuentemente reduce a la mitad el tamaño de la transferencia. Automatice la conversión en CI o utilice esta herramienta para activos ad-hoc.
Estrategias alternativas
Utilice conjuntos de imágenes/fuentes: WebP primero, PNG después. O detecte soporte en el lado del servidor mediante los encabezados Aceptar. No entregue WebP a clientes que no puedan decodificarlo.
Flujo de trabajo de edición
Mantenga archivos maestros PNG en repositorios de diseño. Genera WebP solo para implementar artefactos: revertir las ediciones es más fácil desde fuentes PNG sin pérdida.
Preguntas frecuentes
¿Se conserva la transparencia?
Sí, WebP admite un canal alfa similar a PNG.
Sin pérdida o ¿WebP con pérdida?
Los gráficos con colores planos a menudo se adaptan a WebP sin pérdida. Las fotos incrustadas en PNG pueden usar WebP con pérdida para tamaños más pequeños.
¿Cambiarán los colores?
El modo sin pérdida debe coincidir exactamente con PNG. El modo con pérdida puede mostrar ligeras diferencias en los gradientes.
¿Puedo usar WebP en la imagen de fondo CSS?
Sí en todos los navegadores modernos. Proporcione respaldo PNG solo si los análisis muestran tráfico heredado.
¿Procesamiento local?
Sí, los archivos nunca salen de tu navegador.
¿Mejor que SVG?
Para logotipos simples, SVG suele ser más pequeño y escala infinitamente. WebP se adapta a ilustraciones y fotografías rasterizadas con alfa.