4/11/11

Cómo mejorar la visualización de tus imágenes en pantalla

Mucha gente me ha comentado que, al colgar sus imágenes en Internet, algunas de ellas auténticas maravillas, estas perdían calidad y quedaban como desenfocadas o con colores irreales, lo que naturalmente les resta espectacularidad.

Tener una buena cámara réflex o ser un genio en fotografía no basta para que una foto excelente se visualice correctamente en un navegador web, así que me propuse crear una entrada para explicar mis métodos para mejorar la visualización de imágenes JPEG en la red.

He aquí algunas consideraciones previas sobre el flujo de trabajo:

  1. Procesar las imágenes (siempre que sea posible) a un tamaño mayor que el que irán en la página web. No hace falta que sean mucho mayores, pero el interpolado que utiliza Adobe Photoshop al reducir las imágenes ayuda a suavizarlas un poco.
  2. Trabajar en modo sRGB. Aunque según las notas oficiales, tanto sRGB como AdobeRGB son exactamente iguales, la verdad es, como tantas otras veces en la vida, un poco diferente. La realidad –al menos hoy en día– es que sRGB es el perfil de color estándar universal para monitores e impresión. Ya trataré con más detalle estas diferencias, pero valga decir que el rango cromático de sRGB es mayor que el de AdobeRGB, así que…
  3. Antes de exportar las imágenes a JPEG, acoplar todas las capas que pueda tener. Esto –que parece una tontería– es importante porque los modos de fusión utilizados, o diferentes valores de opacidad, o efectos de capa como filetes o sombras paralelas pueden verse afectados en mayor o menor medida a la hora de reducir el tamaño de una imagen.
  4. Una vez acoplada la imagen resultante, ponerla al tamaño final de visualización en la web. Esto es importante, pues una imagen mayor que su tamaño de visualización queda como con cortes, y una imagen menor que su tamaño de visualización queda, naturalmente, pixelada. Así que es vital conocer el tamaño final de visualización.
    En caso de que una imagen aparezca en diferentes tamaños (por ejemplo, una galería de imágenes con las miniaturas correspondientes) es muy importante tener copias de las imágenes para todos los tamaños.
  5. Una vez tengamos todas las imágenes creadas, hay que enfocarlas. Es vital que NO se haya enfocado la imagen hasta este momento, porque al interpolar las imágenes el enfoque se pierde; y una imagen enfocada y luego interpolada no se ve igual que una imagen interpolada y luego enfocada.
Uno de los puntos más importantes del proceso es, naturalmente, el último. Y es aquí dónde radica el "secreto" de una buena visualización de las imágenes en la web.

Tomemos, por ejemplo, una imagen cuyo tamaño real es de 2000x1200 px. Como, naturalmente, hay muy pocos monitores hoy en día que tengan una resolución mayor que 2000 px de ancho, hay que visualizar una versión reducida de la imagen, lo que inevitablemente implica interpolación y, por lo tanto, pérdida de calidad. Es por este motivo que es tan importante trabajar a tamaños finales para las imágenes, ya que de este modo podemos controlar perfectamente cómo se ven las imágenes en todo momento y no dejamos nada al azar.

Esta es la imagen original (de 2000x1200 px) re-escalada directamente con HTML a un tamaño mucho más aceptable en monitores (el estándar actual marca monitores de 1024 px de ancho): 800 px.

Imagen #1: sRGB, 2000x1200 px, sin enfocar, forzada a 800x480 px mediante código HTML. Peso de la imagen: 1.0 MB. © Marc Mateos, 2011

Al aplicar, en Photoshop, una máscara de enfoque o un filtro de enfoque (Filtros > Enfocar > Enfocar) a esa imagen, obtenemos lo siguiente (forzándola, también, a un ancho de 800px):

Imagen #2: sRGB, 2000x1200 px, con enfoque, forzada a 800x480 px mediante código HTML. Peso de la imagen: 1.3 MB. © Marc Mateos, 2011

Naturalmente, cargar 2 imágenes de 2000x1200 px en esta entrada del blog, según como sea vuestra velocidad de conexión, tardará un poco. Y lo peor de todo: para visualizarlas a 800x480 px, por lo que estamos descargando mucho más peso del que realmente necesitamos.

Al crear una versión al tamaño final (eso sí: tomad la precaución de guardar la imagen original para no perder el tamaño real…), es decir, a 800x480px, obtenemos lo siguiente:

Imagen #3: sRGB, 800x480 px, sin enfocar. Peso de la imagen: 192 KB. © Marc Mateos, 2011

Que, como podemos ver, se visualiza bastante mejor. Ahora vamos a enfocar esa imagen de 800x480 px:

Imagen #4: sRGB, 800x480 px, con enfoque. Peso de la imagen: 248 KB. © Marc Mateos, 2011

Esta última imagen, que se ve muuucho mejor que la #2, ya es una buena aproximación al ideal. Eso sí, ahora se ve demasiado enfocada. Para reducir un poco ese enfoque, podemos usar el método Edición > Transición Enfocar… (que sólo nos aparecerá justo después de haber aplicado el filtro Enfocar) y darle una opacidad del 40-50%. Esto reducirá el impacto del filtro sobre la imagen, dándole un aspecto mucho más natural:

Imagen #5: sRGB, 800x480 px, con enfoque. Peso de la imagen: 216 KB. © Marc Mateos, 2011

Como reconozco que los cambios realizados en esa imagen son muy sutiles (aunque dicho sea de paso, en Internet marcan la diferencia entre una imagen de calidad y una imagen a secas), aquí tenéis una imagen que contiene la mezcla del paso #1 –inicial–, a la izquierda, y el paso #5 –final–, a la derecha:
Imagen #6: sRGB, 800x480 px, mezcla de los pasos #1 y #5. Peso de la imagen: 204 KB. © Marc Mateos, 2011

Y como muestra de lo que puede pasar en caso de que la imagen sea más pequeña que su tamaño de visualización, en este caso una imagen de 600x360 px:
Imagen #7: sRGB, 600x360 px, con enfoque, forzada a 800x480 px mediante código HTML. Peso de la imagen: 116 KB. © Marc Mateos, 2011

Y todavía más: lo que sucede al aplicar el perfil de color Adobe RGB (que, por cierto, no se visualiza correctamente igual en todos los monitores, por lo que es posible que incluso no veáis ningún cambio perceptible… Pero esta imagen debería tener unas tonalidades bastante más rojizas):
Imagen #8: AdobeRGB, 800x480 px, con enfoque. Peso de la imagen: 220 KB. © Marc Mateos, 2011
-

1 comentario:

  1. Excelente aporte; haré la prueba y estaré comentando nuevamente.

    ResponderEliminar