Última actualización: 11 de septiembre

Optimiza imágenes sin pérdida de calidad en Rust con Oxipng

Tim Koschützki

Cofundador · Berlín, Alemania ·

Las páginas de carga rápida se sienten ágiles, consumen menos ancho de banda y se posicionan mejor en las búsquedas; sin embargo, las imágenes suelen ser los recursos más pesados de un sitio. La optimización de imágenes sin pérdida resuelve eso sin degradar la calidad visual. En este DevTip, aprenderás a lograrlo con Oxipng, una herramienta de Rust ultrarrápida para la compresión de PNG.

Por qué importa la optimización de imágenes

Reducir el tamaño de los archivos de imagen se traduce en tiempos de carga más rápidos, facturas de ancho de banda más bajas y mejores Core Web Vitals. Cuando la compresión es sin pérdida, conservas una fidelidad píxel a píxel, algo crítico para los recursos de interfaz, los iconos y los gráficos de archivo.

Oxipng: optimización de PNG rápida y eficiente

Oxipng es un optimizador basado en Rust que mejora utilidades heredadas como OptiPNG al aprovechar la concurrencia moderna y ciertos ajustes algorítmicos.

Características principales

Compresión PNG sin pérdida
Multihilo para usar múltiples núcleos de CPU
Heurísticas automatizadas que eligen la configuración óptima
CLI y API de biblioteca sencillas para automatizar con facilidad
Reducciones de tamaño que dependen de la imagen y de su compresión existente

Requisitos del sistema

Rust 1.74.0 o posterior (para compilar desde el código fuente)
Compilar sin la opción --release puede ser muy lento; prefiere compilaciones de release para uso en producción

Instala Oxipng

Puedes instalar Oxipng con el gestor de paquetes de Rust o con gestores de paquetes de sistema comunes:

# Via cargo (rust's package manager)
cargo install oxipng

# Via package managers
# On distributions that provide an oxipng package (otherwise use cargo above)
apt-get install oxipng
# For macOS (using homebrew)
brew install oxipng

Optimiza un solo PNG

oxipng -o 4 image.png

La opción -o define el nivel de optimización (0–6). Los niveles más altos se esfuerzan más por exprimir bytes adicionales, lo que consume más tiempo de CPU. El nivel 4 suele ser un buen equilibrio.

Controla el multihilo

Oxipng usa múltiples núcleos de CPU de forma predeterminada. Limita el número de hilos cuando compartas una máquina de compilación:

# Use at most four threads
oxipng -o 4 --threads 4 image.png

Usa --pretend (-P) para medir el ahorro potencial sin escribir archivos. Mide el rendimiento con tus propios recursos antes de elegir un nivel de optimización para hooks de commit o CI/CD.

Uso avanzado

Procesa una carpeta por lotes

Puedes combinar find con oxipng para optimizar todos los archivos PNG de un directorio y sus subdirectorios:

find ./images -type f -name "*.png" -exec oxipng -o 4 {} +

Este comando encuentra todos los archivos que terminan en .png dentro del directorio ./images y ejecuta oxipng sobre ellos con el nivel de optimización 4 (-o 4). Esto modifica los archivos en el lugar; conserva una copia de seguridad de los originales.

Conserva los metadatos

Oxipng no solicita la eliminación de metadatos de forma predeterminada. En cambio, --preserve mantiene los permisos y las marcas de tiempo de los archivos cuando es posible. Para conservar esos atributos de archivo:

oxipng -o 4 --preserve image.png

Integra Oxipng en tu código Rust

También puedes usar Oxipng como biblioteca dentro de tus aplicaciones Rust. Primero, agrégalo como dependencia en tu Cargo.toml:

[dependencies]
oxipng = "9.0" # Check crates.io for the latest version

Luego, puedes llamar a sus funciones de optimización mediante programación:

use oxipng::{optimize, InFile, OutFile, Options};
use std::path::PathBuf;

fn main() -> Result<(), oxipng::PngError> {
    let input_path = PathBuf::from("input.png");
    // OutFile::None performs a dry run; from_path writes to a separate file.
    let output_path = OutFile::from_path(PathBuf::from("output.png"));
    // Use optimization level 4
    let options = Options::from_preset(4);

    optimize(&InFile::Path(input_path), &output_path, &options)?;
    println!("Optimization successful!");

    Ok(())
}

Este ejemplo optimiza input.png con el ajuste preestablecido de nivel 4 y guarda el resultado en output.png. Se incluye manejo de errores para mayor robustez.

Aplicaciones en el mundo real

Desarrollo web: optimiza automáticamente los recursos PNG durante el proceso de compilación para tener sitios web más rápidos.
Desarrollo de videojuegos: reduce el tamaño de los atlas de texturas y de los elementos de interfaz sin pérdida visual.
Pipelines de CI/CD: agrega un paso de optimización para asegurar que todos los PNG incluidos en los commits estén comprimidos.
Sistemas de gestión de contenidos (CMS, por sus siglas en inglés): integra Oxipng para optimizar sobre la marcha las imágenes subidas por los usuarios.

Usa Transloadit para la optimización multiformato

Aunque Oxipng es excelente para los PNG, quizá necesites una solución que gestione varios formatos como JPEG, GIF, WebP y SVG. El Robot 🤖 /image/optimize de Transloadit ofrece una optimización de imágenes eficiente y compatible con esos formatos. Puede reducir el tamaño de los archivos de forma significativa (a menudo hasta en un 80 %) manteniendo la calidad visual, y gestiona automáticamente la detección de formato y los ajustes de optimización. Se integra con facilidad mediante la REST API o los SDK.

Ya sea que integres Oxipng directamente en tus proyectos de Rust o que uses un servicio alojado como Transloadit para admitir más formatos, la optimización de imágenes sin pérdida es una forma sencilla de mejorar el rendimiento. Prueba Oxipng y haz que tus PNG sean más ligeros hoy mismo.