Seguro que te ha pasado: intentas subir una foto espectacular y, de repente, la cabeza de la persona desaparece o la imagen se ve estirada y todo va seguido de «¿por qué se cortan mis fotos?». No es magia, es una cuestión de proporciones.
Antes de entrar en números, es vital distinguir dos conceptos que suelen confundirse: la relación de aspecto es la «forma» de la imagen (su proporción entre ancho y alto, como un cuadrado o un rectángulo), mientras que la medida es el tamaño real en píxeles que ocupa en la pantalla.
Imagina un molde de tarta: la relación de aspecto es la forma del molde (redondo o cuadrado) y la medida es el tamaño de la tarta que horneas. Puedes tener una tarta pequeña o gigante, pero si el molde es cuadrado, la tarta siempre será cuadrada.
Para que tus imágenes luzcan perfectas y no se deformen, he preparado esta tabla de referencia basada en un ancho estándar de 1200px, ideal para la mayoría de contenedores de una Web.
Tabla de equivalencias entre relaciones de aspecto y tamaños de imágenes
Relación de aspecto 1:1
Tamaño cuadrado
Uso recomendado: Ideal para fotos de producto y perfiles. Ahorra espacio vertical y mantiene el orden.
Medida recomendada en Píxeles: 1200 x 1200 px
Medida recomendada en REM: 75 x 75 rem
Medida aproximada en Centímetros: 42,3 x 42,3 cm
Relación de aspecto 4:3
Tamaño estándar
Uso recomendado: El formato clásico para entradas de blog y catálogos. Ofrece un equilibrio visual muy estable.
Medida recomendada en Píxeles: 1200 x 900 px
Medida recomendada en REM: 75 x 56.2 rem
Medida aproximada en Centímetros: 42,3 x 31,7 cm
Relación de aspecto 3:2
Tamaño clásico
Uso recomendado: Es el formato de las cámaras profesionales. Aporta un aire artístico y de autor a tus portafolios.
Medida recomendada en Píxeles: 1200 x 800 px
Medida recomendada en REM: 75 x 50 rem
Medida aproximada en Centímetros: 42,3 x 28,2 cm
Relación de aspecto 16:9
Tamaño panorámico
Uso recomendado: Es el estándar visual de hoy (como tu TV). Ideal para la mayoría de banners, vídeos y cabeceras porque aprovecha el ancho de la pantalla sin obligar al usuario a hacer mucho scroll.
Medida recomendada en Píxeles: 1200 x 675 px
Medida recomendada en REM: 75 x 42.2 rem
Medida aproximada en Centímetros: 42,3 x 23,8 cm
Relación de aspecto 21:9
Tamaño ultra ancho
Uso recomendado: Exclusivo para «Hero Banners» principales. Aporta elegancia y deja espacio libre para textos.
Medida recomendada en Píxeles: 1200 x 514 px
Medida recomendada en REM: 75 x 32.1 rem
Medida aproximada en Centímetros: 42,3 x 18,1 cm
Relación de aspecto 9:16
Tamaño vertical
Uso recomendado: Pensado para móviles. Ideal para mostrar capturas de apps, historias o contenido tipo TikTok.
Medida recomendada en Píxeles: 675 x 1200 px
Medida recomendada en REM: 42.2 x 75 rem
Medida aproximada en Centímetros: 23,8 x 42,3 cm
Dónde indicar la relación de aspecto o tamaño de imágenes en WordPress
Dependiendo del compositor visual que utilices, la opción para ajustar cómo se muestra tu imagen puede cambiar de lugar. Aquí tienes una guía rápida de los más usados, pulsa sobre el tuyo y se desplegarán las indicaciones para que puedas llegar:
Recuerda: Aunque estos editores permiten forzar el tamaño visualmente, lo ideal para que tu Web cargue rápido es que el archivo que subas ya tenga la proporción correcta de origen y que el propio archivo de imagen no exceda de su peso adecuado. Subir una imagen de 5 MB para que luego el navegador la «encoja» a un recuadro pequeño es la forma más rápida de arruinar la experiencia de tus usuarios.
Para que no te la juegues con el rendimiento, aquí tienes unos pesos máximos recomendados según el tipo de imagen:
- Miniaturas y fotos de perfil (1:1): Intenta que no superen los 80 – 100 KB. Al ser pequeñas, no necesitan mucha información.
- Imágenes de Blog y Galería (4:3 o 3:2): El punto dulce está entre 150 – 200 KB. Suficiente nitidez sin penalizar la carga.
- Banners y Cabeceras (16:9 o 21:9): Al ocupar mucho espacio visual, puedes llegar hasta los 350 – 400 KB como máximo, siempre que estén bien optimizadas en formato WebP o JPG.
- Imágenes verticales (9:16): Al estar pensadas para móvil (donde los datos suelen ser más limitados), intenta mantenerlas bajo los 150 KB.
Consejos de oro para preparar tus imágenes antes de subirlas a tu Web
Para que tu Web vuele al cargar y tus imágenes se vean nítidas, ten en cuenta estos puntos clave antes de darle al botón de «Subir»:
- Recorta, no estires: Si tienes una foto cuadrada y necesitas que sea 16:9, usa una herramienta de edición para recortar los bordes. Si intentas forzarla a encajar «estirándola», la imagen se pixelará y perderá su aspecto natural.
- El peso importa (y mucho): Una imagen de 1200px no debería pesar más de 250 KB. Te recomiendo pasar todas tus fotos por herramientas como Canva, TinyPNG o I Love IMG antes de subirlas.
- Píxeles VS Centímetros: En diseño Web, siempre hablamos en píxeles. Los centímetros son una medida física que varía según el tamaño de la pantalla del usuario, así que úsalos solo como una referencia mental de tamaño, no como una medida exacta de diseño.
- Píxeles VS REM: El píxel (px) es la unidad de medida fija mientras que el REM es una medida relativa que usamos en diseño Web para que todo escale proporcionalmente según el tamaño de letra que el usuario tenga configurado.
- Resumen para ti: Tú exporta tus imágenes siempre basándote en los píxeles. Nosotros, los diseñadores, nos encargaremos de traducirlo a REM en el código para que tu web sea accesible y fluida.
¿No sabes qué proporción usar?
Como norma general te dejo unas recomendaciones para que puedas estimar mejor:
- Si vas a subir una imagen que ocupe todo el ancho de la pantalla, apuesta por el 16:9
- Si es para una cuadrícula de servicios o productos, el 1:1 o el 4:3 suelen ser los que mejor mantienen el orden visual
- Si quieres un look de «fotografía de autor» o portafolio donde la imagen deba respirar, el 3:2 es el formato nativo de las cámaras profesionales, úsalo
- Para la imagen principal de tu Home, el 21:9 es perfecto, muy elegante y permite que el contenido importante (el texto de bienvenida) se vea sin tapar toda la pantalla
- Para secciones específicas de móviles es fundamental el 9:16 o si quieres mostrar capturas de pantalla de apps e historias de Instagram
¿Estás preparando las imágenes de tu nueva web y te sientes abrumado? No te preocupes, si quieres que me encargue de la optimización técnica o realizar algunos ajustes puntuales estaré encantada de ayudarte a que tu proyecto brille.