Como sabrás, a los frikis del SEO y del diseño web nos encanta optimizar al máximo nuestras webs, porque no solo es importante el diseño de la web, también lo es la usabilidad: que las páginas web carguen rápido, que pesen poco, que el usuario sepa manejarse en ellas, etc.
En esta ocasión, vamos a centrarnos en la velocidad de carga de la web, y en concreto en una de las claves para conseguir una carga rápida: la optimización de las imágenes.
Para ello, voy a definir 5 pautas, trucos, fases, consejos… como quieras llamarlos, para conseguir optimizar al máximo todas y cada una de tus imágenes.
Vamos a ello, ¿no?
En este artículo te mostramos:
1. Ajustar el tamaño de las imágenes al tamaño exacto necesario en la web
Estos trucos que te numero no son, como tal, pasos a seguir, pero sí que es conveniente que el primero de todos sea este. Por lógica, más que nada.
¿A qué me refiero en este primer punto? A que si el hueco para una imagen en tu web es de 1200 x 800 píxeles, coloca ahí una imagen de ese tamaño exactamente.
Parece obvio, pero son muchas las webs que tienen imágenes extremadamente grandes, cuando en realidad en esa web el tamaño en el que va a aparecer esa imagen es mucho menor.
Por supuesto también se da el caso de imágenes pequeñas en espacios más grandes y éstas se ven deformadas y con mala calidad. Así que analiza primero el espacio de que dispones en tu web y después cambia el tamaño de tus imágenes.
¿No sabes cómo cambiar el tamaño? Puedes hacerlo en Photoshop o incluso en Paint. Te muestro cómo en la siguiente imagen:
Imagen > Tamaño de la imagen.
(Sí, es una foto de mi Córdoba querida ?)
A continuación, estableces el tamaño que necesites. No olvides restringir la proporción de aspecto, para que tu imagen no se deforme.
Podrás ver en esta ventana cómo cambia el tamaño de la imagen conforme reduces el tamaño.
2. Guardar tus imágenes optimizadas para web en Photoshop
Si utilizas Photoshop sabrás de lo que te hablo, y si no, te lo explico brevemente. Este programa tan utilizado tiene una selección en sus opciones de guardado que es “Guardar para web”.
Al guardar tus imágenes de esta forma, Photoshop te disminuye al máximo el peso de las imágenes, pero sin perder apenas calidad ni disminuir su tamaño.
En la siguiente imagen te explico cómo guardar para web en Photoshop:
Archivo > Exportar > Guardar para web (heredado).
3. Optimizar aún más las imágenes con TinyPNG
¿No conoces TinyPNG? Se trata de una web que comprime el tamaño de tus imágenes sin que pierdas calidad. Algo parecido a lo que hace Photoshop al Guardar para Web.
Es útil pasar las imágenes por aquí después de haberlas guardado para web en Photoshop y antes de subirlas a la web, por si se pueden optimizar algo más.
Es una herramienta muy fácil. Subes las imágenes que quieras, esperas a que se compriman y las descargas.
4. Plugins para optimizar imágenes directamente en tu página web.
Si tu web está construida en WordPress, puedes utilizar cualquiera de estos plugins para optimizar (más aún, si cabe) tus imágenes:
Estos tres plugins son los más utilizados y son todos gratuitos. Yo los he probado los tres y todos han funcionado perfectamente. Actualmente tengo instalado en mi web Ewww Image Optimizer.
Estos plugins complementan la optimización con Photoshop y con TinyPNG.
Recuerda que a parte de estos plugins, debes instalar también otros para mejorar el posicionamiento SEO de tu web.
5. Por último, un plugin muy interesante para optimizar aún más la velocidad de carga de tu sitio web: BJ Lazy Load.
Con el plugin BJ Lazy Load puedes hacer que tus imágenes carguen “bajo demanda”. ¿Esto qué es? Se trata de una técnica para que no carguen todas las imágenes de tu web al abrir el sitio. De esta forma, las imágenes se irán cargando conforme vayan siendo necesarias.
Bajo mi punto de vista este plugin no me gusta demasiado, ya que perdemos en la calidad de la web. Como sabes, actualmente la mayoría de nosotros navegamos muy rápido por las webs y a mí personalmente me molesta tener que esperar a que una imagen aparezca.
Pero ya sabes, es cuestión de probar todas estas técnicas y elegir la(s) mejor(es).
Y hasta aquí mi listado de los consejos que debes seguir para mejorar la velocidad de carga de tu web gracias a la optimización de las imágenes.
Recuerda que aparte de la optimización de imágenes y de la velocidad de carga de la web, hay otros muchos factores a tener en cuenta en una página web para mejorar el Posicionamiento SEO.
¿Qué te ha parecido el recopilatorio? ¿Añadirías algo más? ¿Eres de los que está obsesionado con la optimización de las imágenes o solo comprimes una vez y ya? ¡Cuéntamelo en los comentarios!
Diseñadora web y experta en Marketing Digital y Social Media. Amante de la música, la informática y las nuevas tecnologías. Actualmente haciéndome un huequito en el mundo online con mi blog leonorcanuelo.com
