En la sección «Mis servicios» de una home, las imágenes habían crecido hasta dominar las tarjetas. En escritorio desplazaban el contenido importante y en móvil obligaban a recorrer grandes bloques visuales antes de entender qué servicio se ofrecía.
Una imagen grande no siempre comunica más
La función de esas fotografías era apoyar el servicio, no sustituir su mensaje. Cuando una imagen ocupa más espacio que el título, la explicación y la llamada a la acción juntos, la jerarquía queda invertida.
Qué ajusté
- Relación de aspecto común para todas las tarjetas.
- Altura máxima diferente en escritorio y móvil.
- Recorte mediante
object-fit: covery posición controlada. - Separación uniforme entre imagen y contenido.
- Anchura de tarjeta coherente con el contenedor general.
- Carga de un tamaño de imagen adecuado, no del original completo.
El recorte también forma parte del diseño
Aplicar una proporción sin revisar el punto focal puede cortar lo importante. Algunas imágenes necesitan una posición distinta o una variante específica para horizontal. Revisé las tarjetas como conjunto, pero mantuve la posibilidad de ajustar cada caso.
El beneficio no es solo estético
Servir imágenes más próximas al tamaño de visualización reduce datos transferidos y puede mejorar el Largest Contentful Paint cuando esas imágenes aparecen pronto. También disminuye el salto de contenido si el navegador conoce sus dimensiones.
Cómo decido el tamaño correcto
No parto de un número universal. Observo el objetivo de la sección, el número de tarjetas, la longitud del texto y el orden en móvil. En una galería, la imagen manda; en una comparación de servicios, debe ayudar a escanear sin competir con la decisión.
Después de los cambios, el usuario podía ver más de un servicio por pantalla y llegar antes a la información que explica el valor.