Acesse sua conta

Blog de Marketing Digital de Resultados

RD Station en español: Todo lo que necesitas saber sobre Marketing Digital y Ventas

Cómo comprimir imágenes sin perder calidad y aumentar la velocidad de tu sitio web

Comprimir las imágenes de tu sitio web, dejándolo más liviano, puede generar un aumento en el tráfico, en la tasa de conversión y mejorar el posicionamiento en Google

Todo editor o administrador de un sitio web/blog sabe la importancia que tiene comprimir imágenes en cada una de las páginas de un dominio.

No obstante, para tener un sitio web accesible, es necesario ir más allá de la simple tarea de elegir imágenes y subirlas en la plataforma.

En este artículo, hablaremos un poco sobre: 

  • Cómo funciona la compresión/compactación de imágenes; 
  • Cómo reducir el peso de las imágenes puede aumentar el tráfico y la tasa de conversión;
  • 7 plataformas online gratuitas que realizan el trabajo de compactar imágenes.  

Qué es compresión de imágenes

Antes de nada, debemos ampliar la visión e intentar entender un archivo de imagen como un conjunto de datos y píxeles. 

Dentro de cada archivo de imagen JPG, JPEG, PNG, GIF u otra extensión, hay metadatos e informaciones repetidas. El trabajo de la compresión es justamente retirar esas informaciones redundantes para disminuir el peso del archivo.

Por ejemplo, pensemos en cualquier píxel de una imagen. Posiblemente, el color o valor de esa imagen será igual a la de otros elementos dentro de la misma imagen. 

Cuando la imagen es comprimida, en vez de usar varios píxeles iguales y repetidos, esta guarda apenas un valor de ese píxel, que es reproducido para otros similares, ahorrando tiempo de carga. 

Existen dos formas de comprensión de imágenes:

Lossless (sin pérdida de datos)

Comprimir imágenes en lossless es la opción perfecta para quien requiere de la máxima calidad a todo costo. Generalmente usada por fotógrafos, la compresión de imágenes es hecha con archivos con más recursos, como TIFF y PNG.

Lossy (con pérdida de datos)

El formato de compresión recomendado para web resulta en una pequeña pérdida de calidad. Tan pequeñas que es poco notada por el ojo humano. En lossy, puedes optimizar la imagen en hasta 90% de su tamaño original, dependiendo de los casos. JPG, JPEG y GIF son los formatos más conocidos de imágenes con ese tipo de compresión. 

¿Cuál usar? ¿La compresión afectará mucho la calidad de la imagen?

Si necesitas de una imagen en alta resolución para imprimir, sí, afectará la calidad. 

Sin embargo, si el uso fuera apenas para el sitio web o blog de tu empresa, lo indicado es comprimir pues la reducción de calidad es prácticamente imperceptible. 

¿Quieres ver? Hicimos una simulación abajo. Intenta encontrar la diferencia:

Cómo comprimir imágenes

Por qué reducir el peso de las imágenes

Existen varios beneficios para quien mantiene un sitio web con las imágenes con tamaños optimizados. 

En primer lugar, entre más liviana sea tu página, más rápidamente esta será cargada para los visitantes. Y es importante mantener las páginas siempre lo más livianas posible, teniendo en vista que las velocidad de conexión varían mucho. 

Puede ser que tu sitio web esté abriendo rápido para ti, pero es recomendado que se haga una prueba en herramientas online para descubrir qué tan rápida realmente está tu página.

Google ofrece la herramienta Page Speed Insights, en el Search Console. Otras plataformas como WebPageTest y Pingdom también permiten que analices el tiempo de respuesta de tu página y cuáles son los archivos que están demandando un tiempo mayor de carga, desde imágenes hasta scripts y plugins.

comprimir imágenes

La herramienta PageSpeed Insights muestra cuál es la nota de tu sitio web en móvil y ordenador. 

Para saber más, lee el post Velocidad del sitio: aprende a hacer tests y deja tu página más rápida.

A nadie le gusta un sitio web lento

Sitios web lentos y con imágenes muy pesadas. A no ser que la imagen sea el enfoque del negocio, como sitio web de fotógrafos y estudios, no tiene sentido dejar los archivos consumiendo un mayor espacio. 

Por otra parte, incluso los sitios web de fotografía pueden optimizar su tiempo de carga. En caso que la opción sea mantener las imágenes en calidad alta, es posible optimizar el sitio utilizando imágenes de miniatura menores y que pueden ser ampliadas, ahí sí en toda su calidad, con la intervención del visitante.

Aún así, las diferencias pueden ser increíblemente sutiles. A no ser que estés necesitando de una imagen para impresión, no hay nada que impida que comprimas esas imágenes. 

Sitios web livianos generan más conversiones 

Para probar la teoría del subtítulo anterior, traeremos un estudio hecho por Mozilla, en 2010. 

La empresa, en la época, percibió que las tasas de conversión en Landing Pages estaban también asociadas, de cierta forma, al tiempo de carga de la página.

En un test A/B, la empresa notó que un aumento de 1 segundo en el tiempo de carga de la página correspondía a una caída 2.7% en las tasas de conversión.

Siendo así, Mozilla cortó 2.2 segundos de la landing page de Firefox. El resultado fue un aumento de 15% – o 60 millones – en el número de descargas del navegador.

Imágenes más livianas como estrategia de SEO

Es comprobado que, como estrategia de SEO, tener un sitio liviano ayuda en el ranking de Google.

La velocidad de carga del sitio es uno de los criterios llevados en consideración por Google y que puede definir – favorablemente o no – tu posicionamiento en la SERP.

(Kit) Guía Definitiva de SEO + Planilla de acompañamiento

Todo lo que debes saber para estar en la primera página de Google y atraer más visitantes calificados

El criterio es oficialmente revelado por Google desde 2010. Según una publicación en el Webmaster Central Blog, sitios web rápidos generan una mayor satisfacción por parte de la audiencia, lo que facilita conversiones y eventuales respuestas. Otro detalle, de acuerdo con estudios internos de Google, es que los visitantes pasan menos tiempo en sitios que son lentos.

Otra prueba de que Google se toma en serio este asunto es en relación a su nuevo logo, divulgado en 2015. Además de las características visuales, que tuvieron una modificación relevante, lo que llamó la atención también fue su peso. El nuevo logo de Google tiene  305 bytes, un peso considerablemente menor comparado a los 14.000 byte de la versión anterior. 

Por eso, es fácil concluir que el hecho de que Google esté notablemente preocupado por este aspecto, comprueba un alto grado de relevancia en optimizar las imágenes de tu sitio web.

7 sitios web en que puedes comprimir imágenes online

Reducir el peso de imágenes es un factor importante para una optimización completa de cualquier sitio. No obstante, no basta apenas con guardar en JPG. 

Existen algunas herramientas que comprimen aún más el peso de las imágenes. En este post, te daremos 7 tips: 

1 – Kraken

Kraken es una plataforma compresora que ofrece una forma fácil de hacer la optimización de imágenes. La interfaz web de Kraken permite que cargues cualquier imágen para ser comprimida y descargada posteriormente, tanto en Lossy como en Lossless.

La herramienta posee un plan gratuito que permite cargar imágenes de hasta 1 MB. También cuenta con planes de pago que ofrecen otras ventajas como redimensionamiento de imágenes y almacenamiento en la nube. 

Si tienes sitio web o un blog en WordPress, puedes descargar el plugin de Kraken y hacer optimizaciones en masa de imágenes ya publicadas. El siguiente tutorial (en vídeo) muestra cómo hacerlo:

2 – JPEGmini

Esta es otra plataforma, esta vez de pago en la que, luego de cargar el archivo, puedes compararlo con el original antes de realizar la descarga.  

En JPEGmini es posible cargar archivos de hasta 50 MB y posee una integración con Adobe Lightroom y Adobe Photoshop.

Es posible realizar una prueba gratuita de la herramienta antes de comprarla:

cómo comprimir imágenes

3 – WP Smush

WP Smush es un plugin freemium para WordPress con diversas opciones de compresión de imágenes.

Con este plugin, puedes optimizar todas las imágenes que ya están en tu directorio con pocos clics. 

La ventaja de la versión de pago es que posee un “autocompresor” ilimitado, que permite comprimir todas las imágenes de tu sitio de una vez. En la versión gratuita, el límite es de 50 imágenes (de hasta 1 MB cada una) de una vez.

4 – TinyPNG

A pesar de la nomenclatura, la plataforma también acepta otros archivos de imágenes además de PNG. En TinyPNG puedes subir hasta 20 archivos de forma simultánea, con peso máximo de 5 MB cada una.

La plataforma también cuenta con plugins para WordPress y Magento.

cómo comprimir imágenes

5 – Compress PNG

Así como las plataformas anteriores, Compress PNG tiene una interfaz para subir archivos. Con un máximo de 20 archivos simultáneos, luego de la compresión, puedes bajar todas las imágenes en un archivo comprimido. 

Además de PNG, la plataforma optimiza archivos JPG, JPEG, PDF y SVG.

comprimir imágenes

6 – iLoveIMG

La herramienta online iLoveIMG permite redimensionar, recortar y comprimir imágenes, además de convertir un archivo “de” o “para” el formato jpg. También puedes convertir HTML a imagen y añadir marca de agua.

La herramienta permite que la carga sea directamente en el computador, vía Dropbox o Google Drive.

Al finalizar la compresión, la herramienta muestra los resultados de la acción. 

comprimir imágenes

7 – Compressnow

La herramienta Compressnow es ideal para quien quiere personalizar al máximo el nivel de compresión de una imagen, ya que ofrece una regla que puede ser ajustada para más o menos compresión (de 0% a 100%).

Además, la herramienta muestra una vista previa de cómo la imagen quedará luego comprimida.

comprimir imágenes

Bonus: cómo comprimir imágenes en Photoshop

Es muy recomendable el uso de alguna de las plataformas mencionadas arriba para mantener tu sitio menos pesado y sin que las imágenes pierdan calidad. 

No obstante, antes de ese proceso, puedes optimizar las imágenes en software conocidos y usados en el medio, como es el caso de Photoshop.

Para comprimir imágenes en Photoshop, utiliza el comando “Guardar para web” (Alt+Shift+Ctrl+S) (Alt+Shift++S en Mac). Este comando permite exportar imágenes optimizadas para internet. Puedes hacer un control refinado sobre la imagen, al analizar las previsualizaciones antes de exportarla para formato web.

Comprimir imágenes

Cuida la calidad, pues con esas herramientas, dependiendo de qué tan bajo sea el nivel, pueden ocurrir pérdidas visibles. Por eso, haz pruebas y ve hasta qué punto la reducción de tamaño de la imagen no comprometerá el producto final. 

Otro detalle importante es cuidar las dimensiones de las imágenes. No hay necesidad de guardar imágenes con dimensiones mayores al máximo que el layout permite.

Usar las imágenes comprimidas y en las dimensiones correctas puede ahorrar un buen tiempo de carga de tu sitio web y, en consecuencia, mejorar la experiencia del usuario y el desempeño en el posicionamiento de Google.

(Kit) Guía Definitiva de SEO + Planilla de acompañamiento

Todo lo que debes saber para estar en la primera página de Google y atraer más visitantes calificados

Tags:

Deja tu comentario

Comentários