Optimizar imágenes para la web

El propósito de este artículo es mostrar las principales maneras de optimizar las imágenes de un sitio web, para que sus páginas aprueben el test de Pagespeed.

Optimizar imágenes para la web significa ajustar sus dimensiones, eliminar datos innecesarios y comprimirlas a fin de reducir su tamaño, siempre manteniendo su calidad visual.

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 relacionados con la velocidad y el peso de las páginas, y también contribuirá a mejorar su comportamiento en el test de Pagespeed.

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

Lo básico en el manejo imágenes para la web:

Antes de comenzar, veamos si para el manejo de las imágenes de tu sitio web estas usando estos principios básicos:

Principio 1: Utiliza solamente la cantidad de imágenes necesaria.

Más imágenes, más llamadas al servidor y más tiempo de carga de las páginas. Siempre procura usar pocas imágenes bien optimizadas.

Si por alguna razón tu sitio requiere de muchas imágenes puedes usar un plugin como Lazy Load para que las imágenes se  vayan cargando en la medida que el visitante usa la barra de desplazamiento para moverse hacia abajo.

Principio 2: Usa solamente los formatos recomendados para la web

Trata de usar el formato de archivo JPG y cuando guardes las imágenes, siempre  busca la opción “para la web”, lo que disminuye la calidad original de la imagen en un 70 u 80%. Si necesitas imágenes con fondo transparente puedes usar PNG y si quieres una imagen animada puedes usar el formato GIF.

También puedes comenzar a experimentar con el nuevo formato WebP, que produce imágenes hasta un 30% más livianas en comparación con el formato JPEG.

Principio 3: Se prudente con los formatos que requieren código

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.

Otra forma de usar código para generar imágenes es hacerlo codificando algunas de tus imágenes a base64. Se prudente con este método ya que las imágenes de base 64 no son indexadas por Google, por lo que no beneficiaran 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. Tanto el pequeño logo rojo de Ideas Marketing como la foto del autor, que aparece debajo de cada uno de los artículos de este sitio, son en realidad imágenes codificadas en la cadena base64.

Principio 4: No uses imágenes de mayor tamaño que el necesario:

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.

En WordPress siempre redimensiona tus imágenes si cambias de plantilla: 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. Al cambiar el tema de WordPress usa un plugin como regenerate thumbnails para redimensionar tus imágenes a los tamaños adecuados.

Los 3 pasos para tener tus imágenes optimizadas y comprimidas y aprobar el test de imágenes de PageSpeed

Aquí te presento los tres pasos que uso para lograr que mis imágenes aprueben el test de Pagespeed. ¿Cuál me dio mejores resultados? Bueno, con una mezcla de los tres he logrado que mis páginas estén comprimidas y pasen la prueba.

Si ya tienes alguna experiencia con imágenes seguramente el primer paso, de optimizar tus imágenes con algún programa como Photoshop, ya lo estarás haciendo. Entonces sigue con el paso dos, usando el plugin de WordPress correcto o algún servicio para optimizar imágenes en línea. Si aún no resulta, soluciona todo con el paso número tres, usando las imágenes optimizadas por Google.

Paso 1 –  Utiliza el programa adecuado para editar y comprimir tus imágenes antes de subirlas al servidor

En este primer paso sigue los consejos mencionados arriba sobre el tipo de imágenes a usar y el tamaño. Para esto usa un programa de edición de imágenes GIMP, Photoshop, o Fireworks y recuerda darles un tamaño máximo que siempre será el tamaño más grande en que la imagen se mostrará. Al guardar las imágenes siempre busca la opción de “guardar para la web”, lo que disminuirá la calidad del archivo y lo comprimirá 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

Hay algunos plugins y servicios online para comprimir y optimizar imágenes. ¿Cuál es el mejor?  ¿Cuál me conviene usar?

Plugins para WordPress para optimizar imágenes:

Desde WordPress 4.5, y 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. En la mayoría de los casos esto no es suficiente por lo que es necesario usar algún plugin o servicio online para optimizar nuestras imágenes aún más.

Entre los plugins de WordPress más populares para optimizar imagenes quiero mencionar a WP Smush, Kraken Image Optimizer, ShortPixel Image Optimizer y Optimus.

En este sitio estoy usando Optimus, un plugin de KeyCDN 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 los archivos mantengan el nombre que tenían, ya que cambiarlo influirá en la clasificación y la posición de tus imágenes dentro de la búsqueda de imágenes de Google.

Una versión gratuita de Optimus está disponible en WordPress.org, pero aquí utilizo la versión de pago que encuentras en el sitio web de Optimus. La version de pago se llama Optimus HQ y es la que también permite generar un completo set de imágenes en el nuevo formato WebP. Este nuevo formato es recomendado por Google en su página para desarrolladores.

De paso, el sitio web de Optimus pasa el test de de PageSpeed Insights con 100/100, lo que muestra que ellos saben de lo que están hablando.

Optimus me ha resultado muy práctico, especialmente para optimizar las imágenes antiguas de un sitio. 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 estan Image Optimizer y TinyPNG.

Image Optimizer

Image Optimizer de Dynamic Drive tiene un aspecto sencillo, pero funciona bien. Permite optimizar gifs, gifs animados, jpgs y pngs y además, puede convertir fácilmente de un tipo de imagen a otro. Tiene un límite de tamaño de 2.86 MB, lo que es más que suficiente en la mayoría de los casos. Image Optimizer ofrece varias copias de la imagen original comprimidas a diferentes niveles para que elijas.

TinyPNG

Este 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.

Paso 3 – Utiliza las imágenes optimizadas que ofrece PageSpeed

¿PageSpeed se ocupa de optimizar las imágenes de mis páginas? La respuesta es sí. Y Google lo hace sin que se lo pidas. Cada vez que testeas una página en PageSpeed, si tus imágenes no están optimizadas Google pondrá a tu disposición un paquete con tus imágenes optimizadas y listas para ser usadas.

Entonces, si con los métodos anteriores todavía tus imágenes no aprueban el test de PageSpeed no dudes en usar estas imágenes. Puedes hacerlo siguiendo estos pasos:

1. Chequea la página con problemas de imágenes en Page Speed Insights.
2. Descarga y descomprime en tu ordenador el archivo que Google te ofrece abajo de esa página de resultados.
3. Mira la ubicación de las imágenes que Google no aprobó.

4. Usando FTP, sube las imágenes optimizadas por Google a la misma carpeta (en WordPress año/mes) y con el mismo nombre, reemplazado a las anteriores.

5. Borra el cache de la página y chequea nuevamente la página en Pagespeed. ¡Problema solucionado!

Come puedes ver, el problema de las imágenes ahora está solucionado. Lo más probable es que necesites hacer este proceso dos veces si las imágenes que usas para el ordenador y los móviles son diferentes. Esta solución es aconsejable si tienes pocas páginas en tu sitio. Si tu sitio tiene centenares o miles de páginas y entradas y no puedes solucionarlo de otra manera, te diría que al menos te asegures de tener las imágenes optimizadas en tu página principal y en las páginas más visitadas de tu sitio.

En muchos de los artículos nuevos que publico en mis sitios o en los sitios de mis clientes, no pierdo mucho tiempo optimizando las imágenes. Simplemente me aseguro de subir la imagen original en el tamaño correcto e inmediatamente después de publicar la página, la chequeo en PageSpeed, me descargo las imágenes optimizadas por Google y las remplazo via FTP. ¡Listo, ahora las imágenes de la página aprueban el test de PageSpeed!

Conclusión

Al optimizar imágenes para la web sigue los métodos que te den resultado. Cada caso es diferente y  Este trabajo requiere un poco de ciencia y un poco de arte.

Si has seguido mis consejos, las imágenes de tu sitio deberían estar aprobando el test de PageSpeed. Si tienes preguntas o algún consejo para compartir escríbelo en los comentarios. ¡Me encantaría conocer tu experiencia!

Filed under: Page Speed - Fecha de la última revisión:

Acerca del Autor

Cuento con más de 25 años de experiencia en el diseño, desarrollo y posicionamiento de sitios web, ayudando a empresarios y emprendedores a construir exitosas estrategias de presencia online. De profesión docente, me interesa también todo lo relacionado con la tecnología aplicada a la educación.
Puedes seguirme en +Google.

¡Todavía no hay comentarios!


Escribir un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Comentario*

Name *
Email *
Sitio web