[wpdreams_ajaxsearchlite]
Cómo optimizar imágenes para tu web

Cómo optimizar imágenes para que no afecten a la carga de tu web

Lectura: 5 min | 28 Dic 18

Autor: Alex Serrano

El tiempo de carga de tu web es fundamental para que los usuarios no abandonen tu web. En este post te contamos qué debes tener en cuenta a la hora de optimizar imágenes para web así como las herramientas, los plugins y los trucos para que no afecten de forma negativa a la velocidad de carga de tu web ni al posicionamiento SEO.

Cuando hablamos de WPO nos referimos a Web Performance Optimization. O lo que es lo mismo, optimizar el rendimiento de una página web para que cargue en el menor tiempo posible. Esto implica que todos sus elementos – los cuales son necesarios para que se muestre el contenido final – han de ser visibles para el usuario dentro de un lapso de tiempo razonable.

Antes de nada, es importante discernir entre página web y sitio web. Cuando hablamos de optimizar los tiempos de carga de una página web, hablamos de una URL de un sitio web. En cambio, cuando analizamos el WPO de una web, se analizan páginas distintas, y no sólo una, puesto que pueden existir diferencias de rendimiento entre ellas.

¿Es importante cuidar la velocidad de carga de una web para el SEO?

Rotundamente, la respuesta es sí. La velocidad de carga es un factor importante, y desde el pasado mes de julio lo es más. ¿Por qué?

En marzo, Google lanzó definitivamente el mobile first index. Este cambio implicaba que a partir de ese momento, el índice principal sería el móvil. En julio, Google anunciaba que la velocidad de carga en móviles se convertía en un factor de posicionamiento.

Para entendernos: Google se fija en la velocidad de carga de tus páginas para determinar si son de mejor o peor calidad. Google piensa que los usuarios que utilizan el buscador son sus propios clientes. Y como empresa que es, quiere lo mejor para ellos. De ahí que descarte las páginas lentas. La cuestión es que uno de los factores que suelen afectar más a la velocidad de carga, bien por desconocimiento o por descuido, son las imágenes.

Aspectos a tener en cuenta a la hora de optimizar imágenes para web:

 Las fotos que se suben a una web pueden generar distintos problemas y en algunos casos tirar por tierra el WPO de una página web. ¿Qué debes tener en cuenta para que estén perfectas? Principalmente dos aspectos: el peso de la imagen y las dimensiones de la misma.

1. Peso de la imagen

Esto es lo primero que debes cuidar con todas y cada una de las imágenes que subes a una web: desde un logo hasta la foto de un producto que debe ampliarse para hacer zoom.

¿Por qué afecta a la velocidad de carga? Es sencillo de entender. Cuando el navegador intenta cargar una página debe descargar todos los elementos que la componen (imágenes, javascript, css, html, etc).

Si en esa página se encuentran imágenes que pesan mucho, por ejemplo de 2MB, el navegador tardará más en descargarlas y el usuario tendrá que esperar más de lo recomendable para ver el contenido.

Nuestro consejo para optimizar imágenes para web sin afectar a tu WPO y SEO es que pesen lo mínimo posible: si pueden estar por debajo de 100kb o 200kb, mejor.

2. Dimensiones

Las dimensiones de las imágenes, es decir, el tamaño de las mismas también es importante. En muchos casos, el tamaño de una imagen puede determinar el peso, aunque no siempre es así. Una imagen puede tener un peso óptimo pero tener unas dimensiones que no son adecuadas.

¿Por qué afecta la dimensión de una imagen si el peso es el correcto? El navegador (Chrome, Firefox, Edge…) que debe descargar los elementos de una página recurrirá a la versión de la imagen que está subida al servidor de la web. En el caso de que la imagen sea más grande a cómo se está mostrando, tardará más en hacerlo. Consecuentemente, no es lo mejor para el WPO, puesto que no estás optimizando.

Si el espacio que va a ocupar una imagen en una página es de 500×500 píxeles, el archivo de la imagen debería subirse al servidor o web, a ese tamaño y nunca a uno mayor.

¿Cómo puedes saber si tus imágenes necesitan mejoras de peso/dimensiones?

Hay diversas herramientas que te ayudan a saber cómo cargan tus páginas y qué cosas debes mejorar.

GTmetrix: esta herramienta es 100% gratuita y muy sencilla de utilizar.

Cuando analizas una URL te da una serie de datos:

Gtmetrix para saber la velocidad de carga de tu web

  • PageSpeed Score: es la nota de 0 a 100 que Google le da a tu página a nivel de optimización.
  • Yslow Score: igual que PageSpeed Score pero de Yahoo.
  • Fully Loaded Time: cuánto tiempo tardan en cargar todos los elementos de esa página.
  • Total Page Size: peso del total de la página.
  • Requests: peticiones de servidor que se deben realizar para cargar todos los elementos internos/externos.

En la primera de las pestañas inferiores verás recomendaciones para mejorar la página. Fíjate en las que estén más cerca de 0 o en rojo.

Gtmetrix velocidad de carga web

Si tienes algún problema con el peso de las imágenes de tu web aparecerá una alerta en el apartado “Optimize images” mientras que si el problema son las dimensiones se verá reflejado en “Serve scaled images”. En ambos casos se mostrarán las URLs de las imágenes que necesitan mejoras.

PageSpeed Insights: es la herramienta propia de Google que te dice de 0 a 100 cómo está tu web, en móviles y en escritorio. Es gratuita.

Page Speed, herramienta para medir la velocidad de carga de tu web

También te da una serie de recomendaciones, en las que se encuentran tanto la reducción del peso de imágenes como la redimensión. Igual que GTmetrix, te facilitará las URLs de las imágenes que necesitan mejoras.

Optimiza las imágenes antes de subirlas a una web

A continuación te dejamos con una serie de recomendaciones sobre cómo optimizar imágenes para web. Toma nota de ellas:

– Guarda en el formato adecuado: si utilizas algún programa para editar o comprimir fotos, como Photoshop, elige siempre el formato adecuado para optimizar el rendimiento.

Si hablamos de logos, ilustraciones, imágenes vectoriales o imágenes con fondo transparente… el formato adecuado es .png. Si hablamos de fotografías el formato adecuado es .jpg.

– PPP: programas de edición como Photoshop te dejan elegir los píxeles por pulgada (PPP) del archivo. Ten en cuenta siempre que para web, el PPP adecuado es 72.

– Comprime: además de guardar correctamente las imágenes puedes comprimirlas con algún programa. Existen soluciones online gratuitas como Tinypng que te permite subir cualquier imagen y comprimirla bastante, sin perder calidad. Haz la prueba, la diferencia puede ser muy grande.

– Guarda las imágenes en la dimensión correcta: exportar las imágenes en la dimensión correcta puede ahorrarte espacio y mejorar el WPO.

Antes de editar la imagen debes saber qué espacio va a ocupar. ¿Cómo lo puedes saber?

 Una forma muy sencilla es averiguarlo con Page Ruler. Se trata de una extensión para Chrome que te permite marcar la zona que quieras y saber los píxeles (ancho y alto) que ocupa esa zona. Así sabrás cuánto debe medir tu imagen para que sea el tamaño adecuado.

Aquí ves un ejemplo, utilizando Page Ruler en este blog. La zona marca mide 749×449 píxeles.

Page Ruler, medidas adecuadas de imágenes en tu web

– Reduce el peso de imágenes subidas a tu servidor. Puede suceder que las imágenes ya estén subidas al servidor, entonces ¿qué haces en este caso para optimizarlas?

Tranquilo, no es necesario descargarlas de nuevo y volver a subirlas. Actualmente hay proveedores de hosting que cuentan con herramientas internas para comprimir las imágenes de todo tu servidor y así mejorar el WPO, además de ahorrar espacio en tu hosting.

En el caso de que tengas WordPress, tienes otras opciones, mediante plugins:

  • Smush Image Compresion: este plugin que cuenta con una versión gratuita, que según el caso puede ser suficiente, te permite optimizar y redimensionar imágenes en PNG, JPG y GIF que ya están subidas a tu web.

WP Smush para reducir el peso de las imágenes de tu web

– Kraken.io: también tiene una versión gratuita que te permite comprimir las imágenes sin perder calidad y redimensionarlas. Es un plugin muy cómodo de utilizar, perfecto para webs con cientos de imágenes que deben ser optimizadas.

Kraken-comprimir-imágenes-web

De todas las acciones que se pueden llevar a cabo en el WPO, la optimización de imágenes de una web es probablemente la más sencilla, ya que no es necesario tener conocimientos técnicos para ponerlo en marcha.

Ahora que ya sabes cómo deben ser tus imágenes, comprueba que están optimizadas antes de subirlas a tu web, ahorrarás tiempo y disgustos en el futuro.

Autor

Alex Serrano

Consultor de Marketing Online y Posicionamiento Web. Es profesor en el Máster de Marketing Digital de Aula CM, especializado en SEO y Google Analytics. Da vida a su blog en alexserrano.es desde hace más de 6 años.

Suscríbete a nuestra Newsletter y recibe los artículos en tu email.