optimizar-imagenes-para-web

Optimizar imágenes para web. Trucos y Herramientas

Una de las cosas que más influyen en la velocidad de carga de una web son las imágenes. Por eso en esta guía voy a explicar cómo optimizar imágenes para web y las herramientas que puedes usar para hacerlo. Las webs lentas no le gustan a nadie, ni a Google (las penaliza) ni a los usuarios que no van a esperar una eternidad para ver el contenido.

Aquí te dejo todo el post resumido en un vídeo. Voy a usar este formato en casi todos los posts, te puedes suscribir al canal de YouTube si no quieres perderte los próximos vídeos.

 

La importancia de redimensionar las imágenes antes de subirlas

El primer paso para optimizar imágenes es redimensionarlas. Cuanto más grande sea la resolución de la imagen más pesará, cosa que no es compatible con que tu web se cargue rápido.

No vayas a subir tus fotos en “Full HD” con la excusa de que “- Es para que se vea bien”.

No estás creando un banco de imágenes para que se las descarguen tus visitas.

Caso práctico:

Si quiero colocar una imagen en el sidebar de mi blog primero tengo que averiguar el ancho que tiene el sidebar.

Supongamos que el sidebar tiene un ancho de 250 px. Esto quiere decir que aunque suba una imagen más grande se verá a 250 px de ancho, por lo cuál estoy desaprovechando el resto y lo único que consigo aumentar el tamaño de la página.

Para averiguar las dimensiones que debes usar te recomiendo usar el “Inspector de Elementos” de Chrome. En el vídeo te muestro cómo se hace.

Una vez que sepas las dimensiones las puedes redimensionar con programas como Paint, Photoshop o Gimp. En el vídeo te explico cómo hacerlo con Photoshop.

Herramientas para Redimensionar imágenes masivamente

Si trabajas con muchas imágenes como puede ser para crear un catálogo de productos o una galería redimensionarlas una  a una te llevaría mucho tiempo. Para redimensioanr imágenes de forma masiva te recomiendo alguna de estas herramientas.

JPEG Resizer 2.1

JPEG Resizer 2.1 programa para redimienasionar imágenes masivamente

JPEG Resizer 2.1 es un programa gratuito para Windows que no necesita instalación. Sólo tienes que ejecutarlo.

Descargar JPEG Resizer 2.1

Permite redimensionar imágenes según:

  • El lado más largo: ajusta el lado mas largo al tamaño que le indiques, mantendrá las proporciones sin distorsionar.
  • Establece un tamaño máximo para el ancho o alto.
  • Establece un tamaño exacto de ancho y alto.
  • O reducir la imagen según un porcentaje.

Otro punto a favor es que permite renombrar las imágenes masivamente añadiendo un prefijo, número y sufijo.

Además de eso, también sirve para comprimir las imágenes. Puedes regular el nivel de compresión/calidad.

Bulk Size Photos

Bulk Resize Photos

Es una herramienta online con la que puedes redimensionar las fotos de forma gratuita. Al igual que el programa anterior tienes la posibilidad de elegir como quieres redimensionarlas.

 

Optimizar imágenes para web con Photoshop

Con Photoshop además de crear las imágenes, también puedes optimizarlas para web de forma muy sencilla.

Sigue estos pasos:

Abre la foto que quieres comprimir y ve  a “Archivo”-> “Guardar para web”:

optimizar imagenes photoshop

Verás la siguiente ventana.

optimizar imágenes para web con Photoshop

Aquí puedes hacer varias cosas:

  • Cambiar las dimensiones de la imagen. Te recomiendo hacer esto antes de guardarla para web.
  • Seleccionar el formato: jpeg, png o gif.
  • Ajustar la calidad de la imagen.
  • Entre otras cosas

Yo recomiendo guardar las imágenes en formato JPEG con una calidad de 70 aproximadamente y para imágenes que necesiten transparencia como los logos usar el formato PNG.

Después de pasarla por Photoshop puedes reducir incluso más el peso de la imagen pasándola por alguna herramienta online que te voy a mencionar más a abajo.

 

Herramientas online para reducir el tamaño y comprimir imágenes

Existen muchas, voy a mencionar las que considero que son las mejores. Al optimizar las imágenes con herramietas online verás que algunas lo hacen mejor que otras según cada imagen.

Kraken.io

comprimir imagenes kraken

Llevo usando esta herramienta desde que la descubrí.

  • Comprime imágenes sin perder calidad. Puedes comprimir todas las imágenes que quieras siempre que el peso del archivo no pase de 1 mb
  • Puedes elegir tres formatos de compresión e importar las fotos desde DropBox, Google Drive y Box.
  • Dispone de un plugin para WordPress
  • La versión premium permite redimensionar las imágenes, optimizar todas las imágenes de una web simplemente introduciendo su url. Kraken se encargará de descargarlas y optimizarlas.

Desventajas:

  • No te permite realizar ningún ajuste de calidad, es todo automático. Aunque tampoco es necesario ya que el resultado que se obtiene es bastante bueno.
  • Tamaño de la imagen no puede superar 1 mb.

TinyPNG

compression imagenes png

Ventajas de esta herramienta:

  • Es una herramienta gratuita que permite comprimir hasta 20 imágenes a la vez con un tamaño máximo de 5 mb por imagen.
  • La compresión de las imágenes es muy buena y la perdida de calidad no se nota.
  • Puedes comprimir imágenes en formato PNG sin perder la transparencia.
  • Es posible integrar esta herramienta dentro de Photoshop mediante un plugin que han desarrollado.

Desventajas:

  • No hay ningún tipo de ajustes de compresión, sólo subes y descargas la imagen ya optimizada.

Compress Jpeg

Comprimir imagenes comress jpeg

Otra herramienta online para optimizar las imágenes.  Al poder ajustar el nivel de compresión puedes conseguir mejores resultados que con otras herramientas.

Algunas de sus ventajas:

  • Es completamente gratuita
  • Permite subir hasta 20 fotos
  • Comprime archivos en formato JPG, PNG o incluso PDF.
  • Descarga las imágenes comprimidas por separado o agrupados en un archivo ZIP.
  • Puedes ajustar el el nivel de compresión cosa que no ofrecen otras herramientas.

PunyPNG

PunyPNG - PNG Compression and Image Optimization

Funciona bien pero el límite de tamaño puede ser un incoveniente.

Ventajas

  • Al igual que otras herramientas permite optimizar has 20 archivos a la vez sin perder calidad.
  • Funciona con archivos en formato JPEG, PNG o GIF.
  • Si te registras obtienes ajustes de compresión avanzados.

Desventajas

  • No puedes subir imágenes superior a 500KB.

 

Plugins WordPress para optimizar imágenes

Si quieres optimizar las imágenes que ya tienes subidas a WordPress tienes dos opciones: las optimizas manualmente (una locura) o usas alguno de los siguientes plugins para que lo haga de forma automática.

WP Smush

WP Smush

Un plugin gratuito que comprime las imágenes que ya tienes subidas de 50 en 50 con la versión gratuita. Comprime cada imagen cuando las subes a WordPress.

También permite establecer un tamaño máximo a las imágenes que subes y el se encargará de redimensionarlas de forma automática.


EWWW Image Optimizer

EWWW Image Optimizer plugin compresión imagenes WordPress

Es un plugin bastante popular que reduce el peso de tus imágenes completamente gratis. Utiliza la técnica de “lossless”  por lo cual la perdida de calidad es mínima.

Permite optimizar de forma masiva todas las imágenes de tu librería de “Medios”.


Compress JPEG & PNG images

comprimir fotos JPEG PNG plugin wordpress

Esta es la versión para WordPress de la herramienta online que he mencionado antes. Para poder usarlo debes registrarte y obtener la clave API.

Podrás optimizar hasta 500 imágenes al mes de forma gratuita. Ofrece una buena relación entre compresión y calidad


ShortPixel Image Optimizer

ShortPixel Image Optimizer

Plugin para comprimir archivos en formato JPEG, PNG, GIF y PDF en WordPress. Máximo de 100 imágenes al mes.

Al igual que el plugin anterior debes registrarte para obtener la clave de la API y poder usarlo. Te permite crear un backup de las imágenes al optimizarlas por si algo sale mal.

Es compatible con WooCommerce, puedes elegir entre compresión lossy y lossless. Funciona con bien tanto en webs con HTTPS y HTTP.


Kraken Image Optimizer

Kraken Image Optimizer

Es el plugin de la herramienta online Kraken.io. Te permite optimizar las fotos que ya tienes en tu librería de medios y al subirlas. La versión gratuita tiene un límite de 100 mb al mes.

Soporta archivos en formato JPEG, GIF y PNG con un tamaño máximo de 32mb. La compresión se realiza en sus servidores por lo cual necesitas registrarte y obtener la clave de la API.

Zara 4 Image Compression

Zara 4 Image Compression

Es un plugin de compresión bastante nuevo, disponible también en versión online.

  • Optimiza tus imágenes al subirlas
  • Permite comprimir las fotos que ya tiene subidas de una una o masivamente.
  • Todas las compresiones se realizan en los servidores de Zara 4.
  • Compatible con los formatos JPEG y PNG.

Imagify Image Optimizer

Imagify Image Optimizer

Es un plugin con buena reputación que al igual que el resto te permite comprimir las imágenes de tu WordPress. Con la versión gratuita puedes comprimir hasta 25mb al mes.

Tiene tres niveles de compresión: normal, Agressive y Ultra. Es compatible con WooCommerce y NextGen Gallery.

Resumen

Espero que con lo que te he explicado en este post sepas ya cómo optimizar imágenes para web. Lo vuelvo a repetir, pero es muy importante que lo hagas para que tu web cargue rápido.

¿Entonces ya conoces el proceso que debes seguir?

  1. Averiguar el tamaño ideal a usar.
  2. Crear o redimensionar la imagen con esas dimensiones.
  3. Usar alguna de las herramientas compresión que menciono.
  4. No te conformes de solo usar una de ellas, usa varias para obtener una mayor optimización.

¿Que herramientas utilizas para optimizar tus imágenes? Déjame tu opinión en los comentarios y comparte si te ha gustado.

Un saludo!

Pin It on Pinterest

Shares
Share This