Optimizar las imágenes para la Web es imprescindible para que las páginas carguen rápido en el navegador de los usuarios.
Las imágenes, presentes en un 99% de sitios web, son uno de los elementos que más ralentizan el tiempo de carga. Y una rápida velocidad de carga es primordial por dos razones:
- Proporciona una experiencia positiva al usuario, en especial cuando accede a una página web desde un dispositivo móvil.
- Evita penalizaciones que puedan limitar el posicionamiento SEO del sitio web.
En qué consiste la optimización de imágenes para la Web
A la hora de optimizar imágenes para la Web tenemos en cuenta tres propiedades de los archivos:
- Resolución – el número de píxeles por pulgada (ppp) o dots per inch (dpi) que contiene la imagen.
- Tamaño – las dimensiones de la imagen –alto por ancho–, expresadas en píxeles (px) para la Web.
- Peso – el espacio que ocupa en disco un archivo de imagen, generalmente en Kilobytes (kB).
La optimización de imágenes consiste en obtener un archivo con una calidad de imagen sin pérdidas con el menor peso posible.
Elegir el formato de imagen adecuado
A continuación revisamos los principales formatos de imagen para la Web y para qué se utiliza cada uno de ellos.
Formato JPEG
El formato JPG o JPEG (Joint Photographic Experts Group) es un método de compresión que admite los modos de color CMYK, RGB y Escala de grises pero no admite transparencias.
JPG conserva toda la información de color de una imagen RGB pero comprime el tamaño de archivo descartando datos selectivamente.
Un nivel de compresión alto produce una calidad de imagen inferior y un nivel de compresión bajo una mejor calidad de imagen.
El formato JPG es una excelente opción para mostrar en la Web imágenes comprimidas de gran tamaño y fotografías.
Formato GIF
El formato GIF (Graphics Interchange Format) admite transparencias y hasta 256 colores tanto en imágenes como en animaciones.
Exportar imágenes con más de 256 colores a formato GIF produce pérdida de calidad.
El formato GIF es la opción habitual para mostrar imágenes animadas.
Formato PNG
El formato PNG (Portable Network Graphics) consta de dos tipos: PNG–24 y PNG–8. Ambos formatos admiten transparencias y semi-transparencias.
PNG–24 proporciona una profundidad de color de millones de colores y PNG–8 admite hasta 256 colores.
El formato PNG es una buena opción para mostrar en la Web imágenes pequeñas (como iconos), imágenes sin fondo, logotipos e imágenes que contengan texto.
Formato WebP
El formato WebP, actualmente desarrollado por Google en código abierto, pretende ser el próximo estándar para gráficos con millones de colores.
Este formato admite transparencias, compresión con y sin pérdidas, animaciones gráficas y mejora de manera notable los niveles de compresión de los formatos JPG, GIF y PNG.
Pero no todo son bondades, algunos navegadores web presentan problemas de visualización de archivos WebP y es necesario utilizar una segunda imagen, de respaldo, para asegurar la visualización de la imagen en la Web.
El interés de Google en la estandarización del formato WebP, con el propósito de acelerar cada vez más la velocidad de carga, contrasta con la pasividad mostrada por compañías como Apple, Microsoft o Adobe para abrazar el formato.
En este momento Adobe Photoshop no permite exportar a formato WebP de manera nativa, para ello es necesario instalar el plugin gratuito WebPShop.
Formato SVG
Para finalizar este apartado dedicado a los formatos, cabe mencionar que el formato de gráficos vectoriales SVG no es un formato de archivo de imagen sino un formato de archivo XML (Extensible Markup Language).
Cómo optimizar imágenes para la Web con Adobe Photoshop
En los siguientes tres bloques repasamos –paso a paso– cómo ajustar y exportar archivos de imagen optimizados para sitios web con el software Adobe Photoshop.
1. Ajustar la resolución de la imagen
La primera acción que debemos tomar es reducir al mínimo necesario la resolución de nuestras imágenes.
72 ppp es la mínima resolución de imagen para la web sin pérdida de calidad.
Para modificar la resolución del archivo debemos acceder desde el menú superior de Photoshop a la opción Imagen / Tamaño de la imagen o pulsar el atajo de teclado «Opción + Comando + I», en Mac.
A continuación se abre una ventana en la que podemos ajustar tanto la resolución de la imagen –reduciendo la resolución a 72 dpi si es necesario– como el tamaño de la fotografía, que abordamos en el siguiente apartado.
2. Adaptar el tamaño de la imagen al tamaño máximo de visualización en la web
Los sitios web profesionales ofrecen un «diseño responsive o adaptable» al tamaño de la pantalla de los dispositivos desde los que acceden los usuarios. Y el tamaño en el que se visualizan las imágenes en cada dispositivo sólo depende del diseño del sitio web.
Por tanto, conviene ajustar las dimensiones (alto por ancho) de la imagen al mayor tamaño de visualización que ésta tendrá en el navegador.
En la misma ventana del apartado anterior –en la que podemos modificar la resolución de la imagen– podemos reducir el tamaño de la imagen al máximo tamaño de visualización.
Conviene mantener la función «Volver a muestrear» en modo «Automático» y utilizar la herramienta «Recortar» si es necesario hacer lo propio con la imagen.
Si desconoces el tamaño de visualización definido en el diseño web puedes acceder y revisar el archivo CSS vía FTP o emplear el «inspector» del navegador para averiguarlo.
3. Exportar la imagen
En Adobe Photoshop, los archivos de imagen deben ser obtenidos desde la opción «Exportar».
Cómo NO obtener una imagen optimizada en Photoshop
No debemos emplear las opciones «Guardar» ni «Guardar como» porque –aún empleando una configuración idéntica– estas opciones de «Guardar» generan archivos de mayor peso que los obtenidos mediante la función «Exportar» .
Las funciones «Guardar» almacenan en el archivo los metadatos de Copyright e Información de Contacto (que podemos decidir incluir o no en la función «Exportar»), metadatos con el historial de procesos realizados durante la edición del archivo así como otros datos residuales.
Por el contrario, al utilizar la opción «Exportar» todos esos datos se eliminan y el tamaño del archivo obtenido es más reducido.
Opciones para exportar imágenes optimizadas para la Web
La ruta Archivo / Exportar del menú superior de Photoshop muestra las «Preferencias de exportación» y diversas opciones para exportar archivos de imagen.
Las opciones relacionadas con la optimización de imágenes para la Web son:
- Exportación Rápida Como…
- Exportar Como…
- Preferencias de Exportación…
- Guardar para Web (Heredado)…
Comenzamos revisando la opción principal, «Exportar Como…», y después continuaremos repasando las otras tres opciones mencionadas.
3.1. Opción «Exportar Como…»
Una vez adecuada la resolución (72 ppp) y las dimensiones de la imagen (alto y ancho necesario en px) sólo falta ajustar las opciones de exportación para reducir el peso del archivo.
La ventana de información «Exportar Como…» (ver más abajo) muestra una previsualización de la imagen con dos columnas, una a cada lado, en las que podemos modificar determinadas propiedades que revisamos a continuación.
Escalar Todo
En la columna izquierda podemos modificar la «Escala» de la imagen. Pero al haber ajustado el tamaño de la imagen previamente conviene mantener la escala en 1x.
En la columna izquierda también se muestra el peso actual de la imagen (la imagen inferior pesa 110.5 kB). Observar el peso de la imagen es importante porque varía en función de nuestra elección de formato y demás opciones de exportación.
Ajustes de la Imagen
En la columna derecha seleccionamos el formato de archivo al que exportar la imagen y algunas propiedades asociadas en el caso de los formatos JPG («Calidad») y PNG («Transparencia» y «Archivo de 8 Bits»).
Tamaño de la Imagen
En este bloque se muestran las dimensiones de la imagen y la escala. Si las dimensiones de la imagen han sido ajustadas al tamaño máximo de visualización en la Web la escala debe mantener el 100%.
En la función «Volver a muestrear» o Resample es recomendable elegir la opción «Bicúbica automática». Esta opción selecciona el método de muestreo bicúbico apropiado para la imagen.
La opción bicúbica es un método preciso de remuestreo que añade píxeles –basándose en un examen de los valores de los píxeles adyacentes– para producir graduaciones tonales más suaves.
Tamaño del Lienzo
El lienzo es el espacio de trabajo en Photoshop sobre el que añadimos capas. Como norma general, en el proceso de exportación el tamaño del lienzo no se modifica y coincide con el tamaño de la imagen.
Metadatos
Añadir o no metadatos con información sobre los «derechos de autor e información de contacto» es decisión de cada autor.
Una mayor cantidad de metadatos genera un archivo de mayor peso; aunque los metadatos de información no suelen ocupar un gran espacio en el archivo.
Espacio de Color
La recomendación es mantener activada la opción por defecto de «Convertir a sRGB» (standard Red Green Blue), el espacio de color empleado por dispositivos que utilizan luz para componer colores como pantallas y monitores de ordenadores, smartphones y tablets.
Del mismo modo es recomendable activar la opción «Incrustar el Perfil de Color». Esta opción sólo añade unos 3 kB y permite que los perfiles de color que hemos utilizado durante la edición se interpreten correctamente por los softwares, dispositivos y pantallas que recuperan nuestra imagen.
3.2. Opción «Exportación Rápida Como…»
La opción «Exportación rápida» aplica la configuración seleccionada en la opción «Preferencias de exportación».
Esta función es útil si utilizas con frecuencia una misma configuración para exportar imágenes. De manera que al configurar las «Preferencias de exportación» dispones de un preset en «Exportación Rápida».
3.3. Opción «Preferencias de exportación…»
Las «Preferencias de exportación», citadas en el apartado anterior, se modifican siguiendo desde el menú superior la ruta Archivo / Exportar / Preferencias de Exportación.
3.4. Opción «Guardar para Web (Heredado)…»
La opción «Guardar para Web» –procedente del producto obsoleto ImageReady– no será actualizada con nuevas funciones y por esta razón Adobe ha añadido la etiqueta «Heredado».
Aún así, esta opción continúa operativa en Photoshop y Adobe ha comunicado que no eliminará la opción «Guardar para Web» sin proporcionar dichas capacidades en un flujo de trabajo nuevo y mejorado.
Optimizar imágenes para la Web sin perder calidad
En resumen y como hemos visto a lo largo del tutorial, optimizar una imagen para la Web requiere ajustar la resolución, las dimensiones, el formato y las opciones de exportación de la imagen.
Estas cuatro propiedades –con independencia de que utilicemos o no el software Adobe Photoshop– son aquellas en las que debemos poner nuestra atención para encontrar el equilibrio perfecto entre calidad y peso de las imágenes.