Tomas un paisaje amplio, abres la pantalla de publicación y la aplicación te ofrece un cuadrado con las dos mejores montañas cortadas. O tomas una captura de pantalla de un gráfico y el cultivo de alimentación elimina las etiquetas de eje que hicieron que valiera la pena compartir el gráfico. La imagen está bien. El marco tiene la forma incorrecta.
Hay dos salidas. Puedes recortar la imagen para que se ajuste al marco, o puedes poner la imagen completa sobre un fondo que ya tenga la forma correcta. El segundo enfoque se llama mate y es lo que Generador mate construcciones: un lienzo cuadrado, retrato o con forma de historia con la imagen completa colocada en su interior, sobre una copia borrosa de sí mismo o en un color sólido. Esta guía explica cuándo un mate supera a un recorte, cómo funciona la geometría, qué hacen el relleno, el radio y la configuración de sombras en píxeles y qué tamaño de salida elegir para cada plataforma.
TL;Dr: Un mate es el fondo sobre el que se asienta una foto en forma para que pueda publicarse sin recortarse. En lugar de reducir una imagen de 16:9 a 1:1, coloca la imagen completa dentro de un marco de 1080 x 1080 o 1080 x 1350 y llena el espacio sobrante con una copia borrosa de la foto o un color sólido. Matte Generator hace este lado del cliente en un lienzo HTML, con 15 ajustes preestablecidos de plataforma, relleno de 0 a 25%, esquinas redondeadas, una sombra desplegable opcional y exportación PNG, JPEG o WebP. Es gratis, no hay registro y no se carga nada.
¿qué es una foto mate?
Una foto mate es el borde entre una imagen y el borde de su marco. La palabra proviene del encuadre de imágenes, donde un tablero mate con una ventana cortada se asienta entre una impresión y el vidrio para que la imagen no llegue al borde del marco. En las redes sociales la idea es la misma, sin el cartón: el "frame" es la relación de aspecto que una plataforma quiere, y el mate es lo que llena el espacio que tu imagen no ocupa.
La propiedad definitoria de un mate es que no se elimina nada de la imagen. Cada píxel que compusiste sobrevive en la publicación. El intercambio es que la imagen ya no llena todo el mosaico, por lo que es más pequeña en la pantalla de lo que sería un recorte de la misma foto.
¿deberías usar un mate o recortar la imagen?
Recorta cuando el sujeto se sienta en el medio y los bordes son incidentales. Utilice un mate cuando los bordes lleven información que no pueda perder. Esa es toda la decisión y vale la pena tomarla a propósito en lugar de aceptar lo que haga la pantalla de carga.
| colocación | Mejor elección | porque |
|---|---|---|
| Retrato de una persona, fondo liso | Cultivo | El sujeto llena más mosaico y lee mejor en tamaño de miniatura |
| Amplio paisaje o panorama | Mate | El ancho es el punto de la foto |
| Captura de pantalla de un gráfico, código o conversación | Mate | Las etiquetas y bordes contienen la información |
| Toma de producto que debe mostrar todo el objeto | Mate | Cortar el producto anula el propósito |
| Foto de grupo con personas en ambos extremos | Mate | Un cultivo elimina a alguien |
| Disparo detallado o textura | Cultivo | No hay ningún borde significativo que proteger |
| Panorama muy amplio por el que quieres que la gente pase | Ni tampoco | En su lugar, divídelo en un carrusel |
Si decides que un cultivo tiene razón después de todo, el Recortador de imágenes de redes sociales maneja ese lado de la decisión con los mismos ajustes preestablecidos de plataforma. Para un panorama demasiado amplio para cualquiera de los enfoques, el Generador de desplazamiento carrusel lo corta en paneles deslizables.
¿cómo encaja un mate en una imagen en un cuadrado?
La regla de ajuste es la misma que llama CSS object-fit: contain, definido en el Módulo de imágenes CSS Nivel 3 especificación: escala la imagen por el factor más grande que mantiene tanto su ancho como su alto dentro del marco, luego centralo. En código el cálculo es de tres líneas:
const scale = Math.min(frame.width / image.width, frame.height / image.height)
const width = image.width * scale
const height = image.height * scale
Cualquier dimensión que llegue primero al borde del marco decide la escala. Una imagen ancha toca los bordes izquierdo y derecho y deja barras arriba y abajo. Una imagen alta toca la parte superior e inferior y deja barras a los lados. El generador mate aplica primero el acolchado, encoge el marco y luego ejecuta este ajuste dentro de lo que queda.
Un ejemplo trabajado con números reales
Tome una foto de paisaje de 1920 x 1080 (16:9) y colóquela en el ajuste preestablecido cuadrado de Instagram, 1080 x 1080, con el relleno predeterminado del 6%.
- El relleno es el 6% del marco's lado más corto: 1080 x 0,06 = 64,8 píxeles en cada borde.
- El espacio restante para la imagen es 1080 - (2 x 64,8) = 950,4 píxeles cuadrados.
- La escala de ajuste es la menor de 950,4 / 1920 = 0,495 y 950,4 / 1080 = 0,880, es decir, 0,495.
- La imagen está dibujada a 1920 x 0,495 = 950,4 de ancho y 1080 x 0,495 = 534,6 de alto.
- Está centrado verticalmente: (950,4 - 534,6) / 2 = 207,9, más el relleno de 64,8, sitúa su borde superior en 272,7 píxeles.
La herramienta informa esto en la vista previa como " colocado a 950 x 535 dentro de un marco 1080 x 1080" Puedes comprobar cualquier otro caso de la misma forma.
¿Qué tamaño de salida deberías elegir?
Elija el tamaño de la ubicación en la que publica y recuerde que para una imagen ancha, un marco más alto no hace que la imagen sea más grande. El ancho es lo que lo limita. La siguiente tabla muestra el mismo ajuste para dos fotografías fuente, con un relleno del 6%, en los ajustes preestablecidos comunes.
| Preestablecido | Marco | Se dibuja un paisaje de 1920 x 1080 | Se dibuja un retrato telefónico de 1080 x 1920 en |
|---|---|---|---|
| Publicación cuadrada de Instagram | 1080 x 1080 | 950 x 535 | 535 x 950 |
| Publicación de retrato de Instagram (4:5) | 1080 x 1350 | 950 x 535 | 686 x 1220 |
| Historia o carrete de Instagram (9:16) | 1080 x 1920 | 950 x 535 | 950 x 1690 |
| X publicar imagen (16:9) | 1600 x 900 | 1408 x 792 | 446 x 792 |
Destacan dos cosas. Para la fotografía de paisaje, el cuadrado y el retrato 4:5 dan un tamaño de imagen idéntico; el marco del retrato sólo añade más mate. Entonces, para imágenes anchas, el cuadrado es la opción más ordenada. Para la foto alta del teléfono, el retrato 4:5 le da a la imagen aproximadamente un 28% más de altura que un cuadrado (1220 contra 950 píxeles), razón por la cual el retrato es el mejor valor predeterminado para tomas verticales.
La lista preestablecida completa en la herramienta cubre Instagram (cuadrado, retrato, paisaje, historia), Hilos (cuadrado, retrato), Bluesky (imagen de alimentación y cuadrado), X (imagen de publicación y tarjeta de resumen), feed de Facebook, feed de LinkedIn, YouTube miniatura, pin estándar de Pinterest y vista previa del enlace Open Graph. Las plataformas cambian sus cultivos y vuelven a codificar las cargas, así que trátelas como " lo que cabe hoy" en lugar de una garantía.
¿qué fondo debería usar un mate?
La herramienta ofrece cuatro fondos: una copia borrosa de la imagen, un color sólido que elijas, blanco o negro. La copia borrosa es la opción predeterminada y, por lo general, la mejor para las fotos, porque llena el marco con la paleta propia de la imagen ' sin que tengas que elegir un color.
| conocimientos | parece | mejor para | estar atento a |
|---|---|---|---|
| Copia borrosa de la imagen | El familiar Instagram "llenar" mirar | Fotos, viajes, comida, cualquier cosa colorida | Las imágenes ocupadas producen un fondo ocupado |
| Color sólido | Una tarjeta plana detrás de la imagen | Cuentas de marca, tomas de productos, logotipos | Elige un color que no combine con la foto |
| Blanco | Impresión de galería en una pared blanca | Alimentos mínimos, capturas de pantalla en modo luz | Las fotografías con bordes claros pierden sus límites sin sombra |
| Negro | Buzón de cine | Tomas nocturnas, fotogramas de películas, capturas de pantalla de la interfaz de usuario oscura | Las fotografías con bordes oscuros pierden sus límites sin sombra |
Cómo se crea el fondo borroso
El fondo borroso no es una suposición de un color a juego. Es tu propia imagen, recortada para llenar todo el marco, borrosa mucho y ligeramente oscurecida, con la imagen nítida dibujada en la parte superior. El desenfoque utiliza el lienzo filter propiedad, documentada en MDN's Página CanvasRenderingContext2D.filter, y su radio escala con el marco: 6% del lado más corto, es decir, 65 píxeles en un cuadrado de 1080.
Un detalle importa para la calidad. Un desenfoque cerca del borde de un lienzo tiene un promedio de píxeles transparentes desde fuera, lo que deja un borde pálido alrededor del borde. La herramienta evita eso dibujando el fondo un 12% más grande que el marco en cada lado (130 píxeles de sobregiro en un cuadrado de 1080), por lo que el desenfoque tiene datos de imagen reales para muestrear hasta el borde. Luego, un lavado negro del 12% pasa por encima, lo que mantiene la lectura nítida del sujeto como sujeto.
¿qué hacen el acolchado, el radio de las esquinas y la sombra?
Las tres configuraciones son proporcionales, por lo que tienen el mismo aspecto con 1080 píxeles que con 1600.
acolchado va de 0 a 25% y se mide con respecto al marco y al lado más corto. En 0, una imagen ancha toca ambos bordes laterales y el mate se muestra solo como barras arriba y abajo: un buzón puro. Entre el 4% y el 8% se lee como un borde deliberado sin reducir mucho la imagen. Los valores más grandes se adaptan a publicaciones estilo tarjeta de cotización donde el fondo es parte del diseño. En un cuadrado de 1080, cada punto porcentual de relleno elimina 21,6 píxeles de la imagen y el ancho disponible de #39.
Radio de esquina va de 0 a 50% y se mide con respecto a la imagen colocada 's lado más corto, no el marco. Con el ejemplo de paisaje anterior, la imagen tiene 534,6 píxeles de altura, por lo que el radio predeterminado del 12% rodea cada esquina en aproximadamente 64 píxeles. Al 50% los lados cortos se convierten en semicírculos completos, dando forma de pastilla.
Sombra caída está encendido de forma predeterminada. Es una sombra negra del 28% con un desenfoque del 3% del fotograma 's lado más corto y un desplazamiento hacia abajo del 1%, lo que en un fotograma de 1080 significa un desenfoque de 32 píxeles y una caída de 11 píxeles. Separa la imagen de un fondo de brillo similar, que es exactamente el caso en el que los mates blancos o negros necesitan ayuda.
Cómo poner una foto sobre un mate, paso a paso
- Abre el generador mate gratuito y agregue su imagen soltando un archivo, haciendo clic para navegar o pegando desde el portapapeles. Pegar es la ruta más rápida para capturas de pantalla.
- Elija el tamaño de salida de la lista preestablecida agrupada. Comience con Instagram cuadrado para fotos anchas y Instagram retrato para fotos altas.
- Elige el fondo. Mantenga la copia borrosa para las fotografías; cambie a un color sólido y escriba un valor hexadecimal para el trabajo de marca.
- Ajuste el relleno, el radio de la esquina y la sombra mientras mira la vista previa. El lienzo de vista previa se representa con el tamaño de salida real, por lo que lo que verá es el archivo que obtendrá.
- Elija un formato y descárguelo. El archivo lleva el nombre de su original
-matteañadido, entoncesbeach.jpgse convierte enbeach-matte.png.
PNG, JPEG o WebP: ¿qué formato deberías exportar?
Exporte PNG cuando el resultado tenga transparencia o texto nítido, JPEG cuando desee un archivo pequeño que acepte cada plataforma y WebP cuando desee el archivo más pequeño y el destino lo admita. JPEG y WebP están codificados con una calidad del 92%.
| formato | Compresión | Mantiene la transparencia | Uso Típico |
|---|---|---|---|
| PNG | sin pérdidas | sí | Capturas de pantalla, logotipos en un mate transparente, archivando el resultado |
| JPEG | Perdido, calidad 0,92 | No, se aplana a opaco | Publicaciones de fotos en cualquier plataforma |
| webp | Perdido, calidad 0,92 | sí | Sitios web y plataformas que aceptan WebP |
La mayoría de las plataformas sociales vuelven a codificar lo que carga de todos modos, por lo que el formato de exportación importa menos para el feed que para su propia copia. Si planea editar más el resultado, mantenga un PNG. Si el archivo debe ser más pequeño antes de cargarlo, el Guía de compresión de imágenes recorre los entornos de calidad con más profundidad.
¿se puede utilizar un PNG transparente?
Sí, y funciona bien para logotipos y tomas de productos recortados. Un PNG transparente colocado limpiamente sobre compuestos de color sólido, por lo que un mate se convierte en una forma rápida de colocar un logotipo en un cuadrado de marca. Si primero necesita eliminar un fondo, el guía de eliminación de fondo cubre ese paso. Exportar el resultado como PNG o WebP para mantener la transparencia en el archivo; JPEG no tiene canal alfa y lo aplanará.
¿un mate reduce la calidad de la imagen?
No, siempre y cuando la fuente sea más grande que el espacio al que se atrae. Los ajustes preestablecidos de salida son de 1080 píxeles o más anchos, y una foto típica de un teléfono tiene entre 3000 y 4000 píxeles en su lado largo, por lo que la imagen se reduce, lo que no pierde nada visible. El lienzo lo dibuja con suavizado de alta calidad.
La única excepción es una fuente pequeña. Si coloca una imagen de 600 x 400 en un cuadrado de 1080 con un relleno del 6%, debe escalarse hasta 950 x 634, un factor de aproximadamente 1,58, y se verá suave por la misma razón que cualquier ampliación. La herramienta no puede agregar detalles que nunca estuvieron en el archivo. Si su fuente es pequeña, reduzca el relleno o elija un ajuste preestablecido más pequeño para que el factor de escala se mantenga cerca de 1. El guía de cambio de tamaño de imagen explica por qué la ampliación se desdibuja y cuándo es aceptable.
Errores comunes y mensajes de error
Algunos problemas surgen con suficiente frecuencia como para nombrarlos.
- "Ese archivo no es una imagen." La herramienta verifica el archivo 's tipo MIME informado antes de decodificarlo. En este paso se rechaza un PDF o un documento arrastrado por error.
- "Esa imagen no se pudo leer." El archivo afirma ser una imagen pero el navegador no pudo decodificarla. Esto sucede con descargas corruptas y con formatos que un navegador en particular no admite. La zona de caída enumera PNG, JPEG, WebP, GIF y AVIF; Las fotos HEIC de un iPhone generalmente necesitan convertirse primero.
- El mate parece gris en lugar de colorido. Probablemente elegiste la opción de color sólido y dejaste el gris claro predeterminado. Cambie el fondo a la copia borrosa.
- Una imagen blanca desaparece en un blanco mate. Enciende la sombra, agrega un poco de relleno o cambia al fondo borroso.
- La publicación todavía está recortada. El ajuste preestablecido que exportó no coincide con el lugar donde lo publicó. Se recortará una imagen de 1200 x 630 Open Graph cargada como publicación de feed de Instagram, porque 1.91:1 solo se acepta como publicación horizontal.
- La descarga no comienza. Las descargas cuentan para un límite de uso diario. Cuando se alcanza el límite, la herramienta muestra un mensaje en lugar de un archivo.
¿Se sube algo?
No. La imagen se lee con una URL de objeto local, compuesta en un HTML <canvas> elemento en la pestaña de su navegador y codificado en un archivo con el lienzo toBlob método descrito en el Especificación de lienzo WHATWG HTML. No se envían datos de imagen a un servidor, ni se almacenan ni se registran. Una vez cargada la página, sigue funcionando con la red desconectada. El seguimiento del uso registra solo qué formato preestablecido, fondo y formato utilizó, nunca la imagen.
Alternativas a un generador mate online
Una herramienta de navegador es una ruta entre varias.
- La plataforma & #39;s propia opción de ajuste. Algunas pantallas de carga, Instagram & #39; entre ellas, pueden caber una foto dentro del marco con barras simples en lugar de recortarla. Es rápido, pero obtienes poco o ningún control sobre el fondo, el relleno o la sombra.
- Editores de fotografías telefónicas. Muchas aplicaciones de galería y aplicaciones de edición tienen un modo "fit" o "sin cultivo" con un fondo borroso. Funcionan bien para fotografías individuales en el teléfono y los resultados varían según la aplicación.
- Software de diseño de escritorio. Photoshop, Affinity o Figma brindan control total, incluidas las posiciones exactas de los píxeles. Tardan más y necesitan instalar el software.
- Línea de comando. ImageMagick puede rellenar una imagen a un tamaño fijo con
-gravity center -extent 1080x1080, que se adapta a trabajos por lotes en un servidor.
Las ventajas del enfoque del lado del cliente son que no necesita instalación ni cuenta, funciona igual en ningún sistema operativo y mantiene la foto en su dispositivo. Para una sola publicación o un lote pequeño, suele ser la opción más rápida. Para cientos de imágenes, gana un script.
los centro de herramientas de redes sociales enumera las utilidades relacionadas en un solo lugar, incluida la generador de tarjetas de fotos para cotizaciones y tarjetas de noticias y el Imagen Marcador de agua por agregar un logotipo o crédito antes de publicar.
