Las páginas modernas y los elementos web están diseñados para ser totalmente receptivos en todos los dispositivos, lo que significa que las imágenes usadas en los elementos web se escalarán de forma diferente en función de dónde se muestren, qué diseño se use y el dispositivo en el que se visualicen. Por ejemplo, las páginas modernas están diseñadas para verse bien en dispositivos móviles y el escalado automático de imágenes ayuda a crear esa experiencia atractiva.
¿Qué tamaños de imagen funcionan mejor?
Debido al diseño de la página responsiva, no hay una altura o anchura específica en píxeles que garantice que una imagen mantendrá una forma específica en todos los dispositivos y diseños. Las imágenes se cambian de tamaño y se recortan automáticamente para mostrar el mejor resultado posible en una variedad de dispositivos y diseños. Sin embargo, hay algunas pautas que pueden ayudarlo a asegurarse de que sus imágenes se vean bien en sus páginas.
Encontrar los mejores tamaños de imagen para la página depende de estos factores:
- Relación de aspecto: la relación entre la altura y la anchura de las imágenes
- Diseño de columna: el tipo y el número de columnas de la página
- Diseño del elemento web: el diseño que elige para el elemento web en el que se usa la imagen
Relación de aspecto
Una relación de aspecto es la relación entre el ancho y el alto de las imágenes. Normalmente se expresa como dos números, como 3:2, 4:3 o 16:9. El ancho siempre es el primer número. Por ejemplo, una proporción de 16:9 podría ser de 1600 píxeles de ancho por 900 píxeles de alto. O bien, podría ser 1920 x 1080, 1280 x 720 o cualquier otra combinación de ancho y alto que se pueda calcular para ser igual a 16:9. Puedes encontrar calculadoras de relación de aspecto en línea y en algunas herramientas de edición de fotos para ayudarte a determinar las relaciones de aspecto de tus imágenes.
En la mayoría de los casos, las imágenes de los elementos web modernos funcionan mejor en diseños y dispositivos cuando tienen una relación de aspecto de 16:9 o 4:3, según el diseño.
Diseños de columna
Una página se puede diseñar con secciones que incluyan diferentes tipos de columnas y diseños, como columnas de ancho completo, una columna, dos columnas, tres columnas, un tercio a la izquierda y un tercio a la derecha. Una regla general para las imágenes que se espera que llenen el ancho de una columna es que deben ser al menos tan anchas como la columna en la que están colocadas. Por ejemplo, una imagen de un elemento web de imagen de una columna debe tener al menos 1204 píxeles de ancho.
Estas son las directrices de ancho para cada uno de los diseños de columna:
| Diseño | Ancho en píxeles |
|---|---|
| Columna de ancho completo | 1920 |
| Una columna | 1204 |
| Dos columnas | 586 por columna |
| Tres columnas | 380 por columna |
| Un tercio de la columna izquierda | 380 para la columna izquierda; 792 para la columna derecha |
| Un tercio de la columna derecha | 792 para la columna izquierda; 380 para la columna derecha |
Debido a la naturaleza receptiva de las páginas, las imágenes de las columnas de ancho completo siempre se mostrarán en todo el ancho de la pantalla con un alto automático basado en el tamaño de la pantalla.
La altura de las imágenes colocadas dentro de otros diseños de columna dependerá de la relación de aspecto. Estas son las directrices de altura y anchura para las relaciones de aspecto 16:9 y 4:3 (redondeadas hacia arriba o hacia abajo al píxel más cercano). Esto es útil para mantener las imágenes en un ancho y alto que se escalen adecuadamente para dispositivos móviles, por ejemplo:
| RELACIÓN DE ASPECTO DISEÑO |
16 x 9 Ancho x Alto en píxeles |
4 x 3 Ancho x Alto en píxeles |
|---|---|---|
| Una columna | 1204 x 677 | 1204 x 903 |
| Dos columnas | 586 x 330 | 586 x 439 |
| Tres columnas | 380 x 214 | 380 x 285 |
| Un tercio de la columna izquierda | 380 x 446 para la columna izquierda; 792 x 446 para la columna derecha | 380 x 594 para la columna izquierda; 792 x 594 para la columna derecha |
| Un tercio de la columna derecha | 792 x 446 para la columna izquierda; 380 x 446 para la columna derecha | 792 x 594 para la columna izquierda; 380 x 594 para la columna derecha |
Diseños de elementos web
Los diseños de los elementos web que use también afectarán a la escala de las imágenes. En los ejemplos siguientes, se muestran diferentes elementos web y algunas de las opciones y relaciones de aspecto que puede usar.
| Elemento web | Relaciones de aspecto |
|---|---|
| Elemento web Elemento principal | Las siguientes relaciones de aspecto para los diseños de iconos y capas son:
|
| Elemento web de contenido resaltado | 16:9 es la relación de aspecto para los diseños de carrusel, tira de película y cuadrícula. Este es un ejemplo de la relación de aspecto 16:9. La primera imagen muestra el diseño de tira de diapositivas y la segunda muestra el diseño de cuadrícula: 
|
| Elemento web de imagen | Las imágenes se expandirán hasta el ancho de la sección que contiene el elemento web. Este es un ejemplo de una imagen del elemento web Imagen que usa la relación de aspecto 16:9. 
También tienes la opción de cambiar la relación de aspecto o el recorte a mano alzada usando la herramienta de edición de imágenes o usar los controladores de cambio de tamaño para hacer tu imagen más grande o más pequeña. 
|
| Elemento web Galería de imágenes | Las siguientes relaciones de aspecto se pueden usar en diferentes diseños:
|
| Elemento web de noticias | Según el diseño, las imágenes del elemento web Noticias pueden ser 4:3, 16:9 o 21:9. Este es un ejemplo de imágenes de una historia principal y un diseño de carrusel: 
|
| Área de título de página | Las imágenes se ven mejor cuando tienen una relación de aspecto horizontal o superior a 16:9 y cuando tienen un tamaño de al menos 1 MB. Además, asegúrese de establecer un punto focal para mantener la parte más importante de la imagen a la vista, especialmente cuando la imagen se usa en miniaturas, diseños de noticias y resultados de búsqueda. Ejemplo (imagen original 16:9) con un punto focal establecido en el orador: 
|
| Miniatura de página | Las miniaturas de página se muestran en lugares como resultados de búsqueda, resultados de contenido resaltado, publicaciones de noticias y mucho más. De forma predeterminada, la miniatura procede del área de título de la página o del elemento web que está en primer orden en la página (por ejemplo, arriba a la izquierda de un diseño de página). Puede reemplazar el valor predeterminado y cambiar la miniatura de la página. Cuando lo hagas, lo mejor es usar una imagen con una relación de aspecto de 16:9. Ejemplo (imagen original 16:9): 
|
| Elemento web de vínculos rápidos | El elemento web Vínculos rápidos tiene seis diseños diferentes. Estas son las relaciones de aspecto preestablecidas:
|
Recomendación
Al agregar una imagen a un área de título de página o elemento web Elemento principal, también es mejor establecer el punto focal en el área de la imagen que siempre se quiere mostrar. Para obtener más información sobre cómo establecer un punto focal para estos dos escenarios, vea Usar el elemento web Hero y Crear y usar páginas modernas en un sitio de SharePoint.
Recomendaciones de imagen de encabezado de sitio
Además de las páginas, es posible que quieras agregar logotipos o imágenes personalizados en un diseño extendido. Estas son las recomendaciones de tamaño para esos elementos.
| Elemento | Descripción | Recomendación Ancho x Alto en píxeles |
|---|---|---|
| Logotipo del sitio | Logotipo más grande que puede ser no cuadrado y transparente según el diseño cargado. | 192 x 64 Formato: PNG, JPEG, SVG (SVG no se permite en sitios conectados a grupos) |
| Miniatura del logotipo del sitio | Miniatura del logotipo cuadrado que se usa si no se carga ningún logotipo de sitio o en lugares en los que se requiere un formato cuadrado. Este elemento es obligatorio. |
64 x 64 Formato: PNG, JPEG, SVG (SVG no se permite en sitios conectados a grupos) |
| Logotipo del sitio de diseño extendido | El diseño de encabezado extendido tiene un ancho de logotipo de sitio extendido. | 300 x 64 Formato: JPEG, PNG, SVG |
| Imagen de fondo de diseño extendido | Una nueva imagen de fondo que se puede usar con el encabezado extendido. | 2560 x 164 Formato: JPEG, PNG |