Imágenes en tu página web: cómo elegirlas y optimizarlas para que vendan y no frenen la carga

Las imágenes son lo primero que ve un visitante y, muchas veces, lo que decide si se queda. También son, casi siempre, lo que más pesa y más frena una página. En los sitios que reviso, el problema número uno de velocidad no es el hosting ni el código: es una foto de varios megas subida tal cual salió del celular.

En esta guía te cuento cómo elegir las imágenes de tu web para que transmitan confianza, cómo prepararlas para que no frenen la carga, y qué hacer para que Google también las entienda.

Primero lo importante: qué imágenes usar

Fotos reales antes que fotos de stock

La foto de stock del equipo sonriente en una oficina luminosa la vio todo el mundo, y el cerebro la reconoce como "relleno". Una foto real de tu local, tu equipo, tu trabajo terminado o tus productos genera algo que el stock no puede: confianza. No tiene que ser profesional; tiene que ser buena: con luz natural, prolija, enfocada.

Esto vale doble para servicios. Si sos carpintero, mostrá muebles que hiciste. Si tenés un estudio, mostrá el estudio. Si hacés páginas web, mostrá páginas web reales: en mi portfolio cada tarjeta es la captura real del sitio del cliente, no una foto de stock.

¿Y las imágenes generadas con IA?

Son útiles para ilustraciones, fondos, íconos o una imagen conceptual en un artículo. Para mostrar tu negocio, no: una "foto" generada de tu local o de un cliente que no existe es, en el fondo, una mentira, y cuando el cliente llega y ve algo distinto se pierde la confianza. Además, las imágenes de IA todavía tienen detalles raros (manos, textos, reflejos) que mucha gente ya detecta.

Cada imagen tiene que decir algo

Antes de poner una imagen, preguntate qué aporta. Mostrar el producto, el resultado, el lugar o a la persona que atiende: sí. Una imagen solo para "que no quede vacío": mejor un buen texto y espacio en blanco.

El tamaño: la parte que casi todos hacen mal

Una foto de celular tiene miles de píxeles de ancho y puede pesar varios megas. En una web se muestra, como mucho, al ancho de la pantalla. Subirla así obliga al visitante a descargar muchísima más información de la que va a ver, y en datos móviles eso se siente.

La regla que uso:

• Redimensionar al tamaño en que se muestra, con margen para pantallas de alta definición (el doble del tamaño visible alcanza y sobra). Un logo que se ve de 120 píxeles no necesita 3.000.
• Usar formato WebP (o AVIF), que pesan mucho menos que JPG o PNG con la misma calidad y hoy los muestran todos los navegadores.
• Comprimir con criterio: una calidad de alrededor del 80% es invisible para el ojo y ahorra muchísimo peso.
• Mirar el resultado antes de publicarlo. Comprimir de más deja manchas; hay que encontrar el punto justo.

Para hacerlo sin programas pagos alcanza con Squoosh (squoosh.app, de Google, gratis y en el navegador): arrastrás la imagen, elegís WebP, ajustás el tamaño y comparás antes y después.

Antes de pensar en cambiar de hosting o de plataforma porque la web es lenta, revisá cuánto pesan las imágenes. Muchas veces el problema está ahí.

Lo técnico que evita que la página "salte"

Seguro te pasó: estás por tocar un botón, la página se reacomoda porque terminó de cargar una imagen, y tocás otra cosa. Google lo mide (es una de las métricas de los Core Web Vitals) y se evita con tres cosas que tiene que hacer quien arma la web:

• Declarar el ancho y el alto de cada imagen, para que el navegador le reserve el lugar antes de que cargue.
• Carga diferida (loading="lazy") para las imágenes que están más abajo: se descargan recién cuando el visitante se acerca.
• Prioridad para la imagen principal: la foto grande de arriba de todo tiene que cargar primero, no esperar al resto.

Imágenes en el celular: el recorte

Una imagen horizontal que en la computadora se ve perfecta, en el celular puede quedar recortada en una franja angosta… justo sin la cara de la persona o sin el producto. Al armar una web hay que mirar cada imagen en el tamaño real en que se va a ver, en computadora y en celular, y elegir qué parte se muestra. Una foto vertical nunca va en una banda horizontal: se recorta y queda mal.

Que Google también entienda tus imágenes

Google no "ve" la imagen como vos: se guía por lo que la rodea. Para que tus imágenes sumen al SEO y aparezcan en Google Imágenes:

• Texto alternativo (alt) descriptivo: "Pérgola de aluminio blanca instalada en un patio de Vicente López" en vez de "imagen1" o una lista de palabras clave. También lo usan las personas que navegan con lector de pantalla.
• Nombre de archivo con sentido: pergola-aluminio-patio.webp en lugar de IMG_20250312_154422.jpg.
• La imagen cerca del texto que la explica, no aislada.
• Nada importante solo dentro de una imagen: si tu precio, tu horario o tu promoción están escritos en una foto, Google y las herramientas de IA no los leen bien. Ponelos también como texto.

La imagen para cuando compartís el link

Cuando alguien comparte tu web por WhatsApp o en redes, aparece una vista previa con una imagen. Si no la configuraste, sale cualquier cosa (o nada). Se llama imagen Open Graph, conviene diseñarla aparte (1200 × 630 píxeles, con tu marca) y es de esos detalles que hacen que un link se vea profesional. Si cambiás tu foto o tu logo, acordate de actualizarla también.

Checklist rápido

1. ¿Las fotos son reales y muestran algo concreto de tu negocio?
2. ¿Ninguna imagen supera lo necesario para su tamaño en pantalla?
3. ¿Están en WebP?
4. ¿Tienen ancho, alto y texto alternativo?
5. ¿Las de abajo cargan de forma diferida y la principal con prioridad?
6. ¿Las revisaste en el celular, con el recorte real?
7. ¿Tu web tiene imagen para compartir en redes?

Preguntas frecuentes