Guesty Sitios Web optimiza automáticamente tus imágenes para garantizar que tu sitio web se cargue rápidamente en cualquier dispositivo. Al subir una imagen, el sistema crea hasta cinco copias más pequeñas y muestra el tamaño más adecuado para usuarios de ordenador, tableta o móvil.
Requisitos de tamaño y archivo de la imagen
Para garantizar que tus imágenes se carguen correctamente y se muestren adecuadamente, sigue estos requisitos:
- Límite de archivos : Se pueden subir hasta 15.000 archivos por sitio, incluyendo imágenes, clips de audio, iconos y documentos.
- Tamaño del archivo : Los archivos individuales no deben superar los 50 MB.
- Resolución de imagen : El área total de una imagen no puede exceder los 3.145.728 píxeles (multiplica el ancho por la altura para comprobarlo).
- Tamaño del archivo de imagen : Si bien el límite general de tamaño de archivo es de 50 MB, para obtener el mejor rendimiento, mantén las imágenes por debajo de los 15 MB.
- Formatos compatibles : png, jpg, jpeg, gif, svg, svg+xml, ico, x-icon y webp.
Asistencia con WebP
Las imágenes WebP son compatibles con Chrome, Android y las versiones más recientes de Safari/Mac. Para iPhone, utiliza la versión 14 o posterior.
Tamaños de imagen optimizados por dispositivo
El sistema solo crea copias más pequeñas que la original. Por ejemplo, si subes una imagen de 2000 píxeles de ancho, se crean cinco copias optimizadas. Si subes una imagen de 100 píxeles, no se crea ninguna versión nueva.
Tipo de imagen | Ancho de la imagen |
|---|---|
| Fondo | 2880 píxeles |
| Escritorio | 1920 píxeles |
| Tableta | 1280 píxeles |
| Móvil | 640 píxeles |
| Miniatura del blog | 300 píxeles |
| Miniatura | 160 píxeles |
Desactivar la optimización
Puedes desactivar la optimización para imágenes de fondo, el widget de imágenes y el widget de galería de fotos. Sin embargo, esto podría ralentizar considerablemente la velocidad y el rendimiento de tu página.
Directrices de imagen por widget
Siga estas recomendaciones para garantizar que sus imágenes tengan un aspecto profesional y se adapten al diseño de su sitio web.
Carrusel
Los carruseles de imágenes suelen extenderse a lo ancho de la pantalla, por lo que las imágenes anchas funcionan mejor.
- Relación de aspecto : 16:9 o 3:4.
- Resoluciones : 1600x900 o 1280x720 píxeles.
- Consejo de diseño : Utilice imágenes con suficiente margen para que el sujeto principal no se recorte cuando cambie el tamaño de la pantalla.
Galería de fotos
La galería es flexible y admite varios diseños, como en mosaico.
- Relación de aspecto : utilice 1:1 para galerías cuadradas o 2:5 para galerías altas.
- Resoluciones : Mantenga las imágenes por debajo de 1500 píxeles para una carga rápida de la página.
- Consejo de diseño : Mantenga las proporciones consistentes en toda la galería para lograr una apariencia limpia.
Iconos
Los iconos sirven como marcadores visuales y se pueden subir como archivos PNG, JPEG o SVG transparentes.
- Relación de aspecto: Generalmente 1:1.
- Resoluciones: 200x200 o 80x80 píxeles.
Complejidad de SVG
Los archivos SVG se componen de código. Usar muchos archivos SVG complejos puede añadir miles de líneas de código a tu página y ralentizar la carga. Si utilizas varios iconos, considera convertir algunos a PNG o JPEG.
Iconos de favoritos
Los favicons aparecen en la pestaña del navegador, no en la página web. Para obtener mejores resultados, utilice el formato ICO.
- Relación de aspecto: 1:1.
- Resoluciones: 24x24, 36x36 o 48x48 píxeles.
Logotipos
Utilice el formato SVG para los logotipos. Dado que los archivos SVG no se reducen de tamaño como otros tipos de imagen, su logotipo se mantendrá nítido incluso en tamaños pequeños.
Mejores prácticas para la optimización de imágenes
Comprender la relación de aspecto frente a la resolución.
La relación de aspecto es la relación entre el ancho y la altura. Una relación de 16:9 describe la forma, ya sea que la imagen tenga 16x9 píxeles o 1600x900 píxeles. [Imagen: Comparación lado a lado de una relación de aspecto cuadrada 1:1 y una relación de aspecto panorámica 16:9.]
Ajustar para dispositivos móviles
Una imagen 16:9 se ve muy bien en un ordenador de sobremesa panorámico, pero puede aparecer muy pequeña en una pantalla móvil vertical. Para solucionar esto:
- Ajusta las dimensiones de la imagen específicamente para dispositivos móviles.
- Utilice la función "ocultar en el dispositivo" para mostrar una versión diferente, recortada verticalmente, a los usuarios de dispositivos móviles.
Equilibrio entre calidad y velocidad
Las imágenes de alta resolución se ven muy bien, pero ralentizan considerablemente tu sitio web. Los usuarios rara vez notan la diferencia entre una imagen de ultra alta resolución y una con el tamaño adecuado. Sube las imágenes al tamaño en el que se van a utilizar. Por ejemplo, si una imagen se muestra a 300x300 píxeles en tu sitio, no subas un archivo de 4000x4000 píxeles.
