Pautas de tamaño de imágenes

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

Tamaños de imagen optimizados según dispositivo

Tipo de imagen

Anchura de imagen

fondo

1980px

PC

1660px

Tableta

1440px

Móvil

600px

Miniatura

150px

El tamaño de la imagen cargada no se aumenta, y solo se crean imágenes más pequeñas que la original. Por ejemplo, si se carga una imagen de 2000 px de ancho, se crearán 5 nuevas copias optimizadas. Si se carga una imagen de 100 px de ancho, 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 Control deslizante normalmente se usa con imágenes de tamaño más grande para lograr un efecto más dramático. Los controles deslizantes generalmente se extienden de un extremo al otro, por lo que es recomendable usar imágenes con un mayor ancho para ajustarse al control deslizante. Para controles deslizantes 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 aspecto de las imágenes deberían ser las mismas en el control deslizante para mantener la coherencia en el diseño.

  • Relaciones de aspecto comunes: 16:9, 3:4
  • Tamaños de resolución comunes (px): 1600x900, 1280x720, 1280x960
Nota

Los dispositivos móviles a menudo tienen la relación de aspecto opuesta en comparación con los dispositivos de escritorio. Es posible que deba usar la función para ocultar en el dispositivo para mostrar los controles deslizantes móviles correctamente.

Galería de fotos

El widget Galería de fotos es el widget más flexible para utilizar con imágenes, solo debido a que hay muchas opciones de diseño. Por ejemplo, puede tener una galería de iconos que tiene el mismo tamaño para todas las imágenes, o de mosaicos, que tiene un tamaño diferente según la imagen.

La relación de aspecto de las imágenes en la Galería de fotos 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 deben tener relaciones de aspecto de mayor altura, como 2:5 o 200 px por 500 px.

Las relaciones de aspecto de las imágenes deberían ser las mismas para mantener la coherencia en el diseño. Deje cierto relleno en la imagen para 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 en su sitio, sino que se muestran en la pestaña 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 del ancho y alto de una imagen. Una relación de aspecto de 16:9 puede ser una imagen de 16x19 px por imagen, o una imagen de 1600 x 900 px. Se trata, en esencia, de cualquier resolución de imagen que tenga una relación de 16:9.

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

Relaciones de aspecto según dispositivo

Aunque las imágenes están optimizadas en su sitio, realmente no cambia el tamaño del diseño de esas imágenes en su sitio. Si utiliza una imagen en un PC que tiene una relación de aspecto de 16:9, lucirá perfecta en el PC debido a que el 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 función para ocultar en dispositivo y 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 la escala de las imágenes de alta resolución se reduce, los usuarios normalmente no notan la diferencia de resolución. Es mejor cargar imágenes cuyo tamaño corresponda al uso esperado. Por ejemplo, si tiene una fotografía de 300 px por 300 px en su sitio, no le conviene cargarla como una imagen de 4000 px por 4000 px.

¿Fue útil este artículo?
Usuarios a los que les pareció útil: 1 de 1

Comentarios sobre este artículo

0 comentarios

Inicie sesión para dejar un comentario.

×

Inicie sesión como profesional

El soporte telefónico prioritario está disponible exclusivamente para profesionales. Inicie sesión en su cuenta Pro ahora para ver nuestros números de soporte internacional.

Entrar
¿No es un profesional? ¡Compre un plan Pro!