PNG vs JPEG vs WebP vs AVIF: elegir un formato de imagen a propósito

Un formato sin pérdida archiva cada píxel con exactitud; uno con pérdida descarta detalle que el ojo apenas registra a cambio de un archivo mucho más pequeño. La elección no es puritanismo de calidad: es para qué sirve el archivo—un máster que volverás a editar o un artefacto de entrega que se envía una vez.

Una advertencia honesta sobre las canalizaciones de navegador: el codificador Canvas no ofrece un interruptor WebP sin pérdida, así que en herramientas locales “salida sin pérdida” significa en la práctica PNG. Un espacio de trabajo que ofrece un nivel sin pérdida falso te está diciendo algo sobre su honestidad.

• Sin pérdida lo conserva todoSin pérdida (PNG y los modos sin pérdida de WebP y AVIF): la decodificación reproduce los píxeles originales bit a bit, así que nada se degrada por muchas veces que se abra y regrave el archivo.
• Con pérdida gasta detalleCon pérdida (JPEG y los modos con pérdida de WebP y AVIF): el codificador modela la visión humana y descarta lo que predice que no echarás de menos—y ese ahorro es permanente, no una capa que se pueda retirar después.
• Másteres vs entregasLa división práctica: guarda los másteres sin pérdida, entrega con pérdida y nunca uses una exportación con pérdida como fuente de la siguiente edición.

Los formatos de compresión se especializan. La transformada de coseno de JPEG adora los degradados fotográficos suaves y destroza los bordes nítidos; el deflate de PNG adora las zonas de color plano y las líneas exactas e infla las fotografías ruidosas; WebP y AVIF toman prestados trucos de los códecs de vídeo que manejan ambos razonablemente bien.

La pareja equivocada cuesta en ambas direcciones: un PNG fotográfico puede pesar de cinco a diez veces más que un JPEG equivalente, mientras que un logotipo guardado como JPEG desarrolla halos que ningún aumento de calidad elimina por completo.

• FotografíasFotografías y degradados: JPEG a una calidad moderada es mucho más pequeño que PNG, y la pérdida es invisible al tamaño de entrega—es exactamente la carga para la que se crearon los formatos con pérdida.
• Gráficos planosLogotipos, iconos, capturas de interfaz y dibujo lineal: las zonas planas y los bordes nítidos se comprimen perfectamente en PNG, mientras que JPEG deja un ringing visible alrededor de cada transición dura.
• Contenido mixtoContenido mixto como una captura con una foto dentro: prueba ambos—WebP suele caer entre los dos formatos antiguos, pero decide la mezcla de píxeles, no la etiqueta.

Si el diseño necesita que el fondo se vea a través, el formato debe llevar un canal alfa. PNG, WebP y AVIF admiten transparencia; JPEG no—aplanar la imagen sobre un fondo sólido es obligatorio, no opcional.

• Alfa es por píxelUn canal alfa almacena la opacidad por píxel junto al color, y eso es lo que permite que un logotipo se asiente limpiamente sobre cualquier fondo en lugar de sobre un rectángulo blanco.
• JPEG aplanaConvertir un PNG transparente a JPEG sustituye el alfa por un mate sólido; elige ese color de mate deliberadamente, porque se vuelve permanente en los píxeles.
• Elige el mateConvertidor de formato de imagen declara este aplanado y pide el color de fondo a usar, de modo que la compensación es explícita y no se descubre después en el diseño.

WebP decodifica en todos los navegadores actuales; AVIF decodifica en Chrome, Firefox y Safari actuales, pero no en navegadores antiguos ni en todas las herramientas posteriores. El soporte es una propiedad del destino, no del formato—comprueba la canalización real antes de comprometer todo un juego de entrega.

Para entrega web, la respuesta estándar es una cadena de reserva: sirve AVIF o WebP con un JPEG o PNG de respaldo mediante el elemento picture, de modo que los navegadores modernos cobren el ahorro y todo lo demás siga renderizando.

• El destino decideEl soporte de codificación va por detrás del de decodificación: algunos navegadores muestran WebP pero no pueden codificarlo mediante Canvas, así que un conversor debe sondear la capacidad en lugar de asumirla.
• La codificación necesita sondeoConvertidor de formato de imagen ejecuta exactamente ese sondeo por adelantado y desactiva la exportación WebP donde falta la codificación, en lugar de entregarte en silencio un PNG con nombre .webp.
• AVIF con honestidadLa entrada AVIF solo se acepta cuando el navegador realmente la decodifica; cuando no puede, el espacio de trabajo lo dice y te pide exportar primero a PNG o JPEG, en lugar de fiarse de la firma del archivo.

Cada guardado con pérdida vuelve a cuantificar una imagen ya aproximada, así que los artefactos se apilan: el tercer guardado JPEG de la misma foto es visiblemente peor que el primero con el mismo ajuste de calidad. Convierte una sola vez, al final de la canalización, desde la mejor fuente que tengas.

La regla de acumulación también fija el orden de las operaciones: cada remuestreo y cada recodificación es un evento de pérdida independiente, así que la canalización más barata es la que tiene menos pasos con pérdida.

• Convierte una vezEdita en un máster sin pérdida y exporta la copia con pérdida como último paso; cada guardado intermedio con pérdida es una generación de daño que no se puede deshacer.
• Efectos secundariosUna recodificación Canvas también descarta el perfil de color ICC, los metadatos EXIF y cualquier animación—un GIF entra como su primer fotograma, y el espacio de trabajo lo declara junto al archivo.
• Conserva el originalConserva el original tras la conversión; el archivo convertido es un artefacto de entrega, no un máster, y convertir de vuelta nunca restaura lo que se gastó.

El consejo sobre formatos es una hipótesis hasta que hablan los bytes. Convertidor de formato de imagen informa de los tamaños en bytes antes y después exactamente como se produjeron, con calidad JPEG y WebP ajustable de 0,50 a 0,95 (0,85 por defecto), así que la compensación es un número en pantalla y no folclore.

• Convierte el archivo realConvierte el archivo real, no una muestra: el ahorro de bytes depende del contenido real, y el informe muestra ambos tamaños uno junto al otro.
• Los píxeles son la palancaCuando los bytes aún no caben en el presupuesto, los píxeles son la siguiente palanca: reducir a la mitad ancho y alto elimina aproximadamente tres cuartas partes de ellos, a menudo una victoria mayor que cualquier cambio de formato.
• Límites conocidosAmbas herramientas aceptan archivos de hasta 12 MiB con lados de hasta 8.192 píxeles, y el redimensionador puede bloquear la relación de aspecto para que una dimensión siga a la otra.