Hero con imagen: ¿vale la pena la bajada de rendimiento?

El 7 de septiembre de 2026, Gerardo López, dueño de un taller de maquinados en Querétaro, revisó su web recién publicada y me pidió una cosa muy razonable: “pon una foto del taller de verdad”. La que había en la primera versión era una imagen de un torno, correcta y bien iluminada, pero no era su taller. La que él me mandó era su nave, sus máquinas, su gente.

Le dije que sí de inmediato, y luego me fui a mirar el coste. Porque la foto real pesaba entre 2 y 3,5 veces más que la anterior: 153 KB frente a 70 KB en escritorio, 135 KB frente a 39 KB en celular. Ese es exactamente el dilema del que va este artículo. Una foto buena en la cabecera vende, pero cuesta milisegundos. Y los milisegundos, en Google, también cuestan.

Primero, dos palabras que voy a usar

El hero es la primera pantalla de tu web: lo que se ve sin bajar el dedo. Normalmente un titular, una frase de apoyo, un botón y, muchas veces, una foto grande de fondo. Es el escaparate.

El LCP (Largest Contentful Paint) es el tiempo que tarda en aparecer el elemento más grande de esa primera pantalla. Si hay foto en el hero, casi siempre es la foto. Si no la hay, suele ser el titular. Te importa por dos motivos: Google lo usa como señal de calidad para ordenar resultados, y tu visitante lo vive como “esta página va lenta”. En Rigol&Co mido las 10 webs vivas cada lunes con Lighthouse y mi norma interna es rendimiento igual o mayor que 90, LCP de 2,5 segundos o menos y CLS (los saltos de maquetación) por debajo de 0,1.

Qué pasó en Maquinados López

Puse la foto real tal cual me llegó del cliente. Medí en local, con la web ya construida y simulando una red móvil lenta: LCP 2,5 segundos. Justo en el límite. Y el desglose era claro: 1,27 de esos 2,5 segundos eran la descarga de la propia imagen. Con la foto anterior, dos días antes, el cuello de botella no era el hero: era el trabajo del navegador para pintar el titular. Al cambiar la foto, cambió el problema de sitio.

Entonces recomprimí la imagen sin tocar sus dimensiones, bajando la calidad a 72 (un ajuste que en una foto de taller no se aprecia a ojo). De 153 a 144 KB en escritorio y de 135 a 129 KB en celular. Poca cosa sobre el papel. El resultado medido: LCP de 2,5 a 1,5 segundos y puntuación de rendimiento de 94 a 100. La métrica de “entrega de imágenes” de PageSpeed, que señala cuántos kilobytes sobran, pasó de 89 KB a 9 KB. Lo único que le sigue sobrando a esa web es el logo.

Aviso honesto antes de seguir: esas cifras de antes y después son mediciones de Lighthouse en mi computadora, no del cron semanal. El cron nació el mismo 7 de septiembre, después del cambio de foto, así que no tengo una medición de Maquinados con la foto anterior hecha con la misma metodología. Lo que sí tengo es la comparación entre webs, que va abajo.

Lo que hago siempre que una web lleva foto en el hero

Son cuatro cosas. Ninguna es cara y las cuatro juntas son la diferencia entre una foto que cuesta un segundo y una que cuesta la mitad.

1. Le digo al navegador que esa foto va primero. Por defecto el navegador decide solo el orden de descarga y a veces deja la foto principal para el final, detrás de cosas que no se ven. La marco como prioritaria y jamás la pongo en carga diferida: la carga diferida sirve para las imágenes de más abajo, no para la de arriba.
2. Recorto una versión distinta para celular. No mando la foto apaisada de 1600 por 900 píxeles a un teléfono. Preparo un recorte vertical, de 900 por 1200, que además se ve mejor en pantalla de mano. El celular descarga la suya, la computadora la suya.
3. Reservo el hueco de la foto antes de que llegue. Escribo el ancho y el alto reales en el código, así el navegador deja el espacio vacío y el texto no salta cuando la imagen aparece. Es la diferencia entre una página que se asienta y una en la que se te mueve el botón justo al ir a tocarlo.
4. Pido la foto por adelantado, y solo la que toca. Le adelanto al navegador que va a necesitar esa imagen antes incluso de encontrarla en la página. Con un detalle importante: esa petición anticipada va condicionada al tamaño de pantalla, para que la precarga de la versión de escritorio no le quite ancho de banda a la de celular.

Y antes de las cuatro, una previa: comprimir. En Maquinados fue el único cambio con cifra clara de antes y después.

El contrapunto: la foto no es la única culpable

Aquí es donde me toca ser honesto, porque la historia bonita sería “quita peso y todo vuela”. Estas son las mediciones del lunes 7 de septiembre, en celular y red lenta, mediana de tres pasadas:

• rigolco.com, sin foto en el hero: rendimiento 93, LCP 2,7 s.
• maquinadoslopez.com, foto real recomprimida y con recorte móvil: rendimiento 95, LCP 2,4 s.

La lectura incómoda es para mí: mi propia web no tiene foto en el hero, el elemento más grande es el titular de texto, y aun así tarda 2,7 segundos, peor que la del taller que sí lleva foto. Quitar la imagen no te regala velocidad.

Y al revés también pasa. Entre las webs que mido cada lunes hay alguna con foto real en el hero y todos los tamaños servidos automáticamente por ancho de pantalla, la solución técnicamente más elegante, que aun así carga más lenta de lo que debería. Ahí el freno está en otra parte, no en la foto. Por eso la medición va antes que la opinión.

Entonces, ¿pongo foto o no?

Mi respuesta, después de este lote de mediciones, es esta.

Si tienes una foto real de tu negocio, ponla. Una nave, un equipo, un producto tuyo, una obra terminada. Esa imagen hace un trabajo comercial que el texto no hace: demuestra que existes y que lo que dices es verdad. El taller de Gerardo en su propia web dice más en dos segundos que tres párrafos de prosa. Y el coste en velocidad, bien implementada, es casi cero: 2,4 segundos y 95 de rendimiento, por encima de mi propia web.

Si la foto que tienes hoy es genérica, no pasa nada: la mayoría de las webs empiezan así. Pero el día que tengas una foto tuya de verdad, cámbiala. La diferencia comercial es grande y, con las cuatro medidas de arriba, la de velocidad no se nota. Mientras tanto, que la que tengas pese poco y esté bien servida.

Y si tu web ya lleva foto y va lenta, no des por hecho que la culpa es de la foto. Mídelo antes. Más de una vez el freno estaba en otra parte, y la velocidad es solo uno de los errores técnicos de SEO que suelen frenar una web. Sobre cómo enfoco esto en cada proyecto puedes ver mi método o la web de Maquinados López entre mis proyectos. Si quieres que le eche un ojo a la tuya y te diga qué le está costando el segundo, escríbeme.