Guía de tamaño de fotos de Facebook | Nuevo diseño de Facebook

A mediados de 2020, Facebook comenzó a implementar un nuevo diseño de escritorio para su sitio. Es más limpio, con más espacios en blanco y lo acerca más a la versión móvil. Pero también es bastante diferente. Así que esta es una versión revisada de mi guía de tamaño de imagen de Facebook no oficial para tener en cuenta el diseño más reciente, al que llaman Nuevo Facebook (la versión anterior se llama Classic Facebook) .1

Inicialmente, este nuevo El diseño es una actualización opcional, y puede volver al diseño clásico de Facebook desde Nuevo Facebook. Pero eventualmente se extenderá a todos. Si todavía usa el diseño antiguo (o Facebook clásico, como lo llaman), puede encontrar la versión anterior de la guía de tamaños de Facebook aquí.

Durante el lanzamiento, algunos usuarios verán su página con el nuevo diseño y algunos con el diseño anterior. Pero si está subiendo contenido nuevo, probablemente tenga más sentido optimizarlo para el diseño nuevo.

Las imágenes son una parte importante del uso de Facebook, pero si ha venido a través de esta página, sin duda ha descubierto por sí mismo que determinar qué tamaños de imagen usar en Facebook no es tan fácil como podría ser. Implica algunas discusiones para obtener los resultados que desea. Cada tipo de imagen en un La página, el perfil y la línea de tiempo tienen su propio tamaño y peculiaridades. Y Facebook nunca ha sido muy bueno para hacer que sus páginas de ayuda sean fáciles de encontrar.

Mantener las cosas aún más frustrantes e interesantes es en Facebook cambia las cosas de vez en cuando, generalmente sin previo aviso. A veces es un pequeño ajuste incremental. A veces es una revisión completa (como cuando se introdujeron las líneas de tiempo y nuevamente cuando se cambiaron de dos columnas a una columna). Así que siempre es un objetivo en movimiento. Y siempre parece haber un nuevo sistema a la vuelta de la esquina.

Entonces, ya sea que esté usando páginas de Facebook para marketing en redes sociales o simplemente tratando de publicar fotos para amigos y familiares, aquí está mi versión 2020 del guía no oficial para los tamaños de las fotos de Facebook en las distintas partes del sitio.

Este es un esfuerzo preliminar para deconstruir los tamaños de pantalla a medida que se implementa la actualización. Intentaré actualizarlo a medida que se aclaren algunas de las especificaciones. Si encuentra un comportamiento de visualización diferente, hágamelo saber para que pueda investigar y actualizar según sea necesario.

Tamaño de la foto de portada de Facebook

Recomendación: use una imagen que tenga al menos 940 píxeles de ancho por 352 píxeles de alto. Pero si desea una mejor calidad, use una imagen de al menos 1800 píxeles por 704 píxeles.

La foto de portada de Facebook es el gran espacio de imagen panorámica en la parte superior de la línea de tiempo. A veces también se le llama imagen de banner o foto de encabezado.

Su visualización es receptiva. Dicho de otra manera, el tamaño en el que se muestra varía según el tamaño de la ventana del navegador o la pantalla del dispositivo. Puede ver este efecto si cambia el tamaño de la ventana de su navegador mientras visualiza la página.

Con el diseño anterior, tratar de averiguar qué se mostraría correctamente en la foto de portada de Facebook era un poco complicado, porque no todas las partes de la imagen se mostrarían en todos los tamaños. Se recortaron zonas seguras y tiras en la pantalla del escritorio.

La nueva versión ha simplificado las cosas. La imagen completa se muestra y cambia de tamaño de una manera mucho más simple.

Dicho esto, hay algunas cosas a tener en cuenta.

En primer lugar, han vuelto a tener un estrecho banda de sombreado graduado en la parte inferior. Es una superposición, lo que significa que se coloca en una capa encima de su imagen. Por lo tanto, no querrá incluir ningún texto o detalle importante en esa franja inferior.

En segundo lugar, está tomando el color de los píxeles más externos de la imagen y usándolos para crear una sección de color sombreada en el espacio en blanco sección detrás de la imagen. Aquí hay un ejemplo de lo que quiero decir, en el que se toma el rojo del borde exterior de la imagen y se aplica a la sección blanca de atrás. (He recortado la foto de perfil aquí para simplificar las cosas). Las marcas con una paleta de colores específica querrán tomar nota particular para incluir los colores deseados en el borde de la imagen.

En tercer lugar, el las esquinas inferiores se redondean ligeramente (o el radio del borde, para ser técnico). Sin embargo, no es muy agresivo, por lo que es poco probable que cause problemas a muchos usuarios.Pero si usa una línea de trazo alrededor de su imagen u otro encuadre detallado, puede causar problemas. Se aplica automáticamente y no hay forma de desactivarlo.

En cuarto lugar, la foto de perfil ahora vuelve a superponerse a la foto de portada. Aunque es solo sutil en esta versión, y solo una astilla oscurece la foto de portada.

Cambio de la foto de portada de Facebook

Si acaba de configurar un nuevo perfil o página de Facebook y aún no tiene una foto de portada, simplemente haga clic en el botón «Agregar una portada» en la parte superior de la página donde irá la foto de portada.

Una vez que haya agregado su foto, puede reemplazar fácilmente. Cuando inicie sesión en su cuenta y visualice su página, haga clic en el botón Edit en la parte inferior derecha.

Al hacer clic en él, se abre una gota -menú desplegable desde el que puede elegir la fuente para la nueva foto. Este también es el mismo menú que debe usar si desea eliminar o reposicionar una foto existente o usar una portada de video o presentación de diapositivas.

Portada Tipos de fotos: imágenes individuales

En términos de tipos de imágenes, las panorámicas son ideales. Los recortes simples también funcionan, aunque la efectividad, obviamente, variará según la imagen. Y no hay nada que le impida ensamblar mult ione las fotos en un collage en su software de imágenes, guárdelo como un archivo de imagen único y cárguelo. Como estos, por ejemplo:

Presentaciones de diapositivas de portada: varias imágenes

Hasta hace poco, solo era posible elegir una foto para que actuara como su foto de portada estática. Pero se ha agregado una nueva característica: presentaciones de diapositivas. Ahora puede seleccionar hasta 5 fotos que rotan. Acceda a esta función a través del mismo menú que le permite agregar o cambiar la foto de portada (es decir, el ícono de la cámara en la parte superior izquierda de la sección de imagen de portada).

Cuando crea una presentación de diapositivas, se le da la opción para seleccionar hasta 5 imágenes que se utilizarán. Utilice la tira de película en la parte superior para elegir las imágenes entre imágenes existentes o cargar otras nuevas. Luego puede hacer clic en la miniatura y obtener una vista previa de cómo se verá en el espacio más grande debajo de las miniaturas. Puede hacer clic y arrastrar en esa sección para reposicionar la imagen en la ventana gráfica.

También puede tener una versión generada dinámicamente que le permite a Facebook elegir las fotos según lo que esté funcionando bien y según la actividad en su página. . Puede activar o desactivar esta función usando el interruptor en la parte superior derecha de la pantalla de edición de la presentación de diapositivas.

Si está usando la portada de la presentación de diapositivas, sus visitantes pueden navegar a través de la presentación de diapositivas usando las flechas a cada lado (el diseño anterior tenía indicadores de posición en la parte inferior, pero ya no están en la nueva versión).

Hay algunas cosas que me parecen extrañas acerca de la forma en que las presentaciones de diapositivas se muestran actualmente a los visitantes. La primera es que la presentación de diapositivas no avanza automáticamente. Entonces, para ver más de una imagen en la presentación de diapositivas, sus visitantes tendrán que saber avanzar manualmente usando los botones de flecha al costado de la imagen. Sospecho que solo un porcentaje muy pequeño lo hará. La segunda cosa es que si desactiva la opción para que Facebook elija las imágenes, muestra las imágenes en el mismo orden cada vez en lugar de hacerlo de forma aleatoria. El resultado de ambas cosas es que, al menos en la forma en que se implementa actualmente, es probable que la gran mayoría de los visitantes de su página solo vean la primera imagen. La tercera rareza, al menos para mí, es acomodar el nuevo resaltado de color sombreado en la sección de fondo. Debido a que se extrae de la imagen de perfil que se muestra, cambia junto con la imagen de perfil. Eso no es necesariamente algo malo, pero es algo que vale la pena conocer.

Videos de portada

Ahora también puede usar archivos de video para el área de su banner. Deben tener una duración de entre 20 y 90 segundos y medir al menos 820 por 312 píxeles. El tamaño recomendado es 820 por 462.

Si está grabando un videoclip con una cámara que le permite elegir la resolución de video, el modo 720p sería un buen lugar para comenzar porque mide 1280 por 720, que cómodamente tiene suficiente resolución.

Tengo una guía más detallada sobre las portadas de videos de Facebook por separado.

Imagen de perfil de Facebook

Tengo una publicación más detallada en el tamaño de la imagen de perfil de Facebook por separado, pero aquí está la esencia.

Tipo de pantalla	Dimensiones
Navegador web de escritorio / portátil	132 píxeles
Smartphones	128 píxeles
Feature Phones	36 píxeles

La imagen de perfil de Facebook ahora en la parte inferior a la izquierda de la foto de portada, superponiéndose ligeramente con la parte inferior de la foto de portada. Se ha reducido ligeramente con respecto a las versiones anteriores, hasta un círculo de 132 píxeles de diámetro.

Tiene una delgada línea blanca alrededor que se aplica automáticamente; no puede eliminarla ni controlarla.

La buena noticia es que no tiene que cargar una circular imagen, algo que sería un poco complicado de crear. En su lugar, puede cargar cualquier imagen rectangular o cuadrada regular. Independientemente de la forma que tenga la imagen que cargue, se recortará en un círculo cuando se muestre.

Tamaños de visualización de imagen de perfil de Facebook

Navegador web de escritorio / portátil. En una vista de página normal, como cuando alguien está revisando su perfil, se muestra en el navegador web de una computadora de escritorio como un círculo con un diámetro de 132 píxeles.

Teléfonos. El tamaño que muestra la imagen de perfil en los teléfonos móviles varía según el tipo de teléfono. En los teléfonos inteligentes modernos, se muestra como un círculo con 128 píxeles de diámetro. En teléfonos más antiguos, se muestra con un diámetro de 36 píxeles.

Cuando seleccione una foto para agregar una imagen de perfil, tendrá la opción de mover el área focal (asumiendo que no es cuadrada) así como acercar y alejar (siempre que supere la resolución mínima).

La imagen de perfil que aparece junto a su nombre en los comentarios y publicaciones en la línea de tiempo es la misma imagen y sigue siendo un círculo, pero es reducido automáticamente a un diámetro de 40 píxeles.

Requisito de tamaño para la imagen de perfil de Facebook

Debido a que se muestra tan pequeña, es poco probable que tenga problemas con el tamaño de la imagen. Siempre que su imagen tenga al menos 132 píxeles en su tamaño más corto (que es bastante pequeño), debería estar listo.

Miniaturas de enlaces compartidos

Las miniaturas de enlaces compartidos mostrar en un navegador web a 500 píxeles de ancho y 261 píxeles de alto.

Durante un tiempo, era posible elegir una imagen de enlace compartido diferente, pero esa característica se ha eliminado. Por ahora, al menos, existe una solución si comparte los enlaces utilizando un servicio de administración de redes sociales como Buffer, pero ya no puede elegir una imagen diferente para usar desde Facebook.

Si está compartiendo enlaces desde su propio sitio, es posible especificar qué imagen desea usar como la miniatura de la imagen, pero eso es algo que deberá configurar en su sitio y está más allá del alcance de esta publicación. Pero si está buscando qué términos usar Google en esto, lo que está tratando de hacer es establecer la propiedad «og: image» en los metadatos de Open Graph de la página. Aquí está la documentación de Facebook, y si está utilizando un CMS como WordPress para su sitio, hay complementos que pueden manejarlo por usted.

Lo que aún puede hacer es agregar más miniaturas además del original (no en su lugar). Cuando vaya a compartir un enlace , use la sección inferior de la ventana emergente para agregar más imágenes. Pero ya no puede deseleccionar la imagen original como solía hacerlo.

Fotos en la línea de tiempo

El El tamaño y la distribución de las miniaturas en la línea de tiempo varían según la cantidad de imágenes que comparta en la misma publicación y la orientación que tengan las imágenes específicas.

Así es como se muestran las diversas combinaciones. Todas las imágenes obtienen un color blanco trazar alrededor del borde.

Foto única en la línea de tiempo

Cuando subes una imagen a la línea de tiempo, se genera automáticamente una miniatura para que quepa dentro una caja de 500 px de ancho y hasta 750 px de alto. Entonces, si desea utilizar el máximo espacio disponible, cargue una imagen en orientación vertical (vertical) que tenga una proporción de 3: 2. Este es un ejemplo del uso del espacio máximo disponible:

Si carga una imagen horizontal (horizontal), se escalará a 500px de ancho y conservará su forma. El área completa de la imagen aparece sin ningún recorte.

Este es otro rectángulo en orientación horizontal, pero tiene una relación de aspecto mucho más estrecha, como un banner o una panorámica. El ancho es nuevamente de 500 px y la imagen se escala para que aparezca toda el área de la imagen.

Si carga esa misma imagen girada 90 grados, de modo que sea alta en lugar de ancha, se recortará al máximo. área disponible de 500 px por 750 px.

Y si subes un cuadrado, se mostrará la imagen completa, con un ancho de 500 px.

Publicar varias imágenes a la vez en la línea de tiempo de una página

Puede cargar varias fotos a la vez en la línea de tiempo. La forma en que se muestran depende de la cantidad de imágenes que esté cargando y la orientación de lo que llamaré la imagen principal.

La imagen principal es lo que llamo la que se muestra primero en la carga. emergente, y también se muestra más grande en algunos de los diseños. Hasta donde yo sé, no hay un nombre oficial para eso, pero voy a seguir adelante y usar «imagen principal». A eso me refiero en la siguiente sección.

Además de mostrarse primero, la imagen principal tiene otra función importante. Determina el diseño que obtiene. Si sube 3 imágenes con un cuadrado principal imagen, terminará con un diseño diferente que si carga 3 imágenes con una imagen principal rectangular.

La forma más sencilla de seleccionar qué imagen sirve como imagen principal es arrastrarla hacia la izquierda en el cuadro de diálogo de carga.

Aquí hay un ejemplo de lo que quiero decir. En esta, estoy subiendo dos imágenes, un cuadrado naranja y un rectángulo vertical verde. Si el cuadrado naranja está en la primera posición en el cuadro de diálogo de carga, así:

se publica así:

Subiendo exactamente las mismas dos imágenes pero invirtiéndolas, de modo que la vertical el rectángulo es primero, así:

se muestra así:

El mismo principio se aplica si está cargando dos, tres o cuatro imágenes; el diseño siempre se basará en la imagen principal.

2 imágenes con imagen principal horizontal (horizontal)

El ancho completo se convierte en 500px. La imagen superior tiene 250 píxeles de alto; la parte inferior tiene 249 píxeles de alto. Hay una línea blanca de 2px entre ellos.

2 imágenes con imagen principal vertical (retrato)

2 imágenes con imagen principal cuadrada

3 imágenes con imagen principal horizontal (horizontal ) Imagen principal

Debido a que el diseño se inspira en la imagen principal, puede mezclar y combinar las orientaciones de las imágenes no primarias; seguirán mostrando lo mismo.

3 imágenes con imagen principal vertical (retrato)

3 imágenes con imagen principal cuadrada

4 imágenes con una imagen principal horizontal (paisaje)

Puede mezclar y coincidir con las orientaciones de las imágenes no primarias; seguirán mostrando lo mismo.

4 imágenes con una imagen primaria vertical (retrato)

4 imágenes con una imagen primaria cuadrada

5 o más imágenes con una imagen principal horizontal (vertical)

Mostrará las primeras cinco imágenes en una especie de patrón de mosaico, como este. Si incluye más de cinco imágenes, obtendrá un pequeño botón superpuesto más un símbolo para mostrar las demás.

5 o más imágenes con una imagen principal cuadrada o vertical (vertical)

Obtendrá la misma pantalla si la imagen principal es un cuadrado o un rectángulo vertical.

Fotos de ancho completo en la línea de tiempo de Facebook

Sí, eran geniales. La imagen abarcaba ambas columnas. Pero Facebook los eliminó en su rediseño a mediados de 2014. Tus actualizaciones ahora solo se muestran en una sola columna y no hay forma de hacer que las fotos sean más anchas que esa columna.

Imágenes de encabezado de evento

No importa qué imagen de forma cargues como imagen de encabezado para una publicación de evento, se recortará a una relación de aspecto de 16: 9. Para obtener los mejores resultados, suba una imagen de 1920 x 1080 píxeles. Pero algo a tener en cuenta es que en la vista del evento principal se ha reducido bastante, así que no use fuentes que sean demasiado pequeñas (las personas pueden hacer clic en la imagen para abrir una versión más grande, pero no todos lo harán eso).

Cuando se muestra en la página del evento principal, se escala a 500 por 262 píxeles, así:

Problemas de calidad de imagen de Facebook

Algo para ser es consciente de que Facebook comprime algunas imágenes de forma bastante agresiva cuando las subes y las muestras.

Tiene sentido; naturalmente, quieren acelerar la carga de la página y reducir el ancho de banda aplicando tanta compresión como puedan. . No soy el único que desearía que fueran menos agresivos con su compresión, pero lo notable que sea dependerá de si factores como la gama de colores en tu imagen y la cantidad de detalles en tu foto.

En los ejemplos anteriores, la compresión JPG es mucho más notable en la versión de montaje que en la versión de Sydney Harbour Bridge. Configuré la misma configuración de calidad y nitidez para cada uno de los originales antes de que se cargaran. Algunos usuarios han informado que las imágenes con muchos rojos y naranjas parecen mostrar los efectos de la compresión más que las que tienen azules y verdes, pero depende de la imagen real.

También parece depender de qué tipo de imagen que estás mostrando. Las imágenes de la galería de fotos parecen tener menos compresión aplicada en la visualización que los elementos de diseño como la foto de portada y la foto de perfil.

Hay algunas cosas que puede hacer al preparar las imágenes antes de subirlas que pueden ayudar a reducir las posibilidades de que su imagen se verá mal.

Sube imágenes de 99 KB o menos en formato. Facebook debe dejar las imágenes menos que eso sin tocar, lo que le da control sobre cómo se aplica la compresión.

Sube imágenes que no tengan mucha compresión ya aplicada. Para los JPG, por ejemplo, intente mantener la configuración de calidad en 80 o más; Facebook lo comprimirá nuevamente de todos modos. Si está utilizando software que tiene en cuenta el espacio de color (como Lightroom o Photoshop), utilice el espacio de color sRGB. Y subir imágenes que ya han cambiado de tamaño a un tamaño cercano o similar al de la pantalla de destino y que no están demasiado nítidas parece funcionar bien.

Si ninguna de estas opciones funciona, echa un vistazo a mi publicación sobre cómo obtener texto nítido en las imágenes de Facebook.

¿Aparece texto borroso, logotipos o marcas de agua en las imágenes?

Si incluye texto, un logotipo o una marca de agua y encuentra que se vuelve borroso y poco claro debido a los artefactos JPG, tengo una publicación separada que detalla cómo solucionarlo: Cómo obtener texto nítido en las imágenes de Facebook.

Metadatos de imagen en Facebook

Si bien no está específicamente relacionado con el tamaño de las imágenes, vale la pena saber que Facebook elimina todos los metadatos de sus imágenes. Eso incluye todo el GPS, el tipo de cámara y otros datos que su cámara pueda incrustar, así como cualquier cosa como palabras clave o información de derechos de autor que haya agregado. (Una excepción es si estás en Alemania).

Ficha de referencia de fotos de Facebook

	Ancho	Alto	Notas
Foto de portada / Presentación de diapositivas de portada	820px	360px
Imagen de perfil en el encabezado	172px	172px	Debe tener al menos 180px por 180px
Imagen de perfil en la línea de tiempo	40px	40px	Misma imagen que la imagen de perfil principal, reducida automáticamente
Miniatura de enlace compartido	500px	261px	Solo para miniaturas individuales. Se recortan varias miniaturas.
Miniatura de la foto de la línea de tiempo cargada	500px max	750px max	Ver excepciones arriba para varias imágenes.
Imagen de encabezado del evento	500px	262px	Relación de aspecto 16: 9 solamente. Para obtener mejores resultados, suba una imagen de 1920 x 1080 px.