Al momento de optimizar un sitio web solemos pensar en compresión de código cargas asíncronas reducción de llamadas pero la opción más simple y efectiva de optimización es optimizar las imágenes de nuestra web.
Hoy día no existe web que no tenga imágenes o contenido multimedia da igual su rubro giro o código base de igual forma.
Son muy pocas las páginas web que realizan una optimización consciente de sus imágenes. Tomemos por ejemplo el caso de una tienda en línea en promedio por cada producto una tienda en línea tiene un mínimo de tres fotos sin contar las miniaturas, suponiendo que una tienda tiene un mínimo de 1000 productos obtendremos un promedio de 3000 fotos.
Estas imágenes suelen ser tomadas por servicios profesionales y entregadas en calidad de imprenta podremos decir que en el mejor de los casos, si no son optimizados estas imágenes pesan en promedio entre 5 y 10 mb en formato png o jpg con una densidad aproximada a los 300 puntos por Pixel. Podemos decir entonces que en promedio esta tienda en línea tiene entre un giga y medio y 3 gigas ocupados solamente con imágenes de sus 1000 productos.
Estas mismas imágenes optimizadas de forma correcta no deberían alcanzar los 700 kb en el peor de los casos su densidad de puntos por Pixel no debería superar los 80 pudiendo llegar a 75 y de igual forma la metadata anexada la imagen Debería ser eliminada.
Respecto al formato actualmente se recomienda utilizar imágenes en webp lo que permite una mayor compresión sin pérdida de calidad aparente.
En definitiva hablamos una reducción de entre 10 y 20 veces el tamaño original haciendo con el peor de los casos el total de imágenes no logró ocupar medio giga.
Para aplicar estas optimizaciones en un sitio nuevo basta con ser consciente Al momento de cargar las imágenes de unas reglas tipo para la optimización de imágenes en sitios web como ser:
- Ninguna imagen para web debe tener un índice de calidad superior al 85 índices superiores son aplicables a impresión pero al momento de mostrar una imagen en pantalla es simplemente información que no se utiliza y ocupa espacio.
- En promedio ninguna imagen para un sitio web debe superar los 1200 o 1500 píxeles de ancho. Es ideal tener en cuenta para escritorio una medida de ancho máxima y en función de su realizar el cálculo para las imágenes que ocupan media o un cuarto de pantalla.
- Se debe realizar un uso óptimo de los formatos de imágenes existentes, esto implica usar jpg para imágenes con fondo, png en caso de imágenes transparentes.
El problema es cuando tienes un sitio que lleva tiempo de vida, y nunca se han optimizado las imágenes o se han optimizado de forma incorrecta. En ese caso lo mejor es ocupar un servicio como ewww.io que permite optimizar imágenes por lotes. Para WordPress ocuparemos el plugin gratuito EWWW Image Optimizer que nos permite optimizar de manera ágil y práctica todas las imágenes en nuestro sitio.
Supondremos que ya eres usuario de WordPress y sabes como instalar un plugin así que pasaremos directamente a las configuraciones.
Primero en el menú de ajustes encontraremos la opción EWWW Image Optimizer y dentro de esta tendremos una serie de informaciones y opciones a aplicar. A continuación detallare cual es para mí la configuración más óptima, pero tengan en cuenta que dependiendo el giro del sitio se pueden cambiar algunas configuraciones.
Básicas
En las configuraciones básicas lo importante es activar la eliminación de metadatos, los metadatos de una imagen son información extra que contiene el archivo como ser el dia que se tomó la fotografía, las coordenadas GPS de donde se tomó, y otras tantas que realmente no nos importan. Los demás campos se pueden dejar como están por defecto.
ExactDN
Este es un servicio de suscripción, es recomendable pero no obligatorio, si no han comprado una licencia ignoren estas opciones, si lo han hecho activen las que crean prudentes, o todas.
Avanzada
Aquí comienza lo bueno:
- Nivel de calidad del JPG: lo recomiendo entre un 75 y un 80 dependiendo el sitio y las imágenes que contenga.
- Optimización en paralelo: no suelo activarlo ya que genera un consumo mayor en el servidor aunque en algunos casos me ha dado buenos resultados.
- Optimización programada: esta opción permite programar periódicamente optimizaciones a imágenes que tengamos en el sitio. Si su sitio es de una comunidad o similar donde los usuarios pueden cargar su propio contenido se los recomiendo. Les evitará muchos problemas intentando indicar a cada usuario los parámetros ideales de una imagen.
- Incluir carpetas de medios: esto facilita la optimización de imágenes cargadas en el sitio aplicando la optimización programada a las últimas 2 carpetas cargadas en su biblioteca.
- Carpetas a optimizar y Carpetas a ignorar como su nombre lo indica en estos campos indican las rutas a las carpetas en su servidor donde se buscarán y optimizaran imágenes y cuales serán ignoradas.
Redimensionar
Como se comentó antes es importante definir un ancho máximo a las imágenes que se cargan al sitio. Recomiendo un ancho máximo de 1200 a 1500 pixeles con un alto variable dependiendo del ancho. En lo personal suelo desactivar la opción Cambiar el tamaño de otras imágenes para evitar cualquier problema con las imágenes de la plantilla.
Convertir
Esta opción permite convertir imágenes entre png, jpg y gif, dependiendo de su sitio es recomendable pasar los archivos png a jpg y dejar el campo de color de fondo sin completar para que aquellos png que tengan transparencias sean ignorados.
WebP
Esta es la opción que hace que este plugin valga la pena realmente, en estas opciones activaremos las opciones JPG/PNG a WebP para que realice la conversión de nuestras imágenes a un formato de nueva generación recomendado por Google.
Hecho lo mencionado ya estamos listos para optimizar nuestras imágenes.
Realizando una optimización por lote
En la opción de Medios en el menú de la izquierda podremos ver que tenemos una nueva opción llamada Optimización en lote en dicha opción encontraremos algunos ajustes, pero primero que nada es importante tener en cuenta la advertencia que el mismo plugin nos da:
La optimización masiva altera tus imágenes originales y no se puede deshacer. Por favor, asegúrate de tener una copia de seguridad de tus imágenes antes de continuar.
Sabiendo esto si estamos de acuerdo procederemos a optimizar nuestras imágenes, para esto lo primero es picarle al botón azul de Buscar imágenes sin optimizar para que identifique las imágenes nuevas y no repitamos trabajo con imágenes ya optimizadas.
Otras opciones que veremos son Forzar reoptimización que como su nombre lo indica es para optimizar todas las imágenes encontradas hayan sido o no optimizadas antes y El tiempo de pausa entre cada imagen esta opción dependerá de tu servidor y tu sitio, entre más tiempo exista entre cada imágenes más lento será el procesos final, de igual forma entre mas rápido mas recursos consumidos y en algunos casos más probable que se generen errores.
Una vez definamos estos valores podemos iniciar nuestra optimización picando al botón azul y se nos mostrará una suerte de vista de log donde podremos ver imagen por imagen si se realizaron optimizaciones y cuál era el peso original y el nuevo.
Terminado este proceso solo basta navegar nuestro sitio para confirmar los resultados.
