Convierta un PNG opaco en WebP y compare el resultado

Puede valer la pena probar una PNG fotográfica como WebP para un sitio web. Puede ser una imagen de cámara exportada desde una herramienta de diseño, una escena de una habitación renderizada o un gráfico promocional aplanado. Realice una exportación por separado y compárela con el original en lugar de eliminar el PNG inmediatamente. El tamaño del archivo depende de la imagen, por lo que el ahorro útil es el que realmente mides.

La transparencia necesita aquí un cuidado especial. Aunque el formato WebP puede almacenar alfa, esta herramienta actualmente genera la salida WebP sobre un fondo blanco. Por lo tanto, una entrada transparente perderá esa área transparente en la exportación. Mantenga PNG para logotipos, recortes y superposiciones que deban ubicarse en diferentes fondos, y use esta conversión para imágenes donde un resultado opaco sea apropiado.

El ajuste preestablecido mantiene las dimensiones y comienza en 90% de calidad con el afilado desactivado. Pruebe con un archivo con texto pequeño y otro con fondo fotográfico. Inspeccione bordes finos, letras de colores y degradados suaves. Un diseño puede verse bien de un vistazo y al mismo tiempo mostrar halos de colores junto a una etiqueta cuando se muestra en el tamaño previsto.

Si PNG es una captura de pantalla de una interfaz, la legibilidad puede ser más importante que eliminar unos pocos bytes. Compare una PNG exportación o conserve la fuente cuando WebP suavice los detalles críticos. Para una fotografía grande y opaca, pruebe Ajustar dentro de los límites reales de la pantalla antes de reducir aún más la calidad. Primero reduzca los píxeles innecesarios cuando el sitio web nunca los muestre, pero conserve suficiente resolución para la ubicación prevista.

El control deslizante de calidad WebP controla la codificación con pérdida de esta exportación. Una configuración más alta no restaura los detalles que faltaban en la fuente y el mismo número no implica el mismo resultado visual en diferentes formatos. Úselo como herramienta de comparación: ajuste un poco, inspeccione el resultado y conserve la versión más pequeña que satisfaga sus propias necesidades de calidad.

PNG no utiliza ese control de calidad de la misma manera, por lo que cambiar la extensión es una elección real del flujo de trabajo. Si su PNG incluye pequeñas etiquetas de diagrama o límites de color precisos, conservar PNG puede ser la decisión correcta incluso cuando el archivo sea más grande. Este convertidor no reduce una paleta de colores PNG, no produce una configuración WebP sin pérdidas ni edita los objetos y capas dentro de un gráfico aplanado.

Descargue la imagen convertida y cárguela en una página de prueba en el sistema de su sitio web real. Confirme que el navegador recibe WebP, que el recorte mostrado es correcto y que ningún borde transparente se ha vuelto blanco inesperadamente. Véalo contra el fondo de la página, especialmente si la fuente fue diseñada para una sección oscura. La conversión debe comprobarse en contexto, no sólo en una vista previa del archivo.

Luego revise la pantalla del móvil. Un gráfico de marketing de gran tamaño puede necesitar un diseño más simple en lugar de una copia más comprimida cuando sus letras se vuelven ilegibles en un teléfono. La selección de imágenes responsivas y las dimensiones reservadas siguen siendo tareas independientes del sitio web. Una vez que la muestra sea buena, procese los archivos coincidentes juntos. Los datos de su imagen permanecen en el navegador durante esta conversión y la fuente PNG permanece sin cambios.

Por ejemplo, pruebe una marca denominativa blanca en píxeles transparentes antes de convertir cualquier recurso de marca. Una salida blanca opaca puede ocultar la marca por completo, algo que una sola comparación del tamaño del archivo pasaría por alto.