A nuestro cerebro le gustan mucho más las imágenes que las letras. Eso ya lo sabemos. Y por eso, acompañamos nuestro contenido de tantas figuras. No solo hablamos de fotografías, sino también de infografías, vectores, ilustraciones. Sin embargo, la necesidad imperiosa de que nuestro contenido sea tan visual tiene una cara oculta: el mayor peso de nuestro sitio. Por eso es tan importante optimizar las imágenes.
Según estudios, más del 50% del peso de un sitio está dado por sus imágenes. Y como la creación de contenido no tiene fin, a mayor historia de un blog, mayor cantidad de imágenes almacenadas. Entonces, como ya te habrás dado cuenta, la optimización es fundamental.
En esta guía te explicaremos cómo utilizar imágenes de calidad sin sobrecargar tu sitio y sin afectar tu desempeño en SEO. Allá vamos!
Tabla de Contenido
¿Qué Significa “Optimizar”?
Comúnmente cuando nos referimos a optimización de imágenes nos referimos a disminuir su tamaño. Esto significa básicamente reducir su peso. Y lo hacemos con el fin de que el espacio que ocupan en nuestro sitio sea el menor posible evitando que demoren la carga.
La reducción de peso se puede hacer de dos maneras:
- Con pérdida: en este caso, la compresión de la imágen se realiza eliminando datos, lo que impacta en forma directa en la calidad de la imágen. Se debe utilizar este método con mucho cuidado evitando grandes degradaciones de la imagen.
- Sin pérdida: comprimiendo de esta manera no se pierden datos, sino que se comprimen. Para poder realizar este proceso la imagen debe estar descomprimida. Generalmente se conoce esta forma de reducción como renderizado. Si bien es inevitable la pérdida de calidad, la imagen no se degrada tanto porque no pierde información.
El método a elegir dependerá de la ocasión y de lo que consideres más adecuado. La decisión siempre debe ser tomada apuntando a un equilibrio entre peso y calidad:
- Menor tasa de compresión > Mayor calidad > Mayor tamaño
- Mayor tasa de compresión > Menor calidad > Menor tamaño
¿Por Qué Es Necesario Bajar El Peso De Las Imágenes?
Recuerdas que el SEO es la Optimización de los Motores de Búsqueda. Por lo tanto implica la maximización del rendimiento de una página. Dentro de ésta, las imágenes, como decíamos arriba, constituyen más de la mitad del espacio total. Entonces, la optimización de imágenes es muy importante porque nos permite mejorar muchos de los parámetros que los buscadores miden para posicionar. Veamos cuáles:
Con la creciente navegación móvil, no es posible darle la espalda a la necesidad de que tus sitios funcionen adecuadamente para estos dispositivos. Un factor SEO importante en este sentido es el diseño responsive ya que Google prioriza en los resultados aquellos sitios adecuados a móviles (cuando la búsqueda se genera desde estos medios).
Pues bien, además de este factor, el peso de las imágenes se vuelve esencial para los usuarios de móviles. Piensa que la velocidad de las conexiones 4G pueden demorar más en bajar contenido que la conexión en una PC.
SEO
Los motores de indexación de Google son amantes del trabajo liviano, no quieren ni esforzarse mucho ni esperar. Por eso una página lenta tendrá menos posibilidades de indexación y por lo tanto de posicionamiento. Otra vez, imágenes livianas ayudarán a una carga más rápida y por lo tanto a la mejora de tu SEO.
Además con imágenes más comprimidas, seguramente Google las rastree mejor para la búsqueda de imágenes lo que es otro punto a favor de tu posicionamiento.
Experiencia Del Usuario
Como usuarios de la web sabemos ciertamente que nadie quiere esperar por una página que demora en cargar. Ni al entrar al sitio ni al pasar de una página a otra. Por eso sobrecargar tu sitio con imágenes pesadas puede significar una mala experiencia para el usuario y eso implica una alta tasa de rebote.
Otros Beneficios De Comprimir Imágenes
Copias de seguridad más rápidas: cuanto menos pese tu contenido más rápidos serán tus backups y eso significa ahorro de tiempo y de recursos.
Menor espacio de almacenamiento: contenidos más livianos ocupan menos espacio no solo en servidores sino también en dispositivos de backup.
Menor ancho de banda: los sitios más livianos ocupan un menor ancho de banda. Esto facilitará el trabajo de redes y navegadores.
¿Cómo Comprimir Imágenes Para Web?
Ya hemos visto porque es importante bajar el peso de las imágenes en una web, ahora nos enfocaremos en cómo hacerlo.
En principio debemos decir que las imágenes se pueden comprimir:
- Antes de subirlas a un gestor de contenido (ej. WordPress) o sitio.
- Una vez subidas.
Lo que varía en uno u otro caso son las herramientas a utilizar, pero los pasos a seguir son los mismos.
Pasos Para Reducir El Peso De Las Imágenes
1. Elige El Tipo De Compresión
Cómo dijimos al principio, la reducción del peso puede ser con pérdida de datos o sin pérdida. Para cada caso y aplicación deberás elegir el mejor método. La meta es mantener la calidad reduciendo el tamaño lo máximo posible.
2. Elige El Tipo De Archivo Adecuado
Existen varios tipos de archivos o extensiones para imágenes. También según la calidad y el uso que se haga de ellas, será mejor uno u otro. Veamos cuáles son:
- JPG: Si bien es un formato de compresión con pérdidas, permite manejar altos rangos de reducción con una elevada calidad. Procesa 16 millones de colores por lo que es ideal para imágenes de colores continuos como fotografías.
- GIF: Es un formato de compresión sin pérdidas pero bastante limitado. Solamente maneja 256 colores, razón por la cual ha quedado obsoleto y solo se utiliza para imágenes animadas.
- PNG: Comprime sin pérdida y por lo tanto obtiene una calidad mayor pero también un peso más alto. Es ideal para imágenes con grandes espacios en blanco (menos datos) como pueden ser fotos de pantalla, logotipos, etc.
- EPS o SVG: son formatos cada vez más utilizados para logotipos o iconos, totalmente escalables a distintas resoluciones.
Tip: lo ideal para utilizar en un sitio es mantener el formato JPG para fotografías sobre todo si son grandes y el PNG para logotipos o imágenes sencillas.
3. Reduce El Peso De Los Archivos
Muy bien, ya sabes qué tipo de compresión utilizarás y qué tipo de formato le darás. Es momento de poner manos a la obra y mejorar tus imágenes. Hemos dicho que este proceso puede hacerse previamente a subir las imágenes o una vez subidas y que para cada caso hay distintas herramientas. Veámoslo en detalle:
Herramientas de compresión previa (antes de subirlas):
- Programas de edición de imágenes
- Páginas para comprimir imágenes.
Herramientas para comprensión en WordPress (el gestor de contenido por excelencia):
- Plugins de compresión de imágenes.
En el próximo apartado veremos en detalle estas herramientas.
Herramientas Para Comprimir Imágenes
Programas De Edición De Imágenes (en tu ordenador)
Photoshop
Es uno de mis preferidos. Cómo lo utilizo para procesar imágenes me resulta muy práctico usarlo también para comprimirlas.
¿Cómo hacerlo?
Simplemente abres tu imagen en Photoshop y en el menú “Archivo” eliges la opción “Exportar” / “Guardar para Web”.
Allí podrás elegir el tipo de archivo de compresión que necesitas: gif, jpg, png.
Calidad: puedes definir la calidad por niveles (baja a máxima). Verás que al elegir una opción el número ubicado al lado sube o baja. La escala de calidad puede variar entre 0 que es la peor calidad y la máxima compresión y 100 que es lo contrario. Puedes también ingresar el valor de calidad deseado manualmente.
Opción de Carga: puedes optar por una bajada progresiva, que significa que la imagen aparecerá entera en la página pero primero con calidad pobre que irá mejorando paulatinamente. En cambio, si no lo tildas, la imagen parecerá directamente en la calidad final pero irá bajando lentamente por partes.
Si eliges PNG:
Calidad: puedes optar por PNG-8 que procesa 256 colores o PNG-24 que comprime 16 millones de colores.
Opción de Carga: puedes tildar la opción entrelazado que es bastante similar al método progresivo en jpg.
Adicionalmente puedes tildar “transparencia” para que tu imagen tenga un fondo transparente.
Tip1: con Photoshop en el menú “Imagen” / “tamaño de la imagen” podrás modificar el tamaño ya sea en cm., pixeles o dpi. Es muy útil para ciertos casos. Puedes ajustar una imagen a un formato predeterminado. Recuerda siempre exportar el archivo como “Guardar para Web”.
Tip2: Cuando trabajas con gran cantidad de imágenes, Photoshop es genial. Puedes grabar una acción mostrándote al programa todo lo que deseas hacer en una imagen de ejemplo. Es decir, puedes reducir el tamaño, guardarla para web, elegir el tipo de archivo, la calidad y la forma de carga. Finalizas la acción y la guardas.
Luego abres un lote de imágenes y le aplicas la acción. No importa cuantas sean las imágenes. En unos segundos tendrás todas en el formato que necesitas.
Otros Editores y Optimizaciones De Imágenes Para Tu Ordenador.
- Affinity: funciona muy similar al Photoshop y es más barata.
- Gimp: es una alternativa al Photoshop utilizada cada vez por más profesionales.
- ImageOptim: es un programa para Mac que te permitirá reducir el tamaño de tu imagen y eliminar metadatos.
- Riot: similar a ImageOptim pero para PC.
Páginas Para Comprimir Imágenes
Se trata de herramientas para optimizar imágenes pero que no necesitan que las instales en tu ordenador. Hay muchísimas. La que utilizo personalmente es Pic Resize.
Pic Resize
Simplemente subes la imagen a reducir y le das click a “Continue”. Pasarás a una nueva pantalla donde verás la imágen y podrás:
- Seleccionar parte o toda la imágen.
- Cortarla.
- Rotarla o girarla.
- Elegir un porcentaje de reducción.
- Elegir una resolución dada.
- Personalizar una resolución.
- Aplicarle efectos.
- Definir el tipo de archivo comprimido.
Luego de haber determinado tus opciones click en “I´m Done….” y queda terminado. Podrás bajarla a tu PC, obtener un resumen de edición, guardarlo para web o simplemente ver la imagen.
Es una opción muy práctica y rápida para reducir tus archivos y optimizarlos para que funcionen mejor en tu sitio.
Tiny PNG o Tiny JPG
Esta página para comprimir imágenes es una herramienta que logra reducciones muy buenas, a veces de hasta una cuarta parte del peso. Realiza la compresión sin reducir el tamaño en pixeles. Puedes hacerlo en forma individual o en lote (hasta 20 imágenes). El peso máximo del archivo a subir es de 5 MB.
En el formato PNG realiza una compresión con pérdida reduciendo la cantidad de colores para disminuir la cantidad de bytes necesaria y el efecto es casi imperceptible.
Shrink Me
Es una herramienta muy rápida que logra compresiones de hasta un 60%. Puedes usarla con o sin conexión y subir archivos sin límite de peso. Es muy fácil de usar, simplemente arrastras los archivos a la página principal y listo.
Compressor.io
Puedes reducir archivos PNG, JPG, GIF y SVG con o sin pérdida. En la opción sin pérdida puedes lograr una imagen de alta calidad sin degradaciones pero con mayor peso. Con pérdida obtendrás hasta un 90% de reducción de peso pero, recuerda, que deberás evaluar la calidad final para saber cuál será el límite a aplicar. Puedes subir archivos de hasta 10MB cada uno.
Optimizillia
Optimiza archivos PNG y JPG y los reduce buscando un equilibrio entre calidad y compresión máxima con pérdida. Puedes subir hasta 20 archivos y comprimirlos en lote. Luego del proceso podrás ver miniaturas y ajustar el nivel de calidad, nivel de compresión y comparar imágenes (muestra el original y el nuevo archivo para verificar cambios).
Otras Páginas Para Comprimir Imágenes.
- Kraken.io
- ILoveIMG
- Compressjpg
- Compressnow
- ImageOptimizer
- ImageOptim (usuarios de Mac)
Plugins Para Comprimir Imágenes: ¿Cómo Optimizar Imágenes En WordPress?
¿Recuerdas que te había dicho que las imágenes pueden reducirse antes de subirse o una vez subidas? Pues bien, los dos métodos anteriores son para una compresión previa a la carga de archivos. Ahora veremos cómo reducirlos una vez subidos.
Te diré que puedes utilizar ambas opciones a la vez, optimizando antes de subir el archivo y luego nuevamente al cargarlo a tu gestor. El límite, claramente, depende de la calidad de la imágen. Además, como consejo personal, evita subir imágenes pesadas a WordPress para luego optimizarlas porque eso te llevará mucho espacio. Intenta siempre subir archivos livianos.
Dicho esto, veremos cómo optimizar imágenes en WordPress a través de plugins.
WP Smush
Con este plugin, podrás reducir el peso de las imágenes que ya tienes cargadas en tu gestor o las que nuevas que vayas subiendo. Trabaja con archivos jpg, png o gif y puede comprimir hasta 50 al mismo tiempo. Es una herramienta Freemium. El límite de la versión gratuita es de 1MB por archivo.
Utilizarlo es simple. Puedes hacerlo en forma automática (seteando de forma que comprima todo archivo que supere un determinado tamaño) o bien indicarlo manualmente para cada foto.
Short Pixel Image Optimizer
Es una herramienta gratuita con la que podrás optimizar hasta 100 imágenes por mes. Maneja archivos PNG, JPG, GIF, WebP y hasta PDF. Puede comprimir tanto con o sin pérdida. El funcionamiento de este plugin es simple, cambia los colores de CMYK a RGB. Para esta transformación sube los archivos a la nube y luego los instala nuevamente en el gestor, reemplazando a los anteriores.
Te permite optimizar imágenes para la versión escritorio y móvil. Esta herramienta puedes encontrarla también como versión on line.
Tips: si quieres mantener el tamaño original de las imágenes por si acaso, haz una copia de seguridad porque cambiará los formatos originales. Otra opción es configurarlo para que guarde una carpeta independiente con los tamaños originales.
Otros Plugins Que Puedes Utilizar.
- Imagify (también en la nube)
- Optimus
- TinyPNG (también es plugin)
- Image Recycle
- Ewww Image Optimizer
- Optimizador.io
Bonnus: Squoosh De Google
En noviembre pasado Google lanzó su aplicación para optimizar imágenes. Dado que la velocidad de página es uno de los atributos que este buscador valora para rankear páginas, con esta herramienta ayuda a los desarrolladores a mejorar este aspecto.
Puedes usarla tanto con como sin conexión y en tu PC tanto como en tu móvil. Comprime archivos JPG, WebP, OptiPNG, MozJPG y PNG. Aquí te dejo una demo para que lo conozcas mejor.
Conclusión
El objetivo de esta guía ha sido mostrarte cómo comprimir imágenes para web, incluyendo todas las variantes posibles. Si bien no considero que haya una forma mejor que otra, si es importante seleccionar los métodos de optimización pensando no solo en reducir el peso de la imagen, sino también en ahorrar recursos.
Por eso, a mi criterio, siempre es mejor optimizar las imágenes antes de subirlas. De este modo no tendrás los originales alojados en tu sitio ni en tu servidor, con todas la ventajas que esto supone para tu posicionamiento. Por otro lado, recuerda que el ahorro de plugins es importante para mejorar la velocidad de tu sitio.
Personalmente prefiero no instalar plugins de optimización a menos que necesite mejorar las imágenes que ya tengo cargadas en mi sitio. Mi criterio es ahorrar recursos utilizando solo los plugins que realmente necesito. Por eso, si puedo hacer el mismo trabajo por fuera del gestor, no lo dudo.
Espero que esta guía te sea de utilidad para optimizar tus imágenes. Recuerda que son muy necesarias para tus contenidos. Ya sabes, ojos que no ven…
Deja un comentario