Cada vez que subes una imagen, se crean hasta 5 copias reducidas. Guesty Sitios web inserta automáticamente la imagen del tamaño adecuado en los sitios web para computadoras de escritorio, tabletas y dispositivos móviles, garantizando que los visitantes siempre vean la imagen del tamaño correcto para su dispositivo.
Nota:
- Se pueden cargar hasta 15,000 archivos (esto incluye imágenes, clips de audio, íconos y archivos) por sitio, y cada archivo no debe tener más de 50 MB.
Requisitos del sistema para Webp
Las siguientes versiones son compatibles con imágenes Webp:
- iPhone : v14 y posteriores
- 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 por dispositivo
El tamaño de la imagen subida no aumenta y solo se crean imágenes más pequeñas que la original. Por ejemplo, si se sube una imagen de 2000 px de ancho, se crearán 5 nuevas copias optimizadas. Si se sube una imagen de 100 px de ancho, no se crearán nuevas imágenes.
Tipo de imagen |
Ancho de la imagen |
|---|---|
Fondo |
2880 píxeles |
De oficina |
1920 píxeles |
Tableta |
1280 píxeles |
Móvil |
640 píxeles |
Uña del pulgar Miniatura del blog |
160 píxeles 300 píxeles |
Nota:
Se puede desactivar la optimización para las imágenes de fondo, la Imagen y la Galería de fotos .
Para obtener más información, consulte los siguientes artículos:
Deshabilitar la optimización de imágenes podría afectar la velocidad y/o el rendimiento de la página .
Tamaño máximo de la imagen
El área total de una imagen no puede superar los 3,145,728 píxeles. Es poco probable que alguna de tus imágenes supere este límite, pero puedes comprobarlo rápidamente multiplicando el ancho por la altura.
El tamaño de la imagen no debe exceder los 15 MB.
Subir una imagen más grande que el límite podría generar los siguientes errores:
- Las imágenes no se pueden cargar.
- Las imágenes se cargan, pero las miniaturas en el selector de imágenes no se muestran.
- Las imágenes no se cargan en el editor.
- Las imágenes no se cargan en el sitio en vivo.
Pautas de tamaño de imagen por widget
Control deslizante
El widget Slider se usa normalmente con imágenes de gran tamaño para lograr un efecto impactante. Los sliders suelen extenderse de extremo a extremo, por lo que conviene usar imágenes con mayor ancho para que se ajusten al slider. Para sliders cuadrados, use una relación de aspecto uniforme, como 1:1.
Es mejor elegir imágenes con un buen relleno para que el contenido principal no se corte al redimensionarlas. Las proporciones de la imagen deben ser las mismas en el control deslizante para mantener la consistencia del 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 suelen tener una relación de aspecto opuesta a la de los dispositivos de escritorio. Es posible que tengas que usar la función "Ocultar en el dispositivo" para que los controles deslizantes móviles se muestren correctamente.
Galería de fotos
El widget Galería de fotos es el más flexible para usar con imágenes, gracias a sus numerosas opciones de diseño. Por ejemplo, puedes tener una galería en mosaico con el mismo tamaño para todas las imágenes o un mosaico con un tamaño diferente para cada imagen.
La relación de aspecto de las imágenes en la Galería de fotos debe reflejar cómo deseas que se muestren.
- Por ejemplo, las galerías de estilo cuadrado deben tener una proporción de imágenes de 1:1.
- Las galerías de imágenes con estilos altos deben tener proporciones de altura mayores, como 2:5 o 200 px por 500 px.
Las proporciones de las imágenes deben ser las mismas para mantener la coherencia del diseño. Deja un margen en la imagen para usar el efecto de desplazamiento y evitar que las imágenes se corten.
- Relaciones de aspecto comunes: Cualquier relación de aspecto.
- Tamaños de resolución comunes (px): cualquier resolución, pero no mayor a 1500px para la velocidad de carga de la página .
Iconos
Los íconos son una parte fundamental de cualquier sitio web. Son marcadores visuales de información y pueden darle un aspecto moderno. Puedes usar archivos PNG, JPEG o SVG transparentes.
- Relaciones de aspecto comunes: generalmente 1:1, pero cualquier relación de aspecto funcionará.
- Tamaños de resolución comunes (px): 200x200, 80x80 o cualquier resolución. Los archivos SVG pueden tener cualquier resolución.
Para obtener más información, consulte Iconos del sitio .
Nota:
Los SVG son archivos de imagen que contienen código HTML. Esto significa que al añadir un icono SVG a tu sitio web, también añades líneas de código. Usar varios SVG complejos puede añadir miles de líneas de código y ralentizar la carga de tu sitio web. Si necesitas usar varios iconos SVG en la misma página, te recomendamos convertir algunos a imágenes normales (.png, .jpeg, etc.) para evitar problemas de carga o funcionalidad.
Faviconos
Los faviconos no se usan en tu sitio web, sino que se muestran en la pestaña cuando los usuarios abren tu sitio web. Se recomienda usar el formato ICO. Para convertir archivos de imagen a ICO, consulta el siguiente recurso .
- Relación de aspecto requerida: 1:1
- Tamaños de resolución permitidos (px): 24x24, 36x36, 48x48
Logotipos
Se recomienda que utilices el formato SVG para las imágenes del logotipo, ya que los archivos SVG no están optimizados de la misma manera que otros archivos de imagen, por lo que incluso si el logotipo que cargas es de tamaño pequeño, no perderá calidad.
Relación de aspecto vs. resolución
La relación de aspecto es la proporción entre el ancho y la altura de una imagen. Una relación de aspecto de 16:9 puede ser una imagen de 16x9 px o de 1600x900 px. Se refiere básicamente a cualquier resolución de imagen con una relación de aspecto de 16:9.
Visualizando las dos relaciones de aspecto más comunes:
Relaciones de aspecto por dispositivo
Aunque las imágenes estén optimizadas en tu sitio web, esto no modifica el tamaño de las imágenes. Si usas una imagen en una computadora de escritorio con una relación de aspecto de 16:9, se verá perfecta, ya 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 se verá pequeña.
Para compensar, puedes usar la función "Ocultar en el dispositivo" para crear versiones específicas para esos dispositivos o ajustar las dimensiones de la imagen. Los cambios de tamaño son independientes del dispositivo.
Consideraciones
Lo más grande no siempre es lo mejor
Subir la resolución más alta a tu sitio garantiza que las imágenes tengan alta resolución para tus clientes. Sin embargo, ten en cuenta que las imágenes grandes también afectan drásticamente la velocidad de carga de la página . Dado que las imágenes de alta resolución se reducen, los usuarios normalmente no notan la diferencia de resolución. Es mejor subir imágenes del tamaño adecuado para su uso previsto. Por ejemplo, si tienes una imagen de 300 x 300 px en tu sitio, no querrás subirla como una imagen de 4000 x 4000 px.
