Cómo comprimir imágenes para la web sin arruinarlas

Pérdida versus compresión sin pérdida

Cada formato de imagen cae en una de dos familias. La compresión sin pérdidas encoge un archivo al describir los mismos píxeles de manera más eficiente, la forma en que un archivo zip encoge un documento. Cuando la imagen se abre de nuevo, cada píxel es exactamente lo que era. PNG es el formato sin pérdidas familiar para la web, y es excelente para capturas de pantalla, logotipos, iconos, diagramas y cualquier cosa con bordes afilados, colores planos o texto.

La compresión perdida va más allá al tirar el detalle del ojo humano es poco probable que se pierda. JPEG, por ejemplo, divide la imagen en bloques pequeños, la convierte en información de frecuencia y mantiene un fino detalle de alta frecuencia sólo con la precisión que la configuración de calidad elegida permite. También almacena color a una resolución más baja que el brillo, porque nuestros ojos son más sensibles a la luz y a la oscuridad que a los cambios sutiles en el tono. Para las fotografías, que están llenas de textura gradual y ruido, la compresión con pérdidas produce archivos dramáticamente más pequeños que la compresión sin pérdidas nunca podría.

La regla práctica es simple: utilizar formatos con pérdidas para fotografías e imágenes realistas, y formatos sin pérdidas para gráficos, capturas de interfaz y cualquier cosa donde los bordes nítidos o colores exactos importan. Ejecutar una captura de pantalla a través de compresión JPEG pesada produce halos smudgy alrededor de texto, mientras que el ahorro de una foto de vacaciones como PNG puede producir un archivo varias veces más grande de lo que necesita ser.

Elegir entre JPG, PNG, WebP y AVIF

JPEG sigue siendo el formato de foto más compatible universalmente. Cada navegador, cliente de correo electrónico, sistema operativo y editor de imágenes lo entiende. No admite la transparencia, y en los ajustes de baja calidad muestra artefactos bloqueados, pero en los ajustes moderados es un valor predeterminado confiable.

PNG es totalmente transparente y sin pérdidas, lo que la convierte en la opción estándar para logos, ilustraciones con color plano y capturas de pantalla. Su debilidad es el contenido fotográfico, donde el tamaño de los archivos globo.

WebP fue diseñado para la web y soporta modos perdidos y sin pérdidas, así como transparencia. Para la misma calidad visual, un WebP con pérdidas es generalmente notablemente menor que un JPEG equivalente, y todos los navegadores principales actuales lo soportan. Para la mayoría de los sitios web hoy en día, WebP es la mejor opción diaria para fotos y muchos gráficos.

AVIF es más reciente y a menudo comprime aún más eficientemente que WebP, especialmente en tamaños de archivo más bajos, y también admite transparencia. Las compensaciones son que la codificación es más lenta y que algunos software y dispositivos antiguos todavía no pueden abrirlo. Un enfoque común es servir AVIF o WebP a los navegadores modernos y mantener una copia de seguridad JPEG donde importa la compatibilidad amplia, como imágenes que serán compartidas por correo electrónico o descargadas por los visitantes.

Ajustes de calidad: encontrar el punto dulce

El deslizador de calidad en un codificador con pérdidas no es un porcentaje de calidad que mantiene. Es un control sobre cuán agresivamente se descarta el detalle, y su efecto no es lineal. Mover de 100 a 90 generalmente corta el tamaño del archivo sustancialmente sin casi ningún cambio visible. Mover de 90 a 75 cortes de tamaño de nuevo y todavía es invisible para la mayoría de las fotos en los tamaños normales de visualización. Por debajo de aproximadamente 50, los artefactos comienzan a aparecer en áreas lisas como cielos y piel, y alrededor de bordes afilados.

No hay un número universal mejor, porque diferentes imágenes responden de manera diferente. Una ajetreada foto de follaje esconde bien los artefactos, mientras que un retrato contra un gradiente suave los revela rápidamente. El método confiable es comparar. Empieza alrededor de 75, mira el resultado en el tamaño que aparecerá realmente en la página, luego baja hasta que notes una diferencia y vuelve a subir una muesca. Compara siempre con el original en lugar de juzgar la versión comprimida por sí solo.

Evita recomprimir una imagen que ya ha sido guardada como un archivo con pérdidas varias veces. Cada ronda de codificación con pérdidas arroja un poco más de detalle, y el daño se acumula. Siempre que sea posible, comienza desde el original de más alta calidad que tenga.

Cambiar el tamaño de las cosas más que cualquier control deslizante

El mayor ahorro por lo general proviene de la reducción de las dimensiones de píxeles, no de la configuración de calidad. Tamaño de archivo escala aproximadamente con el número de píxeles, y el recuento de píxeles crece con el cuadrado de la anchura. Reducir a la mitad el ancho de una imagen elimina aproximadamente tres cuartas partes de sus píxeles.

Aquí hay un ejemplo trabajado. Una foto típica de 12 megapíxeles mide 4,032 por 3,024 píxeles, que es 12,192,768 píxeles. Supongamos que aparecerá en una columna de post blog que nunca es más grande que 800 píxeles CSS. Para mirar con agudeza en las pantallas de alta densidad, que utilizan dos píxeles de dispositivo por píxel CSS, puede exportarlo a 1.600 píxeles de ancho. Mantener las mismas proporciones 4:3, que da 1,600 por 1.200 píxeles, o 1.920.000 píxeles. Eso es alrededor del 15.7 por ciento del recuento de píxeles original, lo que significa que aproximadamente 84 por ciento de los píxeles se han ido antes de que la compresión incluso comienza. Sin comprimir, a tres bytes por píxel, el original contiene alrededor de 36,6 megabytes de datos de color y la versión redimensionada alrededor de 5,8 megabytes. Aplicar compresión WebP o JPEG a una calidad equilibrada por encima de eso, y el archivo final es una pequeña fracción de lo que el teléfono produjo.

Un buen hábito es decidir el tamaño más grande en el que se mostrará una imagen, duplicarla para pantallas de alta densidad, y nunca subir nada más amplio. Cargar una imagen de 4.000 píxeles y permitir que el navegador lo reduzca a 800 píxeles desperdicia el ancho de banda en cada vista de página.

Tratar con fotos de HEIC desde iPhones

Los iPhones recientes guardan fotos por defecto en HEIC, un formato basado en el estándar de formato de archivo de imagen de alta eficiencia. HEIC comprime fotos de manera muy eficiente, lo que ahorra espacio de almacenamiento en el teléfono, pero el soporte fuera de los dispositivos de Apple es desigual. Muchos sitios web, sistemas de gestión de contenido, instalaciones de Windows antiguas y la mayoría de navegadores distintos de Safari no pueden mostrarlo directamente.

Antes de publicar una foto para iPhone, conviértala a un formato web. JPEG es la opción más segura para la compatibilidad, mientras que WebP ofrece archivos más pequeños para su uso en un sitio web. También puedes cambiar la configuración de la cámara iPhone a la Compatible para que las nuevas fotos se capturen como JPEG, aunque eso utiliza más almacenamiento en el teléfono.

Metadatos: los datos ocultos dentro de tus fotos

La mayoría de las fotos llevan metadatos junto a los píxeles. El tipo más común, EXIF, puede grabar el modelo de cámara o teléfono, lente, configuración de exposición, la fecha y hora en que se tomó la foto y, si los servicios de localización estaban activados, coordenadas GPS precisas. El software de edición puede agregar tus propios datos XMP, y algunos archivos tienen perfiles de color y miniaturas.

Esta información es útil en una biblioteca de fotos personal, pero rara vez se necesita en una página web pública. Añade peso, y lo más importante es que puede revelar dónde vives o dónde se tomó una foto de tus hijos. Algunas plataformas eliminan metadatos automáticamente cuando se carga, pero muchos sitios web y servicios de intercambio de archivos publican el archivo original exactamente como lo envió. Si no estás seguro, quítalo tú mismo antes de subirlo. Una advertencia: si una imagen depende de su perfil de color integrado para verse correctamente, comprueba el resultado después de eliminar metadatos, porque los colores pueden cambiar ligeramente en algunas pantallas.

Un práctico flujo de trabajo con herramientas ToolWorld

El compresor de imágenes ToolWorld maneja el trabajo principal en tu navegador. Usted elige un formato de destino de JPEG, PNG, WebP o AVIF, ajusta el control deslizante de calidad o elige un ajuste rápido como el archivo más pequeño, equilibrado o más detalle, y establece un ancho máximo para cambiar el tamaño. Muestra el tamaño del archivo original junto al tamaño de salida y dimensiones codificadas para que pueda comparar antes de descargar. Para PNG se aplica optimización sin pérdidas, por lo que el deslizador de calidad no se aplica.

Para fotos de iPhone, el convertidor HEIC a JPG convierte imágenes HEIC o HEIF en JPG, PNG o WebP localmente, con un control de calidad, un ancho máximo opcional, rotación y un color de fondo para la salida JPEG. Funciona en lotes y puede empaquetar los resultados como una sola descarga ZIP.

Antes de publicar cualquier cosa personal, el removedor de metadatos de imagen le permite inspeccionar las etiquetas detectadas en archivos JPEG, PNG y WebP y eliminar metadatos estándar sin volver a codificar los píxeles, por lo que la calidad de la imagen no se toca. También soporta lotes con una descarga ZIP. Una orden sensible es convertir, luego cambiar el tamaño y comprimir, luego comprobar metadatos en el archivo final. Hecho una vez por imagen, esa rutina mantiene tus páginas rápidas y tus datos privados fuera de la web pública.