Aprende a Optimizar Imágenes para la Web y Aprobar la Prueba de Google PageSpeed 2022

Aprobar el test de velocidad Google PageSpeed es clave para mejorar la experiencia del usuario que visita nuestras páginas web. Aprender a optimizar imágenes para dejarlas en el tamaño adecuado, comprimidas y sin pérdida de calidad visual es muy importante porque las imágenes representan uno de los principales problemas relacionados con la velocidad y el peso de las páginas.

La herramienta PageSpeed Insights (PSI) analiza el rendimiento de las páginas web tanto en dispositivos móviles como en ordenadores y ofrece decenas de sugerencias para mejorarlas. ¿Te gustaría ver tus páginas clasificadas como rápidas (puntaje 90 o más), normales (50-89) o lentas (menos de 50)? Este artículo explora las principales recomendaciones de PageSpeed relacionadas con la optimización de imágenes de una página web, y te ayuda a adoptarlas.

TIP: Antes de leer artículos sobre Cómo Acelerar una Página Web me aseguro primero que la página que voy a leer pase el test de PageSpeed. ¿No te parece prudente? Por eso, te desafío a que hagas lo mismo y compruebes la velocidad de esta página web antes de continuar con tu lectura: Comprobar Optimizar-Imágenes-Para-la-Web en Google PageSpeed.

Las Imágenes Optimizadas son Beneficiosas para el SEO de tu Sitio

A la hora de posicionar una página web es crucial su velocidad de carga, o sea el tiempo que la página web tarda en estar totalmente visible para la persona que entra a visitarla. Google toma muy en serio la velocidad de carga de los sitios web y se cree que pronto los sitios lentos van a ir desapareciendo paulatinamente de los resultados de búsqueda.

Aprender a optimizar imágenes para dejarlas en el tamaño adecuado, comprimidas y listas para la web nos ayudará a solucionar uno de los principales problemas que afectan la velocidad y el peso de las páginas web.

 La optimización de las imágenes mejora el rendimiento y la velocidad de carga de una página web y es un factor positivo de su posicionamiento SEO. 

Si bien la optimización de imágenes parece compleja, ya que hay una gran variedad de formatos y detalles a tener en cuenta, con un poco de paciencia, te prometo que obtendrás buenos resultados.

El objetivo de este artículo es que las imágenes de tus páginas web pasen el test de PageSpeed de Google sin inconvenientes.

Como Mejorar las Imágenes de una Página Web para Aprobar el Test PageSpeed de Google

Vamos a analizar uno por uno las principales recomendaciones de Google PageSpeed para que nuestras imágenes pasen el test:

• Usar los formatos de imágenes recomendados para la web.
• Recortar las imágenes en su tamaño correcto.
• No usar más imágenes que se necesitan.
• Diferir la carga de las imágenes debajo del pliegue.
• No diferir la carga de imágenes arriba del pliegue.

Para que las imágenes de tu sitio web pasen el test de PageSpeed debes asegurarte de resolver los siguientes problemas:

1. Publicar Imágenes en Formatos de Próxima Generación.

Olvídate de las imágenes .jpg y de tratar de reducir su tamaño para optimizarlas. Usa el nuevo formato .webp que está siendo adoptado rápidamente por sitios web grandes y pequeños, ya que proporciona un rendimiento superior con archivos de menor tamaño. Este nuevo formato es desarrollado por Google y es recomendado en su página para desarrolladores. 

Las imágenes convertidas a WebP son hasta hasta un 80 % más pequeñas que su tamaño original en los formatos .png o .jpg.

Otra ventaja de las imágenes en formato WebP es que aceptan un 30% más de compresión que una imagen en formato JPEG, y lo hacen sin pérdida de calidad de imagen.

Además, el formato de imágenes WebP ya es compatible de forma nativa con Google Chrome, Safari, Firefox, Edge, el navegador Opera y muchas otras herramientas y bibliotecas de software.

Por todo lo apuntado, considera convertir las imágenes de tu página web al formato Webp ya que con esto tus páginas podrían alcanzar al menos un 90 % de la velocidad para aprobar el test de Google PageSpeed.

Más abajo te explico como hacerlo y cuales son las herramientas gratuitas disponibles.

2. Codificar las Imágenes de forma eficaz.

En la actualidad, los formatos de imágenes GIF, PNG y JPEG representan más del 90 % del total de imágenes que se encuentran publicadas en Internet. Debido a esto, PageSpeed Insights seguirá ofreciendo recomendaciones específicas para poder optimizar este tipo de imágenes, a la vez que sugiere dejar de usar estos formatos y convertirlos a WEBP.

Si sigues usando imágenes en los formatos GIF, PNG y JPEG podrás alcanzar velocidades de carga aceptables en el test de PageSpeed, pero te será muy difícil llevarte una puntuación de más del 90 % para que tus páginas sean clasificadas como rápidas por Google.

Pasos para optimizar imágenes JPG o PNG:

Paso 1 – Edita tu imagen y guárdala para la web

Utiliza el programa adecuado para editar y comprimir tus imágenes antes de subirlas al servidor. Photoshop es el editor de imágenes más popular, pero puedes usar GIMP si prefieres una opción gratuita, o cualquier otro programa.

En Photoshop al guardar las imágenes usa la opción de «guardar para la web», lo que disminuirá la calidad del archivo y lo comprime bastante bien.

Con esto tus imágenes serán más livianas y el tiempo de carga de tus páginas mejorará, pero es posible que aún no te alcance para satisfacer a Google Pagespeed Insights.

Paso 2 – Utiliza un plugin de WordPress o un servicio online para optimizar y comprimir las imágenes.

En WordPress, de manera automática, las imágenes que subes son comprimidas al 82% de su tamaño original, a fin de aumentar la velocidad de carga de las páginas, especialmente en los dispositivos móviles. Sin embargo, en la mayoría de los casos esto no es suficiente, por lo que necesitarás usar algún plugin o un servicio online para optimizar las imágenes aún más.

Entre los plugins de WordPress más populares para optimizar imágenes están WP Smush, Kraken Image Optimizer, ShortPixel Image Optimizer y Optimus.

En el pasado (Ahora uso solo imágenes Webp), usaba Optimus, un plugin de Key CDN muy completo para comprimir imágenes. Optimus se encarga de optimizar y comprimir las nuevas imágenes que subes y también tiene la opción de optimizar las existentes usando la opción Bulk Optimizer > Herramientas > Optimizar todas las imágenes. Al usar esta opción siempre asegúrate de que la herramienta no le cambie los nombres a los archivos, lo que influiría negativamente en la clasificación y el posicionamiento de esas imágenes dentro de la búsqueda de imágenes de Google.

Una versión gratuita de Optimus está disponible en WordPress.org, pero hay también una versión de pago que encuentras en el sitio web de Optimus. Se llama Optimus HQ y también ahora genera imágenes en el nuevo formato WebP. 

Optimus me ha resultado muy práctico, especialmente para optimizar imágenes antiguas. Sin embargo, me he encontrado con algunas imágenes a las que todavía no les alcanzó para pasar el test de Pagespeed.

Servicios en línea para optimizar imágenes:

Hay también algunos sitios en línea en los que puedes subir imágenes y te las devuelve comprimidas y optimizadas. Entre las opciones gratuitas están Optimizilla y TinyPNG.

TinyPNG es uno de los servicios más populares y el mejor cuando se trata de comprimir archivos PNG transparentes. Esta herramienta en línea puede cargar hasta 20 archivos de 5 MB cada uno. El archivo PNG que use como prueba perdió 73kb, haciendo que la imagen final sea un 75% más ligera que la original y sin perder su transparencia o su calidad. TinyPNG ahora también trabaja con imágenes Webp

3. Usar el tamaño adecuado para las imágenes.

Asegúrate de publicar las imágenes en el tamaño correcto. PageSpeed detecta las dimensiones de la imagen que se especifican mediante los atributos de cada imagen, por lo que cada imagen debe mostrarse en el tamaño que dicen sus atributos.

Si el tamaño real de una imagen es 100 x 100 píxeles, no cambies sus dimensiones a 80 x 80 píxeles directamente en el código HTML o en la hoja de estilo CSS. Si la imagen necesita ser más pequeña, utiliza un editor de imágenes como Photoshop y cambia su tamaño a las dimensiones correctas, para que coincidan las especificaciones de anchura y altura de la imagen con su tamaño real.

En los sitios adaptables, se suele usar un set de entre tres y cuatro imágenes de tamaños diferentes, los que deben siempre estar ajustados a la dimensión máxima en que se mostrará cada una de ellas en los diferentes dispositivos.

Al subir una nueva imagen a WordPress, este siempre genera un completo set de imágenes en las medidas correctas. Lo que a veces pasa es que cambiamos nuestra plantilla y no tenemos en cuenta redimensionar las imágenes a los tamaños que usa el nuevo tema. En WordPress siempre redimensiona tus imágenes si cambias de plantilla:

Al cambiar el tema de WordPress usa un plugin como regenerate thumbnails para redimensionar tus imágenes a los tamaños adecuados.

4. Posponer la carga de las imágenes que no aparecen en la pantalla.

Retrasar la carga de imágenes que están fuera de la pantalla es muy importante porque evitan cargar los archivos que todavía no están en la pantalla del usuario. 

Cuando un navegador (Ej. Chrome) carga una página, busca descargar todas las imágenes de esa página web, incluso aquellas que todavía no son visibles para el visitante. Esas imágenes no necesitan ser cargadas de inmediato sino que deben esperar hasta que el usuario se desplace hacia abajo en la página.

El navegador entonces dedica tiempo cargando imágenes que no son necesarias durante la carga inicial de la página web, afectando la experiencia del usuario.

La carga diferida de las imágenes que están por debajo de la pantalla inicial (Lazy Load en inglés) es una práctica recomendada, ya que garantiza que el navegador descargue nada más que las imágenes que necesita mostrar en la pantalla del usuario.

Lo nuevo de WordPress es que ahora viene con un sistema de carga diferida de páginas incorporado, por lo que ya no es necesario instalar un plugin que haga esto. Lo malo de este sistema de Lazy Load que ofrece WordPress es que todavía no da la opción de que las imágenes que están sobre el pliegue (above the fold) puedan ser desactivadas.

5. No posponer la carga de las imágenes que aparecen sobre el pliegue.

Si bien es necesario retrasar la carga de las imágenes que aparecen en una página web, se debe evitar hacerlo con aquellas que aparecen en la parte visible de la pantalla, para no retrasar el renderizado de la parte superior o visible de la página.

La alerta que nos da Google es porque la imagen se ha cargado en diferido lo que atrasa el renderizado (cargado) del contenido visible (en inglés «above the fold») que espera ver el usuario. 

Si tienes una página web HTML simplemente eliminas el tag, pero si estás usando la última versión de WordPress, el programa te retrasa automáticamente la carga de todas las imágenes, que es algo que hay que evitar.

Sin usar plugins, lo solucione agregando en el archivo functions.php una pequeña función para excluir el retrasado de la imagen destacada de cada pagina, que en mi caso es la imagen que aparece arriba del contenido en la parte visible.

 add_filter( 'the_content', 'add_post_first_img_attribute' );
function add_post_first_img_attribute( $content ) {
$from = '<img';
$to = '<img loading="false"';
$post = strpos( $content, $from );
if ( $pos !== false ) {
return substr_replace( $content, $to, $post, strlen( $from ) );
}
return $content;
}

Si no te sientes capaz de hacer esto, te recominedo usar un plugin como Smush que te permite evitar que el retrasado afecte a las imagenes en la pantalla visible.  

Otros detalles a tener en cuenta en el Manejo de Imágenes

Utiliza solamente la cantidad de imágenes que sea necesaria

No hay una respuesta definitiva sobre cuántas imágenes son «demasiadas» en una página web ya que una página con 10 imágenes pequeñas puede ser razonable, mientras que una con tres archivos de imágenes enormes puede ser demasiado. La métrica real a medir es el tiempo de carga.

Un objetivo de tiempo de carga razonable es de dos segundos (en una conexión de alta velocidad). Si su sitio tarda constantemente más tiempo en cargarse, debería considerar seriamente reducir su contenido o acelerar su entrega.

Se prudente con los formatos de imágenes que requieren código

Imagenes en formato SVG

Uno de estos es el formato SVG que usa una tecnología en la que las imágenes se muestran usando un código. La ventaja del formato SVG es que las imágenes son elásticas y adaptables, pero hay ciertas desventajas: Se requiere de un programa especial para crearlas e implementarlas, generan enormes bloques de código (tanto mayores cuando se trata de producir imágenes sofisticadas) y además las imágenes SVG no son soportadas por algunos navegadores antiguos.

Images codificadas a Base 64

Otra forma de usar código para generar imágenes es hacerlo codificando algunas de tus imágenes a base64. También es prudente con este método ya que las imágenes de base 64 no son indexadas por Google, por lo que no beneficiarán a tu SEO y además esas imágenes no aparecerán en la búsqueda de imágenes de Google o en cualquier otro motor de búsqueda.

Conclusión sobre las Imágenes en PageSpeed

Si has seguido mis consejos, las imágenes de tu sitio deberían estar aprobando el test de carga de las páginas de Google en PageSpeed Insights. Le quedará chequear nuevamente su página para comprobar que ya no tienes esos mensajes de alerta sobre el formato de tus imágenes. 

¡Si ya no aparecen, felicitaciones! Deberías entonces verlas debajo de la pestaña AUDITORÍAS APROBADAS.

Seguramente al trabajar con las imágenes de tus páginas irás encontrando tu propia forma de hacerlo. La mejor es la que te da los mejores resultados. Cada caso es diferente y este trabajo requiere un poco de ciencia y un poco de arte, y mucha paciencia.

Si tienes preguntas o algún consejo para compartir sobre cómo optimizar las imágenes para que aprueben el test de PageSpeed, por favor escríbelo en los comentarios. ¡Me encantaría conocer tu experiencia!