Pautas de tamaño de imágenes

  • Base de conocimiento
  • Responsive Website Builder
  • Pautas de tamaño de imágenes
  • Ayuda de Duda > Responsive Website Builder > Editar un sitio

Descripción general

Cada vez que carga una imagen, Duda crea hasta 5 copias de tamaño reducido de la imagen. Luego Duda insertará automáticamente la imagen de tamaño adecuado en los sitios web de escritorio, tableta y móvil, asegurándose de que los visitantes de su sitio siempre vean la imagen de tamaño adecuado para su dispositivo.

Guía

Tamaños de imagen optimizados según dispositivo

Tipo de imagen Anchura de imagen
Fondo 1980px
Escritorio 1660px
Tableta 1440px
Móvil 600px
Miniatura 150px

Duda no aumentará el tamaño de una imagen cargada y solo creará imágenes que sean más pequeñas que la imagen cargada original.

Por ejemplo, si se carga una imagen de 2000px de anchura, se crearán 5 nuevas copias optimizadas. Si se carga una imagen de 100px de anchura, no se crearán nuevas imágenes.

Tamaño máximo de imagen

El área total de una imagen no puede exceder 3,145,728 píxeles. Es improbable que cualquiera de sus imágenes supere este límite, pero puede verificarlo rápidamente multiplicando la anchura por la altura de píxeles.

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.

Visualización de las dos relaciones de aspecto más comunes:

10.17.2017-16.25.png

Diferentes relaciones de aspecto según dispositivo

Aunque Duda 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.

Consideraciones 

Lo mayor no siempre es lo mejor

Cargar la mayor resolución para su sitio garantizará que las imágenes de su sitio sean de alta resolución para sus clientes y usuarios; sin embargo, es bueno tener en cuenta que las imágenes grandes también tienen un efecto drástico en la velocidad de su página. Debido a que las imágenes de alta resolución son reducidas en proporción, los usuarios normalmente no notan la diferencia en resolución. Es mejor cargar imágenes que sean tan grandes como se espera usarlas. Por ejemplo, si tiene una fotografía de 300px por 300px en su sitio, no le conviene cargarla como una imagen de 4000px por 4000px.

 

×

Por favor inicie sesión como Pro

Soporte telefónico prioritario está disponible exclusivamente para DudaPros. Inicie sesión en su cuenta DudaPro ahora para ver nuestros números de asistencia internacional.

Inicie sesión
¿No eres un DudaPro?¡Compra DudaPro!