Usa tamaños de imagen Open Graph para planear variantes para tarjetas de Twitter/X, miniaturas y fotos dentro del artículo que carguen rápido, se vean nítidas y mejoren el CTR.
Una imagen puede verse perfecta en tu página y aun así fracasar en redes sociales o en búsqueda. La razón es simple: cada colocación tiene una caja distinta. Unas son anchas, otras cuadradas y muchas recortan el centro sin aviso.
La mayoría de las plataformas no muestran tu imagen completa. La redimensionan, la recortan a una relación fija y a veces añaden relleno, superposiciones o esquinas redondeadas. Un banner ancho puede convertirse en una miniatura desastrosa donde el sujeto queda cortado y cualquier texto se vuelve ilegible.
La “imagen de la publicación” suele aparecer en varios lugares:
Incluso dentro de lo social, las reglas varían. Las vistas previas Open Graph tienden a favorecer un rectángulo ancho, mientras que otros lugares pueden mostrar un recorte cuadrado o una versión más corta de la misma imagen. Si tu sujeto está desplazado hacia un lado, el recorte automático puede partirlo por la mitad.
Imagina una imagen hero: una persona a la izquierda, un titular corto a la derecha y un fondo limpio. A anchura completa funciona. Como miniatura cuadrada, la persona queda reducida a un hombro, el titular desaparece y la imagen se vuelve una mancha de color. La gente pasa de largo porque no puede entender de qué se trata.
Por eso importan las variantes. “Variantes” significa un pequeño conjunto de versiones del mismo visual, cada una redimensionada y recortada para un uso específico. El objetivo no es crear docenas de archivos, sino proteger lo que hace que la imagen funcione:
Si planificas variantes desde el principio, dejas de luchar contra recortes sorpresa y cada colocación tiene una oportunidad justa de generar el clic.
Una imagen no es solo decoración. Es una vista previa, una miniatura, una tarjeta destacada y a veces una ayuda para la lectura, todo a la vez. Cada lugar tiene recortes, superposiciones y tamaños de visualización distintos.
Las vistas previas Open Graph son lo que ve la gente cuando tu página se comparte en apps de mensajería y muchos feeds sociales. La caja de vista previa a menudo exige una relación de aspecto fija, así que si tu imagen es demasiado alta o ancha, las plataformas la recortarán.
Diseña pensando en un área central limpia: un sujeto claro, texto corto opcional y suficiente margen para que pequeños recortes no eliminen el detalle clave.
Los layouts de Twitter/X pueden cubrir partes de la imagen, especialmente cerca de los bordes. Los detalles en las esquinas desaparecen con facilidad y las líneas finas en la parte inferior pueden verse mal en móvil.
Piensa en términos de una “zona segura” en lugar de un recorte perfecto borde a borde. Mantén caras, productos y cualquier texto importante alejados de las esquinas y más cerca del centro.
Las miniaturas de búsqueda son pequeñas y fáciles de ignorar. Premian formas simples, alto contraste y un sujeto evidente. Un banner hero que es muy detallado puede lucir genial en tu sitio y convertirse en ruido visual en miniatura.
Un recorte de miniatura funciona mejor cuando se basa en reconocimiento, no en detalle. Si no se entiende en una fracción de segundo, es demasiado ancho, demasiado cargado o con demasiado texto.
Las imágenes inline deben ganarse su lugar. Úsalas para explicar, comparar o mostrar un ejemplo, no solo para rellenar espacio.
Una regla simple: si quitar la imagen no cambia la comprensión del lector, probablemente no debería estar.
Tu imagen destacada es la primera impresión en vistas previas y miniaturas. Las imágenes inline son para la claridad durante la lectura. A menudo necesitan recortes distintos: las destacadas deben ser audaces y simples, mientras que las inline pueden ser más amplias, detalladas y cercanas al contenido.
Antes de exportar nada, decide cuál será tu conjunto estándar. Esto ahorra tiempo y mantiene tus visuales consistentes en Open Graph, Twitter/X, vistas previas de búsqueda y tus propias páginas.
Empieza con una imagen maestra que mantengas intacta. Hazla lo bastante grande para soportar recortes sin perder nitidez. Una referencia práctica es que la maestra tenga al menos 2000 px en el lado más corto.
Luego, elige un pequeño conjunto de relaciones de aspecto que siempre exportarás. No persigas cada caso límite de plataforma. Un conjunto fiable suele cubrir:
Después decide cómo adaptarás la maestra a cada relación:
Si tus imágenes incluyen texto, recompón suele ser la única estrategia que aguanta en distintos tamaños.
Finalmente, establece un esquema de nombres que puedas seguir sin pensar. Manténlo consistente para que tu CMS, plantilla o flujo de trabajo pueda elegir el recurso correcto y para que puedas comparar rendimiento por variante más tarde.
Empieza con una imagen maestra lo más grande y limpia posible. Antes de redimensionar, aclara de qué trata realmente la imagen: el sujeto principal, cualquier texto clave (si lo hay) y el tono. Si el sujeto no es obvio de un vistazo, redimensionar no lo arreglará.
Haz primero la variante social ancha. Aquí es donde importan más los tamaños Open Graph, porque las plataformas recortan distinto y muestran vistas previas más pequeñas de lo que esperas. Mantén el sujeto centrado y deja espacio seguro cerca de los bordes.
Crea la versión para Twitter/X. Pruébala en pantalla en tamaño pequeño. Si algún texto o detalle importante está cerca de las esquinas inferiores, muévelo hacia adentro o elimínalo.
Construye una miniatura cuadrada (o casi cuadrada). Las miniaturas castigan fondos recargados. Recorta más ajustado, agranda el sujeto y elimina detalles finos. Si debes usar texto, limítalo a pocas palabras.
Exporta la imagen dentro del artículo. Esta debe apoyar el flujo de lectura. Mantén un ancho cómodo, evita leyendas diminutas dentro de la imagen y asegúrate de que no parezca un anuncio entre párrafos.
Después de exportar, revisa a tamaños reales: un feed en teléfono, una vista de escritorio y la columna real de tu artículo. La mayoría de los problemas de “se veía bien en Photoshop” aparecen de inmediato cuando haces esto.
El recorte es donde las buenas imágenes pierden clics. Un recorte que parece correcto a tamaño completo puede convertirse en un borrón confuso como miniatura. El objetivo es claro: de un vistazo, la gente debe saber qué está viendo.
Parte desde la colocación más pequeña que te importe (a menudo una miniatura SERP o vista previa social pequeña). Si el sujeto no es reconocible al instante, el recorte es demasiado amplio o el sujeto es demasiado pequeño.
Las plataformas recortan de forma impredecible y algunas añaden superposiciones de UI. Date margen para no cortar frentes, bordes de producto u objetos clave.
Un hábito práctico que funciona en muchas colocaciones:
El texto pequeño dentro de una imagen es una trampa común. Puede leerse en tu monitor y luego volverse ruido borroso tras redimensionar y comprimir.
Si usas texto, mantenlo corto y contundente, con alto contraste y espacio para respirar. Cuando sea posible, también exporta una variante sin texto para ubicaciones pequeñas.
Texturas recargadas (césped, purpurina, patrones diminutos) suelen derivar en artefactos en bloques cuando se comprimen. Fondos más limpios mantienen los bordes nítidos y el sujeto claro.
Ejemplo: tienes una foto hero de una persona sosteniendo un teléfono con un dashboard. Para una miniatura, recorta más hacia la cara y el teléfono, simplifica el fondo y evita confiar en detalles diminutos de la pantalla. Si necesitas una etiqueta, resérvala para tarjetas sociales más grandes y mantenla corta.
La misma foto puede verse nítida en tu página y borrosa o pesada al compartirse. Formatos, compresión y metadatos básicos suelen marcar la diferencia entre una vista previa que consigue clics y otra que se ignora.
JPEG suele ser mejor para fotos y degradados porque mantiene archivos pequeños. PNG es mejor para gráficos con texto, logotipos o colores planos, pero los tamaños pueden aumentar rápido. WebP y AVIF suelen ofrecer mejor calidad a menor tamaño, pero conviene mantener un fallback para sitios que no las soporten.
La compresión no es igual para todo. Una miniatura pequeña puede tolerar compresión agresiva porque se muestra pequeña. Una vista social grande necesita más cuidado porque los artefactos se notan en caras y texto.
Si quieres una regla simple: comprime según la vista más pequeña en la que se verá realmente:
La consistencia construye reconocimiento. Mantén color, contraste y estilo general similares entre publicaciones para que tus imágenes parezcan pertenecer a la misma familia en feeds y listados.
También ordena lo básico:
Cuando esto es consistente, pasas menos tiempo buscando activos y más tiempo probando lo que realmente mejora el CTR.
El mayor error es usar una sola “imagen maestra” y dejar que cada plataforma la recorte automáticamente. Lo que funciona como cabecera ancha puede convertirse en un zoom aleatorio en una miniatura cuadrada o cortar el sujeto en una vista social.
El sobre-diseño es otro asesino silencioso. Logos grandes, titulares largos y pequeñas insignias pueden verse bien en escritorio y luego volverse un borrón en teléfono.
La calidad también cae rápido cuando exportas demasiado pequeño y luego escalas hacia arriba. El escalado suaviza bordes y empasta caras. Parte de una maestra grande y redimensiona hacia abajo por variante.
Los desajustes de estilo importan. Si tu vista previa Open Graph es brillante y limpia pero el recorte de Twitter/X es más oscuro con colores distintos, la gente percibe inconsistencia. Mantén el mismo tratamiento fotográfico y reglas de layout en todo el set.
Finalmente, no te saltes las comprobaciones en móvil. Una imagen equilibrada en escritorio puede ocultar detalles clave detrás de overlays de UI en móvil.
Justo antes de publicar:
Haz una última comprobación de realidad: abre el artículo en tu teléfono y escritorio, desplázate una vez y nota qué se siente extraño. Si atrae la atención por la razón equivocada (demasiado brillante, muy alto, ilegible, sujeto diminuto), ajusta el recorte primero y luego la compresión.
Imagina un post anunciando una nueva función. Tu hero muestra a una persona a la izquierda sosteniendo un portátil y una captura de producto a la derecha. A anchura completa luce bien. Reutilizada en todos lados, se desmorona.
Empieza con una maestra limpia (alta resolución, sin texto incrustado). Luego crea cuatro variantes con recortes intencionales:
Para el recorte ancho Open Graph, no centres la captura por defecto. Mantén la cara de la persona y la zona clave del producto dentro de la zona segura (aprox. el 70% central). Si la pantalla del portátil está en ángulo, recorta más para que el panel UI principal siga siendo legible en una vista pequeña.
Para la miniatura cuadrada, elimina detalles UI diminutos. Las miniaturas son sobre reconocimiento, no explicación. Recorta a la cara más una forma de producto bold (un gráfico, un área de titular, una tarjeta). Si la captura de pantalla es lo principal, considera usar un fondo fotográfico desenfocado y un único bloque UI nítido.
Para la versión dentro del artículo, prioriza claridad sobre dramatismo. Usa un recorte más calmado, reduce el desorden del fondo y mantén suficiente brillo para que la captura se lea sobre una página blanca.
Trata las variantes de imagen como los titulares. Mide, ajusta y conserva lo que funciona.
Empieza por páginas que ya reciben impresiones pero pocos clics. Si una página posiciona pero tiene CTR bajo, la imagen previa suele ser demasiado oscura, demasiado recargada o recortada de forma que oculta el sujeto.
Mantén las pruebas pequeñas. Un cambio a la vez basta para aprender:
Si publicas a escala, ayuda estandarizar el conjunto de variantes y generarlas siempre igual. Una herramienta como GENERATED puede encargarse de la creación repetible de variantes (incluyendo redimensionado y pulido) y ayudarte a rastrear visuales con bajo rendimiento para saber dónde probar a continuación.
Crea un pequeño conjunto de variantes intencionadas. Un valor práctico por defecto es: una vista amplia para Open Graph, una opción 16:9, una miniatura cuadrada, un recorte 4:5 más alto para feeds móviles y una versión dentro del artículo que coincida con la columna de contenido.
Empieza por la colocación real más pequeña (a menudo una miniatura SERP o una vista previa pequeña en un feed) y asegúrate de que el sujeto sea instantáneamente reconocible allí. Luego construye el recorte ancho para Open Graph y mantén los detalles clave dentro de una zona segura centrada para que los recortes impredecibles de las plataformas no los corten.
Usa una imagen maestra grande e inalterada para que cada variante sea una reducción, no una ampliación. Una base sólida es al menos 2000 px en el lado más corto, lo que te da margen para recortar a diferentes relaciones sin que la imagen pierda nitidez.
Las vistas previas Open Graph favorecen un rectángulo ancho y las plataformas pueden recortar tu imagen para ajustarla a su relación fija. Diseña pensando en un área central clara, mantén los elementos importantes alejados de los bordes y evita depender de detalles pequeños que no sobrevivirán a la compresión.
Supón que partes de la imagen cerca de los bordes pueden quedar cubiertas por la interfaz o recortadas de forma distinta según el dispositivo. Mantén caras, logotipos y texto alejados de las esquinas y prueba la tarjeta a tamaños pequeños para detectar problemas que no aparecen en la vista de edición a tamaño completo.
Haz que la miniatura trate sobre el reconocimiento, no sobre el detalle. Recorta más ajustado, agranda el sujeto principal, simplifica el fondo y evita texto largo; si necesitas palabras, limítalas a unas pocas en negrita con alto contraste.
Sí. Especialmente si usas texto en las imágenes, exporta también una versión sin texto. La variante sin texto es más segura para miniaturas y recortes impredecibles, mientras que la versión con texto puede funcionar en tarjetas sociales más grandes donde se mantiene legible.
Recorta cuando tengas espacio sobrante y el sujeto pueda permanecer centrado sin perder significado. Rellena (pad) cuando no se puede recortar nada, como un logotipo o un producto ajustado. Recompón cuando haya varios elementos o texto que deban permanecer legibles en distintos tamaños.
Usa JPEG para fotos y degradados para mantener los archivos pequeños; PNG para gráficos planos, logotipos o imágenes con mucho texto donde importen los bordes nítidos. WebP o AVIF suelen ofrecer mejor calidad a menor tamaño, pero conviene mantener una alternativa compatible para sitios que no las soporten.
Comprueba la imagen a tamaños reales en un feed de teléfono, una vista previa de escritorio y dentro del diseño real de tu artículo. Si el sujeto no es claro como miniatura, si los elementos clave están demasiado cerca de los bordes o si la compresión genera artefactos visibles, arregla primero el recorte y luego ajusta la compresión.