5 herramientas para optimizar imágenes y mejorar la velocidad de carga de tu blog

Las imágenes se han convertido en un elemento imprescindible para cualquier blog que quiera posicionarse con éxito en un mundo tan competitivo como el de la blogesfera.

Su potencial intrínseco es enorme pero, sorprendentemente, son muchos los bloggers que o bien no hacen uso apenas de ellas o no siguen la correcta metodología para sacarles el máximo provecho.

Mi recomendación es que hagas uso de ellas siempre que puedas, ya que son un excelente medio para:

  • Mantener la atención: con ellas lograrás captar la atención de tus lectores, entretenerlos y, en definitiva, lograr que se interesen más por tu artículo.
  • Facilitar la lectura: conseguirás aliviar la lectura de cualquier de tus lectores de tal forma que el proceso de captación de la información sea mucho más ameno.
  • Aprender: gracias al uso de imágenes como por ejemplo las infografías, tus lectores captarán de forma mucho más fácil el mensaje de tu artículo y podrán aplicar los conocimientos adquiridos de forma mucho más eficiente.
  • Mejorar la estética: un artículo con imágenes de calidad logrará dar un salto en calidad obteniendo una apariencia mucho más profesional.
  • Mejorar el posicionamiento: las imágenes son un elemento imprescindible en el posicionamiento por parte de los principales motores de búsqueda. Si quieres ser visible en internet necesitas incluir imágenes desde el primer día.

Por lo tanto, tanto si estás empezando en el mundo del blog como si ya llevas un tiempo con ello, no subestimes nunca el potencial de tus imágenes e incluye estos valiosos elementos desde el primer día con el objetivo de aportarle a tus lectores el valor extra de calidad que se merecen y a la vez beneficiarte de ello.

¿Quieres conocer 5 herramientas para optimizar las imágenes de tus artículos? Entonces, quédate con nosotros.

Aspectos que considerar en el uso de imágenes

Si bien es cierto que el uso de imágenes en un blog es algo totalmente prioritario, la metodología para incluirlas correctamente nunca debe pasarse por alto.

Lo malo es que las imágenes son de los elementos que más consumen ancho de banda, por lo que afectan directamente en el tiempo de carga de tu blog.

Por tanto, si quieres que la velocidad de carga se vea afectada lo mínimo posible tendrás que optimizarlas.

De lo contrario, si tu blog supera tiempo de cargas superiores a los 3 segundos esto estará causando no solo un efecto negativo en la experiencia de tus lectores, sino que afectará de forma directa en tu posicionamiento (y disminuirá tu visibilidad y exposición en la red).

En qué fijarte al optimizar imágenes

Al optimizar las imágenes, debemos tener en cuenta 2 parámetros fundamentales sobre los que actuar: la dimensión y el peso.

Veamos cada uno de ellos.

Tamaño o dimensión

El tamaño o dimensión de una imagen es una medida directa del número de píxeles que conforman dicha imagen.

¿Y qué es un píxel?

La unidad básica en color de una imagen digital.

La dimensión de una imagen responde a la siguiente fórmula:

Dimensión= altura en píxel x anchura en píxeles

Te aconsejo tener especial cuidado al recabar información en otros blogs sobre esta medida o cualquier otra relacionada con el uso y el tratamiento de imágenes, ya que es muy frecuente confundir la dimensión de una imagen con otros conceptos con la resolución.

Para evitar malentendidos, te aconsejo la lectura de este artículo sobre los fundamentos de la imagen digital.

De forma general podemos decir que una imagen es:

  • Grande: si tiene un tamaño igual o mayor a 1024×768 píxeles
  • Mediana: si el tamaño va de 320×240 a 1024×768 píxeles
  • Pequeña: si el tamaño es menor a 320×240 píxeles
  • Muy pequeña: si es menor a 100×100 píxeles

Para saber qué dimensión es la que se adapta mejor a tus necesidades tendrás que saber con exactitud cual es el ancho del contenido de cada una de las entradas de tu blog.

Si por ejemplo es de 800 px con dimensiones iguales o ligeramente superiores a este, tienes más que suficiente.

No caigas en el error de incluir imágenes de dimensiones exageradas. Optimiza su tamaño. Clic para tuitear

Es cierto que tu blog las adaptará automáticamente a su ancho pero estarás añadiendo un exceso de información totalmente innecesaria.

Peso

El segundo parámetro que tener en cuenta es el peso o espacios en bytes que ocupa la imagen en un dispositivo.

La dimensión de una imagen y el peso son medidas que están directamente relacionadas de tal forma que un aumento en el primer parámetro implicará un mayor peso de la misma.

En cuanto a su clasificación podemos decir que una imagen es:

  • Pesada: si tiene 1 MB o más
  • Mediano si va de 300 KB a 1 MB
  • Ligera: si es menor de 300 KB
  • Muy ligera: si el peso es inferior a 100 KB

Para el ámbito web te recomiendo usar de forma general imágenes con un peso igual o inferior a 300 KB.

Con eso te estarás asegurando una optimización más que aceptable.

Debes tener en cuenta que normalmente una bajada de la dimensión de la imagen, implica una reducción de su peso, aunque siempre podemos reducirlo un poco más con herramientas como las que te mostraré en un momento.

Por tanto, y a modo de resumen, siempre que vayas a subir imágenes nuevas en tu blog asegúrate de seguir los siguientes pasos:

  1. Ajusta las dimensiones de tus imágenes a un ancho cercano al del contenido de tu blog.
  2. Disminuye el peso a niveles aceptables (iguales o inferiores a 300 KB).
  3. Guárdalas en el formato adecuado (.jpg o .png normalmente).
  4. Comprueba que la calidad apenas se vea afectada.
  5. Haz un diagnóstico de la velocidad de carga de tu página mediante el uso de herramientas sencillas como Pingdom Tools o PageSpeed Tools.

Herramientas para reducir las dimensiones de tus imágenes

A continuación te muestro 2 herramientas online gratuitas que te permitirán modificar el tamaño en píxeles de tus imágenes.

Pixlr

herramienta para reducir dimensiones de imágenes Pixlr

Pixlr es una editor online cuyo objetivo principal es el de poder realizar retoques sencillos para optimizar nuestras imágenes en tan solo un par de segundos.

En la actualidad Pixlr cuenta con cuatro aplicaciones para utilizar dependiendo del dispositivo a través del cual estés accediendo a ellas (ordenador o smartphone):

Web Apps

Son aquellas que se encuentran disponibles para ser usadas desde tu ordenador. En ellas encontrarás:

  • Pixlr Editor: es su herramienta de edición de imágenes por excelencia. Gracias a ella podrás realizar multitud de acciones sobre tus imágenes como por ejemplo: modificar el tamaño, rotarlas, recortarlas, alterar el brillo y la saturación etc.
  • Pixlr Express: te sirve para aplicar filtros, capas y stickers personalizando aún más su apariencia.
  • Pixlr Omatic: con ella lograrás editar tus imágenes aplicándoles efectos “retros” con el objetivo de lograr así un efecto “vintage”.

Mobile

Esta aplicación está exclusivamente diseñada para el uso en dispositivos móviles smartphones y se encuentra disponible tanto en App Store como en Google Play.

Optimización con Pixlr Editor

Optimización con Pixlr editor

En nuestro caso, nos centraremos en la aplicación Pixlr, compatible con sistemas operativos tan usados como: Windows, Mac OS, Linux y Android.

¿Quieres más velocidad de carga en tu web? Pon a dieta tus fotos. Clic para tuitear

El procedimiento a seguir para optimizar tus imágenes es muy sencillo:

  1. Haz clic en la aplicación Pixlr Editor.
  2. Selecciona «Abrir una imagen desde el ordenador» y escoge tu imagen.
  3. Dirígete a «Imagen» > «Tamaño de imagen» y elige el ancho que necesites (la altura se modificará automáticamente). Pulsa OK.
  4. Ve a «Archivo» > «Guardar». Elige el formato y la calidad de la imagen. Pulsa OK.

Para comprender mejor su funcionamiento te traigo un vídeo donde te muestro paso a paso cómo reducir la dimensión de las imágenes fácilmente:

Gimp

herramienta imágenes Gimp

Otra opción sin lugar a dudas excelente es Gimp un software gratuito que te permitirá fácilmente retocar tus imágenes logrando resultados más que satisfactorios.

Esta potente herramienta se ha convertido en una alternativa a Photoshop cuyo número de adeptos crece día a día.

Entre muchas de sus característica destacan:

  • Seleccionar todo tipo de formas
  • Tijeras inteligentes para recortar
  • Herramientas de pintado
  • Rectificación de errores
  • Filtros
  • Posibilidad de exportar archivos en todo tipo de formatos (jpg, png, gif, svg, etc….)

Al igual que Pixlr podrás utilizarla en los sistemas operativos más conocidos hoy en día: Windows, Mac y Linux.

Para modificar el tamaño sigue los pasos:

  1. Abre tu programa Gimp.
  2. Ve a “Archivo” > “Abrir” y selecciona tu imagen.
  3. En “Imagen” escoge “Escalar imagen” y selecciona el ancho que necesites. Pulsa “Escala”.
  4. Ve a “Archivo” > “Exportar como”. Elige el tipo de formato y haz clic en “Exportar”.

Para facilitarte su uso aquí tienes otro vídeo donde aprenderás cómo modificar el tamaño de tus imágenes rápidamente:

En el vídeo te muestro la página de usuarios GIMP en español donde viene todo explicado en castellano. Si lo necesitas también puedes acceder a la página oficial del software aunque la información se encuentra exclusivamente en inglés.

Herramientas para reducir el peso de las imágenes

En esta sección del artículo nos centraremos en analizar 2 potentes herramientas diseñadas para reducir el peso de nuestras imágenes a la vez que conservamos su calidad en niveles más que aceptables.

TinyPNG

TinyPNG

TinyPNG es una de las mejores herramientas para comprimir tus imágenes tanto en formato png como jpeg manteniendo siempre la calidad al máximo.

Para comenzar a utilizar su herramienta de compresión basta con dirigirse a su página y seleccionar o arrastrar todas las imágenes que quieras optimizar con una limitación de 20 imágenes de hasta 5 MB cada una por cada optimización que realices.

Los resultados son niveles de compresión iguales o superiores a un 70% de su peso original.

Además, TinyPNG cuenta con varias opciones muy interesantes:

  • Photoshop plugin: por un precio de 50$ obtendrás un plugin que podrás instalar en tu Photoshop para comprimir tus imágenes directamente desde él.
  • WordPress plugin: TinyPNG cuenta con un plugin gratuito que te optimizará automáticamente hasta un máximo de 100 imágenes al mes de forma gratuita sin limitación de tamaño.
  • Magento: la empresa también ha desarrollado una extensión compatible con este CMS en caso de no querer utilizar WordPress como tu gestor de contenidos.
  • Developer API: si eres programador o te gusta el código TinyPNG se puede conectar a tu servidor de forma que todas tus imágenes se compriman al subirlas de forma automática.
  • Analyzer: si necesitas comprobar el rendimiento que tendría esta herramienta en tu sitio web solo tienes que introducir tu URL y obtendrás en un par de segundos un diagnóstico completo sobre ella.

Precio

TinyPNG tiene un plan de pago para la herramienta online en su página web.

Por un precio de 25 $ al año podrás incrementar la capacidad de subir imágenes para optimizarlas. Además, podrás optimizar más de 20 imágenes y superar la limitación del peso de 5 MB a 25 MB.

A su vez tendrás a tu disposición una mejora en su herramienta Analyzer que incorpora un sistema estadístico para analizar mejor tus optimizaciones.

Aquí tienes otro vídeo para facilitarte la comprensión de esta gran herramienta:

Compressor.io

CompresioIO

Otra herramienta interesante es Compressor.io, que logra porcentajes de compresión de hasta un 90%.

Compressor tiene dos niveles de compresión:

  • Lossy: te permite optimizar imágenes en formato jpeg, png, gif y svg a cambio de una reducción mínima de la calidad.
  • Lossless: mediante esta opción lograrás una optimización excelente sin mermar la calidad en absoluto.

Su funcionamiento es muy sencillo:

  1. Selecciona el tipo de compresión a ejecutar, Lossy o Lossless.
  2. Escoge o arrastra tu imagen a «Optimizar» y el proceso de iniciará de inmediato.
  3. Una vez finalizado solo tienes que seleccionar dónde se almacenará dicha imagen: en tu Google Drive o en Dropbox.

Si bien TinyPNG ofrece unas prestaciones para optimizar imágenes más interesantes, es cierto que Compressor es una opción imprescindible cuando se trata de optimizar imágenes en otros formatos menos utilizados, como el formato .gif o el .svg.

Aquí tienes tu vídeo sobre Compressor:

Imagify: la herramienta por excelencia

Imagify

Si lo que necesitas es optimizar tus imágenes de una atacada, modificando tanto la dimensión como el peso, tu opción definitiva se llama Imagify.

Esta herramienta te permite realizar el proceso de optimización mediante 2 vías:

  • Try for free: Utilizando la aplicación directamente desde su sitio web.
  • WordPress plugin: A través de un plugin desarrollado específicamente para WordPress.

Try for free

En esta sección encontrarás 2 opciones:

  • Image optimization: te permite elegir entre 3 niveles de compresión (Normal, Agressive y Ultra), así como elegir si quieres conservar la información relativa al formato Exif y/o modificar el tamaño tu imagen tanto en píxeles como en porcentajes.
  • Page optimisation: Imagify te permite optimizar todas las imágenes de una página web de forma automática para que compruebes por ti mismo el potencial de la aplicación. Solo tienes que introducir la URL de la página, esperar a el análisis y descargarte todas las imágenes optimizadas a cambio de tu registro.

WordPress plugin

La opción más atractiva es sin duda la de la instalación del plugin de Imagify a través del repositorio de WordPress.

Para su correcta configuración sigue los siguientes pasos:

  1. Una vez que hayas instalado y activado el plugin, solo copiar y pegar la llave API que Imagify te suministra a través de tu cuenta, en “API Integration”.
  2. Dirígete directamente a “Configuración ” y aplica los cambios que consideres oportuno. Te aconsejo dejarlo todo como está e incluir la opción “Reduce las imágenes más grandes”.
  3. Haz clic en “Guardar cambios”.

De esta manera, cada vez que subas una nueva imagen, Imagify optimizará tanto el peso como la dimensión de la imagen sin tener que estar perdiendo el tiempo en todas estas tareas.

Además el plugin Imagify viene con la opción “Optimización masiva” para tratar todas las imágenes presentes en tu sitio web que necesitan ser optimizadas.

Para ello solo tienes que dirigirte a “Imagify” > “Optimización masiva”, seleccionar el nivel de compresión y pulsar en “Imagifícalo todo”.

Gracias a sus estadísticas podrás analizar el porcentaje de compresión masiva que se ha llevado a cabo y, por tanto, cuánto has ahorrado mediante la aplicación de esta funcionalidad del plugin.

Precio

Imagify es una aplicación gratuita pero contiene una serie de limitaciones a tener en cuenta.

Para disfrutar de todas sus bondades es prioritario abrirte una una cuenta con ellos momento en el que dispondrás automáticamente de un total de 25 MB mensuales y otros 25 MB correspondientes al plan de un solo pago que veremos a continuación.

Si en tu caso necesitas más capacidad, para optimizar imágenes tendrás que recurrir a uno de los 2 tipos de planes:

  • Monthly plans: te ofrecen hasta 5 tipos de planes mensuales, cada uno con un límite de megas y coste diferente.
  • One time plans: si no quieres pagar mensualmente, pero te interesa aumentar tu capacidad de optimización, dispones de 3 planes de un único pago, cada uno con una serie de características particulares.

Para terminar te muestro un vídeo completo sobre Imagify:

Sugerencia de Hormigas en la Nube: PhotoSize

Photosize

Al habla Javier Gobea.

Además de las 5 opciones que ha explicado Pedro, hay otra que quiero comentarte para que la tengas en cuenta.

Se trata de PhotoSize, una herramienta gratuita para cuyo uso no necesitas instalar ninguna aplicación.

Con ella, podrás reducir el tamaño de tus imágenes desde ordenador o dispositivo móvil de una forma muy cómoda y sencilla. Además, permite editar y convertir el formato.

Veamos PhotoSize con algo más de detalle.

¿Cómo funciona PhotoSize?

Tan sencillo como seguir 3 pasos (que para mayor facilidad, los va indicando la propia herramienta).

Paso 1

Una vez que estás en la página, verás un recuadro en el que arrastrar la imagen con la que quieras trabajar o bien pinchar para cargarla. Admite multitud de formatos: JPG, TIF, PNG, PSD, BMP, GIF, JP2, PICT, JPC, PCX, y SGI.

cargar imagen en Photosize

Hecho esto, haz clic en «Step 2».

Paso 2

En este paso, podremos editar la imagen.

Al pinchar sobre el botón «Add filters», veremos un menú con 3 opciones:

  • Transformar (Transform): aquí podemos recortar, redimensionar o rotar la imagen como queramos.
  • Retocar (Touch up): permite modificar el contraste, el brillo, la saturación, afilar, reducir el ruido y añadir texto.
  • Añadir efectos (Effects): podrás elegir si quieres la imagen en el color original o cambiarla a blanco y negro, sepia, carboncillo, en negativo o con efecto en espiral.

Como verás cuando la pruebes, PhotoSize es sencilla e intuitiva. Lo único que debes tener en cuenta es que los cambios no se aplican de forma automática cuando los seleccionas, sino que para que se hagan efectivos deberás hacer clic en «Apply».

Por ejemplo, si yo quiero modificar el color de la foto destacada de este artículo y elijo la opción «Black and White» del menú de los efectos, justo debajo de la foto, debería hacer clic en el botón como muestro en la imagen:

Aplicar cambios en Photosize

 

Aparte de esto, poco misterio más tiene la herramienta. 🙂

Cuando has terminado de editar la imagen, llega el momento de ir al tercer y último paso.

Paso 3

Para terminar el proceso, en el paso 3 elegimos el formato (el desplegable de opciones es bastante amplio como verás), la calidad y el nombre.

Después hacemos clic en el botón «All Photos» y podremos descargar la imagen editada.

Descargar imagen editada en Photosize

Bastante fácil, ¿verdad?

Hay algo más que me gusta esta herramienta y es que permite deshacer todos los cambios (por muchos que hayas hecho).

En definitiva, es una alternativa muy interesante no solo para reducir el tamaño de las imágenes para el blog sino también como herramienta de edición básica.

No llega a las complejidades de Photoshop, y precisamente por eso me parece ideal si necesitas modificar algún aspecto de la imagen más allá del tamaño, pero no quieres complicarte la vida.

¿Conoces otra herramienta que no esté incluida y que sirva para optimizar imágenes? ¿Cuál vas a probar primero? Te espero en los comentarios.

Fuente de imagen: Shutterstock

Descubre lo que
necesitas ahora
para vender más

Realiza el Quiz ahora y conocerás el resultado al instante

¿Quieres saber qué herramientas uso en mi negocio, cuáles recomiendo a mis clientes y cuál necesitas tú ahora mismo, en el momento actual en el que te encuentras, para vender más o mejor en tu negocio digital?

Realiza ahora mismo el quiz tecnológico que he preparado, para determinar tu fase actual, y decirte en el instante en que deberías enfocarte ahora mismo para vender más o de la mejor forma posible

Mockup escritorio herramientas
Ir arriba