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.
- Se pueden cargar hasta 15 000 archivos (esto incluye imágenes, videos, clips de audio y archivos) por sitio, y cada archivo no debe superar los 200 MB.
Requisitos del sistema para Webp
las siguientes versiones son compatibles para imágenes Webp:
- iPhone: v14 y posterior
- Mac/Safari: última versión
- Chrome: todas las versiones
- Android: todas las versiones
Se admiten los siguientes tipos de archivos de imagen:
png, jpg, jpeg, gif, svg, svg+xml, ico, x-icon, webp
Tamaños de imagen optimizados según dispositivo
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.
Tipo de imagen |
Anchura de imagen |
|---|---|
fondo |
2880px |
PC |
1920px |
Tableta |
1280px |
Móvil |
640px |
|
Miniatura Miniatura del blog |
160px 300 px |
La optimización puede desactivarse para las imágenes de fondo, el de imagen y el de galería de fotos .
Para obtener más información, consulte los siguientes artículos:
Desactivar la optimización de imágenes podría afectar la velocidad o el rendimiento de la página.
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.
El tamaño de la imagen no debe superar los 200 MB.
Cargar una imagen superior al límite podría provocar uno de los siguientes errores:
- Las imágenes no se cargan.
- Las imágenes se cargan, pero las vistas en miniatura del selector de imágenes no aparecen.
- Las imágenes no se cargan en el editor.
- Las imágenes no se cargan en el sitio en vivo.
Pautas de tamaños de imagen según el widget
Widget deslizante
El 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
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.
Widget Galería de fotos y Galería de productos de la store
El Galería de fotos y los widgets Galería de productos son los más flexibles para usar con imágenes, porque 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 las Galerías de fotos y productos 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.
Para obtener más información, consulte Iconos del sitio.
Los SVG son archivos de imágenes que contienen código HTML, lo que significa que cuando usted agrega un icono de SVG a su sitio, también está agregando líneas de código. Los múltiples SVG complejos pueden agregar miles de líneas de código y hacer que su sitio se cargue lentamente. Si necesita usar varios iconos de SVG en la misma página, recomendamos convertir algunos de ellos en imágenes comunes (.png, .jpeg, etc.) para evitar problemas de carga o de funcionalidad.
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. Se recomienda que use el formato ICO. Para convertir archivos de imágenes a ICO, consulte el siguiente recurso.
- Relación de aspecto requerida: 1:1
- Tamaños de resolución permitidos (px): 24x24, 36x36, 48x48
Logotipos
Se recomienda que use el formato SVG para las imágenes de logotipos, ya que los archivos SVG no están optimizados de la misma manera que otros archivos de imágenes, por lo que, aunque el logotipo que cargue sea pequeño, no perderá calidad.
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 1600x900 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.