Cómo optimizar imágenes (y 4 herramientas gratuitas)

Es un hecho que cada vez es más importante tener páginas web que atraigan la atención de los usuarios, los cautive y mejore su experiencia con la marca. En este aspecto, las imágenes son una parte esencial en cualquier entorno digital.

El uso masivo de móviles y la dificultad que conlleva comunicar en un espacio limitado aumentaron la importancia de los elementos visuales (imágenes y multimedia).

Por otro lado, la competencia por la velocidad de carga de los sitios web ha incrementado la necesidad de optimizar sus imágenes sin modificar su calidad y funcionalidad. Esto beneficia el posicionamiento de tu página en el ranking del buscador de imágenes de Google, lo que incrementa tus visitas cualificadas.

Para este procedimiento, se pueden emplear técnicas del diseño web profesional como la compresión (con o sin pérdida), la reducción de resolución y la conversión a formatos más eficientes (como JPEG o WebP). El objetivo de todas es lograr una visualización y transferencia de datos efectiva.

Ventajas de optimizar imágenes

Esta práctica brinda diversos beneficios para la gestión de entornos digitales y la creación de mejores experiencias de navegación. Aquí tienes las principales ventajas de hacer una adecuada optimización de imágenes.

• Incrementas la velocidad carga de tu página web: si la carga de los sitios web es más rápida en sitios web, los usuario no tendrán que esperar tanto tiempo para visualizar alguna página o sección.
• Ahorras en ancho de banda: al disminuir el espacio, se reduce también el consumo de datos y los costes de alojamiento en sitios web y transferencia de archivos.
• Aportas a un diseño responsive: las mejoras en la carga de multimedia beneficia la navegación en varios dispositivos, sobre todo, los móviles.
• Ganas posicionamiento en los motores de búsqueda: los sitios con carga rápida suelen tener mejor posicionamiento en los resultados de búsqueda, lo que favorece a la visibilidad de tu marca en la red. Además, recuerda que una imagen también compite por posicionamiento SEO en las intenciones de búsqueda de los usuarios. 
• Mejoras la experiencia de usuario: las imágenes optimizadas permiten una experiencia de usuario más fluida y satisfactoria, lo que aumenta la retención y fidelidad de los visitantes.
• Ayudas a la compatibilidad: gracias a esta técnica, puedes adaptar mejor tu sitio a diferentes dispositivos y resoluciones, lo que garantizará una visualización adecuada en todos los medios.
• Obtienes un factor de conversión: un sitio web más rápido y atractivo puede aumentar las tasas de conversión y ventas.

Consejos para optimizar imágenes

Al crear una página web gratis, aplica las siguientes recomendaciones de optimización de imágenes. Hay muchas formas de realizarlo, según las necesidades que tengas, sin embargo, estos consejos te serán de gran ayuda de manera general para lograrlo.

1. Elige imágenes de buena calidad y relevantes

Incluir fotografías de buena calidad que sean relevantes para tu audiencia es el primer paso para cautivarlos. Esto es uno de los retos más difíciles para muchos creadores de contenido, pero el esfuerzo de encontrar fotos auténticas será recompensado a largo plazo por el tráfico orgánico que propicia.

Aunque es mejor crear tus ilustraciones desde cero, existen muchos bancos de imágenes que son gratis o tienen un precio accesible donde podrás encontrar contenido visual para tus proyectos.

2. Dale prioridad al posicionamiento de la imagen

Una buena foto es una oportunidad instantánea para enganchar al visitante a tu web. No pierdas esta ventaja por problemas de visualización. Aprovecha los primeros segundos de interacción con tu lector para presentarles algo que los motive a seguir leyendo. Te recomendamos enfocarte en la sección superior (above the fold) de tu sitio web.

3. Considera la importancia para el SEO

No olvides que las fotografías afectan en gran medida la velocidad de carga de una página, lo que impacta en el SEO. Cuanto más tarde en desplegarse tu sitio, peor será la calificación que le otorgue Google. Si quieres encontrar un equilibrio entre la calidad de tu contenido y la optimización de tu página, evita incluir archivos de gran tamaño o peso.

Para ello, puedes modificar sus dimensiones, es decir, el ancho y alto en píxeles de la imagen, elemento que determinan su tamaño visual en la pantalla. Asimismo, puedes regular su peso que es el tamaño del archivo en kilobytes o megabytes. Estos dos factores influyen en cómo se presenta el contenido y en cuánto tiempo se carga. También mejora su adaptación a otros dispositivos y optimiza la experiencia del usuario en línea.

Intenta reducir la dimensión de tu contenido en un programa de diseño o software en línea especial para ello. Al perder tamaño o al comprimir una imagen, en automático, pierden peso los archivos, es decir, se eliminan los datos redundantes y se optimiza la información visual. 

4. Trata de perder la menor calidad posible al comprimir una imagen

Emplea herramientas de compresión que reduzcan el tamaño de tus archivos sin afectar su calidad visual. Si no tienes más opción, usa los software para compresión con pérdida en imágenes, pero procura que esa disminución de calidad no sea perceptible.

5. Utiliza el tamaño justo para el espacio de la imagen

Cuando te decidas por crear un sitio web o hacer una página de aterrizaje, trata de ajustar el tamaño de las imágenes al espacio donde se mostrarán para evitar cargar archivos más grandes de lo necesario. Usa la resolución adecuada para la web, por lo general soporta 72 ppp (puntos por pulgada). Evita también elegir imágenes grandes para luego redimensionarlas en el código HTML, puesto que se cargarán más pesadas de lo necesario.

6. Cuida el formato de la imagen

Google indexa solo cierto tipo de imágenes, así que si quieres que las personas las encuentren, usa formatos como .JPG, PNG, .BMP, WebP y SVG. Considera la conversión a WebP, pues es moderno y ofrece una alta calidad con tamaños de archivo más pequeños.

7. Usa la optimización automática

Configura tu sitio web o aplicación para que optimice de forma automática las imágenes al cargarlas. Para ello, puedes emplear herramientas y técnicas que ajusten su tamaño mediante scripts y plugins que identifican fotos y aplican los ajustes en tiempo real sin afectar la calidad visual. 

8. Utiliza un nombre descriptivo para el archivo 

El buscador Google organiza su colección de imágenes según el nombre del archivo como snippet en su página de resultados. Por ello, lo ideal es que utilices uno que sea descriptivo para que el usuario lo pueda identificar. Se considera una buena práctica incluir la dimensión en el nombre. Por ejemplo, si tu contenido es sobre alguna receta para postres, sé específico porque esto ayudará a que los buscadores la encuentren: receta-para-postre-con-flan-600x400.jpg.

9. Ayuda a los motores de búsqueda usando el tag ALT

Cuando un motor de búsqueda envía ‘spiders’ o arañas a tu página, significa que este solo pudo escanear tu texto, por lo que tus imágenes serán invisibles. Para resolver este problema, puedes un ALT text (o texto alternativo), el cual sirve para que los buscadores entiendan entender tu contenido multimedia. 

Es un ejercicio sencillo y clave para tu SEO, al igual que las palabras clave largas (long tail keywords). Cuanto más descriptivo mejor.

10. No olvides el contexto

La búsqueda semántica de Google es cada vez más importante, por lo que considerar el contexto y la relación entre el contenido de la página es fundamental. Agrega contenido relacionado con tus fotos como pies de imagen, captions o textos en su interior. Esto ayudará a que el buscador relacione este contenido con la información que la rodea y la foto adquiera relevancia.

11. Apóyate en los SiteMaps 

Para ayudar a los buscadores a identificar las fotografías que tienes en tu web, te recomendamos crear un Sitemap. Para esto, puedes generarlo de manera automática o manual y enviarlo al Centro de Búsqueda de Google. Si quieres saber más sobre este procedimiento, consulta esta información.

12. Cuida la cantidad de infografías y multimedia que uses

Si buscas añadir infografías en tu página, procura que no sean el elemento exclusivo de tu post, ya que los buscadores traducirán ese trabajo como un simple tag ALT. Por tanto, asegúrate de explicar el contenido de este recurso por escrito dentro del mismo post. Esto le ayudará al usuario para su comprensión y a los buscadores para la identificación de contenido visual. También aplica para videos, un formato cada vez más común.

13. Incluye imágenes en las redes sociales

Una de las fuentes más importantes para atraer tráfico son las redes sociales. Millones de contenidos compiten todos los días por atención en estas plataformas, así que las imágenes son indispensables para destacar tu contenido. Hoy es difícil pensar en una publicación para estas plataformas que no esté acompañado de un elemento multimedia porque de ninguna manera sería competitivo.

Por ejemplo, una publicación no se ve igual si subes solo texto:  

O lo acompañas con una imagen sobre el producto:

Imágenes de Panam

¿Cuál crees que resaltará mejor en el feed de X y tendrá más interacción? 

14. Favorece la carga con Sprites y CSS 

Utiliza sprites para combinar varias imágenes pequeñas en una sola y optimiza los archivos CSS para que carguen solo las partes necesarias.

15. No satures con imágenes

No tienes que limitar tu aspecto visual, pero tampoco es buena idea que satures tu sitio con imágenes innecesarias. Por esta razón, puedes utilizar iconos en CSS o fuentes en lugar de contenido multimedia siempre que sea posible.

16. Reduce la profundidad de los colores 

Si requieres mantener la calidad de colores planos, por ejemplo, en logos, puedes reducir la profundidad del color para disminuir el tamaño del archivo.

17. Aplica el caching 

Habilita el caché del cliente para almacenar de forma temporal fotografías en el navegador y acelerar la carga de páginas repetidas.

18. Utiliza imágenes vectoriales

Cuando sea posible, elige fotos vectoriales en lugar de mapas de bits. Esto porque las imágenes vectoriales son escalables y ocupan menos espacio, lo que las hace ideales para gráficos simples como logotipos e iconos.

19. Minimiza las animaciones GIF 

Si utilizas animaciones GIF, puedes mantener la duración y el número de fotogramas al mínimo para reducir los tamaños del archivo. 

20. Realiza auditorías periódicas 

Haz auditorías de manera regular para asegurarte de que las imágenes todavía siguen optimizadas y actualiza cualquier foto que haya perdido eficiencia.

1. TinyPNG 

Se trata de una herramienta en línea que utiliza la compresión con pérdida para reducir el tamaño de las imágenes en formatos PNG y JPEG sin comprometer demasiado la calidad visual. Solo tienes que cargar tus fotografías en su sitio web y esperar a que el proceso termine. Luego, deberás descargar las versiones optimizadas y hacer el reemplazo en tu página.

Características de TinyPNG

• Capacidad de cargar varias imágenes a la vez. 
• Interfaz intuitiva. 
• Resultados visibles en tiempo real.

2. ImageOptim 

ImageOptim es una aplicación de escritorio para macOS que ofrece compresión sin pérdida para diversos formatos de imagen, como PNG, JPEG y GIF. Descarga e instala la aplicación ImageOptim en tu Mac, luego arrastra y suelta las fotos que deseas optimizar en su interfaz y espera a que se complete el proceso.

Características de ImageOptim

• Capacidad de arrastrar y soltar imágenes. 
• Opciones avanzadas de optimización. 
• Posibilidad de mantener metadatos.

3. Compressor.io 

Esta es una herramienta en línea que realiza compresiones tanto con pérdida como sin pérdida para formatos como JPEG, PNG, GIF y SVG.

Características de Compressor.io

• Interfaz sencilla de arrastrar y soltar. 
• Previsualización de las imágenes antes y después de la compresión.

4. ShortPixel 

Por último, con ShortPixel, podrás comprimir con pérdida y sin pérdida para una variedad de formatos, además convertir y optimizar de forma automática. Para usarlo, tienes que registrarte en el sitio web, cargar tus fotografías desde su panel de control y seleccionar el nivel de compresión deseado. Puedes optar por la optimización automática que ajustará las imágenes en tiempo real mientras las cargas en tu página.

Características de ShortPixel

• Carga y optimización de varias imágenes a la vez.
• Compatibilidad con varios formatos. 
• Integración con plataformas de gestión de contenido como WordPress.

Las imágenes cada vez juegan un papel más importante en la comunicación web. De la misma manera que dedicas tiempo en planificar y escribir contenido, es esencial cuidar del contenido multimedia y aplicar las pautas para garantizar los mejores resultados. 

Encuentra más información sobre las recomendaciones de Google para optimizar imágenes.