Ya os comentamos en el post de 25 errores de SEO comunes que la optimización de las imágenes es esencial para tener un buen SEO y requiere su tiempo. Por eso hoy, os vamos a contar nuestros trucos para optimizar las imágenes para tu web sin que pierdan calidad.

Tener contenido de calidad es esencial para atraer usuarios a la web, pero tener unas imágenes de poca calidad o cutres no ayudan nada y pueden dar una sensación de poca profesionalidad.

Ahora bien, ¿cómo se puede llegar a un equilibrio para que una imagen que pesa casi 4MG se vea en buena calidad y pensando menos de 100kb, sin que se vea pixelada? Te lo contamos.

Ventajas de optimizar tus imágenes para la web

La optimización de las imágenes tiene un único objetivo: que Google no nos odie por tener unas imágenes muy pesadas en nuestra web y obliguemos así al usuario a gastar datos casi a lo tonto, cuando podemos reducirlas mejorando la usabilidad en nuestra web.

Haciendo eso, Google verá que ofrecemos contenido de calidad y que además, pensamos en el usuario mejorando su experiencia. Eso señores, es un punto para nosotros.

Otra ventaja es que una imagen no optimizada ralentizará tu web haciendo que el tiempo de carga sea mucho mayor y por ende, a Google no le gustará y no estaremos entre las primeras posiciones del buscador.

Además, al optimizar las imágenes para tu web tendrás los siguientes beneficios:

 Optimizar una imagen mejora tu SEO. Al pesar más la web, esta se cargará más despacio y por ende, será más lento y esto a Google y a los motores de búsqueda no les gusta mucho.

 Al reducir el tamaño de las imagenes, ya te hemos dicho que cargará mucho más rápido tu web. Esto ayudará a que se muestre tu web mucho más a los usuarios en los motores de búsqueda, por lo que tendrás una posibilidad mayor de conseguir clientes nuevos.

 Las copias de seguridad de tu sitio web serán mucho más rápidas de hacerse.

 Una imagen de 2MG obliga al usuario a gastar datos para verla, esto lo entiende Google como que no es un valor añadido para el usuario, por lo que no le caerás bien, por así decirlo. Al reducirlas, se utilizan menos datos de carga, favoreciendo al usuario.

 Una imagen optimizada ocupa mucho menos espacio de almacenamiento en el servidor. Esto depende de la cantidad de miniaturas que se creen y del tamaño de estas.

Elige el mejor formato para las imágenes de tu web

Cómo optimizar las imágenes de tu web

Hay una cosa que debes de saber antes de elegir el formato para las imágenes de tu web y es que dependiendo de lo que sea y su uso, hay formatos que se adaptan mejor.

Estos son los formatos de imagen que puedes utilizar:

 PNG. Este formato reproduce imágenes de mayor calidad y por ende, tiene un tamaño mayor. Suele ser utilizado para los logos o para los iconos de una web.

 JPGE. Este formato es el mejor para las imágenes de tu web, tanto para el blog como para material visual en las páginas. Se puede llegar a conseguir un buen equilibrio entre calidad y tamaño bastante aceptable.

 GIF. Este formato es la mejor opción para imágenes animadas, tipo sliders o vídeos de fotos.

 SVG. Este es un formato de gráfico escalables, viene muy bien para los iconos o incluso el logo de tu web. Para usar este formato necesitarás instalar un plugin en tu wordpress, nuestro favorito y el más conocido es el SVG Support.

Pasos para optimizar las imágenes de nuestra web

Una vez hemos visto el formato que le va mejor para las imágenes de tu web y las ventajas que tendrás al optimizar las imágenes de tu web, vamos con los pasos que has de seguir.

1. Optimizar tu imagen en Photoshop

Cómo optimizar las imágenes de tu web con Photoshop

Nuestro primer paso es abrir una imagen en Photoshop, esta que hemos elegido pesa 19MG, un tamaño bastante elevado para imagen de una web.

Optimiza tus imágenes con Photoshop

Nos dirigiremos a cambiar el tamaño de la imagen, es decir, cambiaremos los píxeles de alto y ancho. Nuestra imagen elegida la cambiamos a unos 700×467 píxeles respectivamente. Para saber qué tamaño te viene mejor para tu web, siempre puedes utilizar la extensión Page Ruler de Chrome.

Uno de los pasos opcionales es modificar el tamaño del lienzo. Si utilizamos la opción ancla, Photoshop reducirá el tamaño de la imagen sin distorsionarla y además, le indicamos qué parte es la que más nos importa de ella.

Optimizar las imágenes con Photoshop

Después de esto, vamos a exportarla para web en formato jpeg. dado que será una imagen para nuestro blog, y vemos como nuestra imagen de 19MG, pesa ahora solo 10,2Kb. Podéis juzgar vosotros mismos la pérdida casi imperceptible de la calidad.

Comparación de imágenes

Además, en esta opción, podemos ver cuánto tardará nuestra web en cargar esta imagen. Es un plus para controlar la velocidad de nuestra web.

2. Pasa tu imagen en Compressor.io

Si no conoces Compressor.io, seguro que acabas cogiéndole cariño, como lo hemos hecho nosotros.

Es una herramienta con la que podemos reducir el tamaño de nuestras imágenes de una manera sencilla y rápida.

Se puede utilizar con distintos formatos :JPG, SVG, GIF y PNG.

Imágenes optimizadas

Nosotros la utilizamos para finiquitar la optimización de nuestras imágenes, de esta manera nos aseguramos que el tamaño de nuestras imágenes es el mínimo que podíamos conseguir. En este caso, la imagen anterior paso de pesar 10kb a 8kb.

Y para rematar, el plugin Smush Image Compression and Optimization permite reducir las imágenes un poco más.

Sabemos que es un trabajo, pero a la larga agradecerás dedicarle tiempo a la optimización de tus imágenes.

3. Optimiza iconos y logotipos en Photoshop

Seguro que también quieres subir el logo de tu web en una calidad óptima pero sin que tarde una vida en cargarse o que se vea en poca calidad y quede poco profesional.

A veces el formato que mejor nos puede venir para nuestro logotipo o una ilustración de colores planos, es el formato svg. Ya que este reduce mucho el tamaño del archivo. Además, es un formato redimensionable por lo que puede ponerle el tamaño que quieras que no perderá calidad en cualquier tipo de pantalla, por mucho que el usuario amplíe la ventana del navegador.

Pero como todo, tiene su parte negativa. Debes de saber que es un formato que puede generar problemas en la seguridad de la web. Resulta que es un archivo de código XML y si te encuentras con una persona con un alma oscura o un hacker con malas intenciones, puede infectar tu código y por ende tu web.

Así que úsalo con cuidado y cabeza.

 

5 herramientas que te ayudan a optimizar las imágenes sin perder calidad

Además de Compressor.io, hay otras herramientas que te ayudarán a optimizar tus imágenes sin perder calidad o manteniendo un equilibrio entre tamaño y calidad. Vamos a recomendarte 4 herramientas:

 Kraken

Es una herramienta similar a Compressor.ir, pero Kraken cuenta con dos versiones, una gratuita y otra en formato Pro.

Esta herramienta cuenta con una interfaz para comprimir nuestras imágenes, pero si tienes la cuenta gratuita sólo podrás comprimir formatos JPEG y PNG.

Como toda cuenta Pro, tienes muchas más facilidades, así como subir archivos más grandes y puedes descargar tus imágenes desde tu nube en cualquier momento.

 TinyJPEG y TinyPNG

Ambas herramientas están especializadas para comprimir imágenes de formatos JPEG o PNG, respectivamente.

TinyJPEG

TinyPNG reduce tus archivos .png disminuye el número de colores de tu imagen de una forma casi notable, pero reduciendo su tamaño. Además, mantiene el fondo transparente de tu imagen, algo que es de agradecer.

Lo mismo pasa con TinyJPEG, ya que reduce las imágenes sin perder calidad, a no ser que queramos reducir la imagen más de lo que nos proporciona la aplicación.

 Image Optimizer

Esta es una herramienta que podemos encontrarla online o en los Windows de una manera gratuita.

Con Image Optimizer podemos reducir el tamaño, redimensionarlas o comprimirlas para optimizar las imágenes de tu web.

 ImageOptim

Esta es una herramienta disponible para los usuarios que tienen disponible un Mac. Es muy simple pero muy útil para comprimir las imágenes, además ImageOptim deja optimizar varias a la vez.

 Squoosh

Esta es otra herramienta para optimizar las imágenes de tu web. Es tan sencilla usarla como las que te hemos nombrado anteriormente: seleccionas tu imagen, la arrastras hasta su pantalla y aligas la calidad que deseas. Además de poder redimensionarla.

Plugins que te ayudarán a optimizar tus imágenes

Ahora bien, si eres una persona con apenas tiempo, vamos a recomendarte un par de plugins para WordPress que te ayudarán a optimizar tus imágenes.

Nuestra recomendación es subirlas ya optimizadas, pero nunca está de más tener un plugins así.

Esta es nuestra lista de plugin recomendados, casi todos tienen una parte gratuita y otra de pago:

 Imagify Image Optimizer

 ShortPixel Image Optimizer

 Optimus Image Optimizer

 TinyPNG (aunque soporta también JPGE)

 ImageRecycle

 Smush Image

Esperamos que te hasta gustado este post, un poco más largo de lo normal pero muy necesario.

Recuerda que si necesitas ayuda con tu web o cualquier tipo de servicio, estamos aquí para ayudarte.