Pautas de tamaños de imagen según el widget
Deslizador
El widget de deslizador normalmente se usa con imágenes de tamaño más grande para un efecto dramático. Los deslizadores generalmente se extienden de un extremo al otro, por lo que es recomendable usar imágenes con más anchura para ajustarse al deslizador. Para deslizadores "cuadrados", use una relación de aspecto uniforme como 1:1.
Es mejor elegir imágenes con un buen relleno, de forma que el contenido principal de la imagen no quede cortado cuando se le cambie el tamaño. Las relaciones de las imágenes deberían ser las mismas en el deslizador para coherencia en el diseño.
- Relaciones de aspecto comunes: 16:9, 3:4
- Tamaños de resolución comunes (px): 1600x900, 1280x720, 1280x960
Notas específicas por dispositivo: Los dispositivos móviles a menudo tienen la relación de aspecto opuesta en comparación con los dispositivos de escritorio. Quizás deba usar la característica ocultar en dispositivo para mostrar los deslizadores móviles correctamente.
Galería
El widget de galería es el widget más flexible para usar con imágenes, solo debido a que hay muchas opciones de disposición. Por ejemplo, puede tener una galería de baldosas, que tiene el mismo tamaño para todas las imágenes, o de mosaicos, que tiene un tamañodiferente según la imagen.
La relación de aspecto de las imágenes en la galería debería reflejar cómo desea que se muestre.
- Por ejemplo, galerías de estilo cuadrado deberían tener una relación de imágenes de 1:1.
- Las galerías de estilo de imágenes altas deberían tener relaciones de mayor altura, como 2:5 o 200px por 500px.
Las relaciones de las imágenes deberían ser las mismas para coherencia en el diseño. Deje cierto relleno en la imagen si desea usar el efecto "hover", de forma que sus imágenes no queden cortadas.
- Relaciones de aspecto comunes: Cualquier relación de aspecto.
- Tamaños de resolución comunes (px): Cualquier resolución, pero no mayor de 1500px para velocidad de la página.
Iconos
Los iconos son una parte importante de cualquier sitio. Son marcadores visuales de información y pueden brindar un aspecto moderno a su sitio. Puede usar PNG, JPEG o SVG transparentes.
- Relaciones de aspecto comunes: Generalmente 1:1, pero cualquier relación de aspecto servirá.
- Tamaños de resolución comunes (px): 200x200, 80x80 o cualquier resolución. Los SVG pueden tener cualquier resolución.
Iconos de favoritos
Los iconos de favoritos no se usan propiamente en su sitio, sino que más bien son lo que se muestra en la ficha cuando los usuarios abren su sitio web.
- Relación de aspecto requerida: 1:1
- Tamaños de resolución permitidos (px): 24x24, 36x36, 48x48
Relación de aspecto vs. resolución
La relación de aspecto es la "relación" del atributo de anchura y altura de una imagen. Una relación de aspecto de 16:9 puede ser una imagen de 16x19 px o una imagen de 1600x900 px. Es básicamente cualquier resolución de imagen que tiene una relación de 16:9.
Diferentes relaciones de aspecto según dispositivo
Aunque Mi Sitio optimiza las imágenes en su sitio, realmente no cambia el tamaño del diseño de las imágenes de su sitio. Si utiliza una imagen en un escritorio que tiene una relación de aspecto de 16:9, esta lucirá perfecta allí debido a que un dispositivo de escritorio es ancho. Sin embargo, un dispositivo móvil es mucho más pequeño, por lo que una relación de aspecto de 16:9 a veces lucirá pequeña.
Para compensar, puede usar la característica ocultar en dispositivo para crear versiones específicas para esos dispositivos o cambiar las dimensiones de la imagen para ajustarla; los cambios de tamaño son independientes del dispositivo.