Técnicas para exprimir imágenes por todo lo que vale

Las dimensiones de una imagen en pantalla se miden en píxeles: ancho y alto.

La calidad de una imagen está determinada por factores menos tangibles: composición, estado de ánimo, estilo, contenido. Pero nada de eso importa si la gente se impacienta esperando que se descargue el archivo.

Imágenes web cambiar el tamaño del archivo cuando se comprime. Los archivos más pequeños se descargan más rápido, lo que mejora la experiencia de navegación.

Pero las imágenes claras también mejoran la experiencia. ¿Cuánta compresión deberíamos aplicar y qué tipo de compresión? ¿Existen alternativas a estas desordenadas compensaciones?

Aquí analizamos algunos hechos sorprendentes sobre preparar archivos de imagen para la web.

Hacer que las páginas se carguen rápidamente es crucial para mantener la atención de los visitantes. Estos usuarios son personas volubles, que se decepcionan fácilmente si no obtienen resultados inmediatos. Cuando hacen clic en un enlace, quieren el objetivo de inmediato.

Uno de los mayores cuellos de botella en las páginas web es el tamaño y la cantidad de imágenes. La solución obvia es usar menos imágenes. Pero otras técnicas pueden ayudarnos a aprovechar al máximo cada píxel.

Los píxeles son información

El viejo cliché de que una imagen vale más que mil palabras es cierto. Piense en un píxel (abreviatura de «elemento de imagen») como una unidad de información.

Más píxeles significan más datos, lo que afecta tanto la visualización como el remuestreo de una imagen. Así como más palabras pueden hacer que un párrafo sea más descriptivo, más píxeles pueden hacer que una imagen sea más informativa. (Por supuesto, usando el derecho palabras conduce a un mejor párrafo, al igual que el uso de los píxeles correctos conduce a una mejor imagen).

Foto cortesía de Jan Busby.

Las imágenes más pequeñas no solo ocupan menos espacio, cuentan menos de una historia. Arriba, la misma imagen en tres tamaños diferentes se vuelve cada vez más difícil de «leer».

La foto más grande muestra claramente las pestañas, los dientes y los mechones de cabello de la modelo. La foto de tamaño mediano pierde esos detalles. ¿Qué tan largas son esas pestañas? Ella esta sonriendo? Es difícil de contar. La foto más pequeña todavía se parece a una persona, pero solo con algo de imaginación. Una imagen de un rostro humano con menos de 400 píxeles suele ser irreconocible.

Aunque las imágenes pequeñas son más difíciles de ver, su tamaño no siempre es un problema. Los iconos simples con mensajes simples no necesitan muchos píxeles. Es posible que se necesiten muchos píxeles para mostrar el retrato de una persona: su expresión, características, vestimenta y antecedentes. Pero un enlace en miniatura al siguiente retrato de una serie solo tiene una cosa que decir.

La pregunta es, ¿cuál es la menor cantidad de píxeles necesarios para comunicar «Haga clic aquí para ver la siguiente imagen»?

Arriba, cada una de las flechas comunica «Siguiente». Los gráficos A y B son muy legibles y transmiten el mismo mensaje, pero el gráfico A usa cuatro veces más píxeles para decir lo mismo.

En el otro extremo, el gráfico E no es tanto una flecha como una mancha gris y negra. No tiene suficientes píxeles (es decir, suficiente información) para ser una forma reconocible.

Si los gráficos A y B usan más píxeles de los necesarios y E no se comunica, entonces los gráficos C y D tienen suficientes píxeles para sugerir una forma que apunta hacia la derecha. Sesenta y cuatro píxeles son apenas suficientes para crear una forma de flecha (o para jugar Space Invaders).

El objetivo al dimensionar una imagen, entonces, es hacerla lo suficientemente grande en tamaño de archivo para contar una historia y lo suficientemente pequeña para descargarla rápidamente.

Encontrar el tamaño de archivo «ideal»

Muchos factores afectan la legibilidad (o la claridad de la información expresada en píxeles): contraste, tema, experiencia del fotógrafo o artista, iluminación, detalles, ruido de fondo y espacio disponible en la página. Todos ellos determinan qué tan pequeña o grande debe ser una imagen.

Al final, elegir el tamaño de imagen correcto es una cuestión de criterio. Pero la compresión es más que una compensación entre la calidad de la imagen y el tamaño del archivo. Comprender cómo funcionan las diversas formas de compresión puede afectar la forma en que prepara sus imágenes.

Técnicamente, una imagen digital es un conjunto de píxeles dispuestos en una cuadrícula llamada mapa de bits. En un mapa de bits sin comprimir, cada píxel tiene su propia descripción: el píxel n. ° 1 tiene una mezcla particular de rojo, verde y azul; el píxel n. ° 2 tiene una mezcla diferente; y así.

Los algoritmos de compresión reconstituyen un mapa de bits, utilizando menos información para describir el mismo número de píxeles. La mayoría de las imágenes de la web pertenecen a uno de estos dos tipos de compresión: JPG o LZW (Lempel-Ziv-Welch, llamado así por sus inventores).

LZW aborda tanto la calidad de imagen como el tamaño de archivo

GIF y 8 bits PNG las imágenes utilizan compresión LZW para minimizar el tamaño del archivo. LZW agrupa colores idénticos en una imagen por fila.

Un archivo en este formato tiene una lista precisa de todos los colores que contiene. En lugar de registrar los valores de rojo, verde y azul para cada fila contigua de píxeles, esta paleta de colores permite que el archivo solicite el «color n. ° 1».

Arriba, la compresión LZW asigna un color a 15 píxeles seguidos. Sin la compresión LZW, cada píxel necesitaría su propia información de color. La información redundante aumenta el tamaño del archivo. Pero LZW solo es efectivo cuando las filas contienen muchos colores idénticos consecutivos.

Arriba, el grupo superior de píxeles tiene muchas interrupciones. El algoritmo de compresión no puede pasar más de dos o tres píxeles sin tener que crear un nuevo grupo de colores. Debido a que cada grupo debe registrarse en el archivo, se crean ocho registros en los archivos GIF y PNG.

El segundo grupo es mucho mejor: solo cuatro grupos de colores concurrentes significan la mitad de los registros en un archivo GIF o PNG.

Como resultado, la compresión GIF funciona mejor en horizontal que en vertical. Si tiene la opción, haga que los detalles sean horizontales. Esto es incluso más importante que la dimensión general: una imagen estrecha con rayas horizontales tiende a comprimirse mejor que una imagen ancha con rayas verticales. Con la compresión LZW, lo que cuenta son los detalles.

Arriba, guardar en GIF hace una gran diferencia cuando la imagen se gira 90 °: las rayas horizontales requieren solo el 16% de los bytes requeridos por las rayas verticales.

Se dice que LZW es «sin pérdidas» porque el formato en sí no altera la imagen. JPG es diferente.

JPG Clumps Detalles complicados

JPG funciona mejor para fotografías en vivo, ya que fue diseñado. Este esquema de compresión agrupa los píxeles en grupos de alrededor de 8 × 8 mezclando ligeramente sus colores.

Más compresión significa que los píxeles en un grupo de 64 píxeles se volverán más similares. Luego, JPG intenta relacionar cuatro grupos de 8 × 8 píxeles entre sí. Luego, agrupa esos grupos en otros 2 × 2, y así sucesivamente. Esta técnica se denomina compresión «con pérdida» porque introduce cambios en el archivo.

Los cambios que la compresión JPG introduce en las imágenes se denominan artefactos. Naturalmente, más artefactos producen una mejor compresión pero una calidad de imagen más pobre.

Arriba, un JPG guardado al 0%, o compresión completa, hace que sus artefactos grumosos sean obvios. Los bordes duros y el fuerte contraste son los primeros signos de JPG. Por ejemplo, el borde de la montaña contra la nube pierde el enfoque y la sombra de la derecha “salta” al borde del grupo conveniente de 8 × 8 más cercano.

Afortunadamente, la mayoría de las fotos retienen suficiente información para minimizar el problema. Las personas son buenas para reconocer formas, incluso si las formas están ligeramente distorsionadas.

El truco del 19% de Photoshop

Aquí hay un consejo para los usuarios de Photoshop: la función «Guardar para Web» de Photoshop tiene dos partes que cambian repentinamente la compresión. Imagen → Guardar para Web le permite elegir la cantidad de compresión como un porcentaje: 0% es el tamaño de archivo más bajo, 100% el más alto. La diferencia entre la calidad y el tamaño del archivo se vuelve más pronunciada entre el 19 y el 20%.

Observe la caída repentina en el tamaño del archivo en la ilustración anterior. Si la calidad de la imagen es menos importante para usted que el tiempo de descarga, comprimir no más del 19% logrará la mejor calidad para el tamaño más bajo. Pero si la calidad de la imagen es más importante, entonces guardar un JPG en no más bajo del 20% logra el tamaño más bajo para la mejor calidad. Encontrará un punto similar en alrededor del 30 al 32%, aunque menos drástico.

Las diferencias en esta imagen de 100 × 100 son solo unos pocos bytes. Pero los ahorros se acumulan, especialmente en fotos más grandes.

Sprites CSS

Al ser archivos, todas las imágenes de una página web deben solicitarse al servidor. Esas solicitudes le dan al servidor trabajo adicional que hacer. Si tiene muchas imágenes pequeñas (íconos, por ejemplo) que tienen una paleta de colores similar, entonces los sprites CSS pueden mejorar el tiempo de carga.

Un sprite CSS es un archivo único que contiene muchas imágenes. Utilizando la width, height y background-position propiedades en CSS, puede hacer que las secciones del archivo aparezcan en divs, enlaces y otros elementos HTML. Entonces, un solo archivo cumple múltiples roles en la página. ¿La ventaja? Solo un archivo para descargar. ¿La desventaja? Requiere un poco de planificación.

Los íconos de arriba (y los de esta oración) provienen de un solo archivo: . CSS pondrá una imagen y sus dimensiones en un , pero cada elemento debe reposicionarse para que encaje. Utilizando la :hover El pseudo-selector hace que las matemáticas valgan la pena, porque los sprites pueden mejorar los enlaces y otros elementos al pasar el mouse. Pruébelo a continuación:

Como puede ver, la misma imagen proporciona dos estados para los cuatro iconos. El único truco consiste en preparar el archivo gráfico de antemano y averiguar las coordenadas de cada icono.

(Los iconos de «seda» son cortesía de FamFamFam.)

En el momento de escribir estas líneas, tanto Yahoo! y Amazonas utilizar sprites para sus etiquetas de navegación que descargan con frecuencia.

Elegir el tamaño de archivo correcto

No todos los píxeles de una imagen son críticos, pero la negligencia del diseñador con respecto al tamaño del archivo a menudo aumenta con la cantidad de imágenes en la página.

Una imagen que podría ser un 5% más pequeña no es una preocupación. Dos imágenes no son una preocupación mayor. Pero, ¿qué pasa con cinco imágenes? ¿Diez? ¿En qué momento el diseñador debería empezar a preocuparse por la compresión de imágenes? Todo el mundo tiene un umbral diferente. A algunos no les importa en absoluto.

Es difícil preocuparse cuando unos pocos kilobytes adicionales no tienen consecuencias. Pero ignorar la compresión se convierte en un problema gradualmente más serio que ralentiza los sitios web y aleja a los visitantes a largo plazo.

Escrito exclusivamente para Webdesigner Depot por Ben Gremillion. Ben es un diseñador web autónomo que resuelve problemas de comunicación con un mejor diseño.

¿Qué técnicas utiliza para aprovechar al máximo las imágenes de su web? ¿Qué posibilidades hay de que pierda tiempo recortando bytes adicionales? Comparta sus pensamientos en los comentarios a continuación.