Guesty Websites automatically optimizes your images to ensure your site loads quickly on every device. When you upload an image, the system creates up to five smaller copies and displays the most appropriate size for desktop, tablet, or mobile visitors.
Image size and file requirements
To ensure your images upload successfully and display correctly, follow these requirements:
- File limit: Upload up to 15,000 files per site, including images, audio clips, icons, and documents.
- File size: Individual files must not exceed 50MB.
- Image resolution: The total area of an image cannot exceed 3,145,728 pixels (multiply the width by the height to check).
- Image file size: While the general file limit is 50MB, keep images under 15MB for the best performance.
- Supported formats: png, jpg, jpeg, gif, svg, svg+xml, ico, x-icon, and webp.
Webp support
Webp images are supported on Chrome, Android, and the latest versions of Safari/Mac. For iPhone, use v14 or later.
Optimized image sizes per device
The system only creates copies that are smaller than the original. For example, if you upload a 2000px wide image, five optimized copies are created. If you upload a 100px image, no new versions are created.
Image type | Image width |
|---|---|
| Background | 2880px |
| Desktop | 1920px |
| Tablet | 1280px |
| Mobile | 640px |
| Blog thumbnail | 300px |
| Thumbnail | 160px |
Disabling optimization
You can disable optimization for background images, the Image widget, and the Photo Gallery widget. However, this may significantly slow down your page speed and performance.
Image guidelines per widget
Use the following recommendations to ensure your images look professional and fit your site’s design.
Slider
Sliders often stretch across the screen, so wide images work best.
- Aspect ratios: 16:9 or 3:4.
- Resolutions: 1600x900 or 1280x720 px.
- Design tip: Use images with plenty of padding so the main subject isn't cut off when the screen size changes.
Photo gallery
The gallery is flexible and supports various layouts like tiled or mosaic.
- Aspect ratios: Use 1:1 for square galleries or 2:5 for tall galleries.
- Resolutions: Keep images under 1500px to maintain fast page speeds.
- Design tip: Keep ratios consistent across the gallery for a clean look.
Icons
Icons serve as visual markers and can be uploaded as transparent PNGs, JPEGs, or SVGs.
- Aspect ratio: Generally 1:1.
- Resolutions: 200x200 or 80x80 px.
SVG complexity
SVGs are made of code. Using many complex SVGs can add thousands of lines of code to your page and cause slow loading. If using multiple icons, consider converting some to PNG or JPEG.
Favicons
Favicons appear on the browser tab rather than the page itself. Use the ICO format for the best results.
- Aspect ratio: 1:1.
- Resolutions: 24x24, 36x36, or 48x48 px.
Logos
Use the SVG format for logos. Because SVGs are not scaled down like other image types, your logo will remain crisp even at small sizes.
Best practices for image optimization
Understand aspect ratio vs. resolution
Aspect ratio is the relationship between width and height. A 16:9 ratio describes the shape, whether the image is 16x9 px or 1600x900 px. [Image: A side-by-side comparison of a 1:1 square aspect ratio and a 16:9 widescreen aspect ratio.]
Adjust for mobile devices
A 16:9 image looks great on a wide desktop but can appear very small on a vertical mobile screen. To fix this:
- Resize the image dimensions specifically for mobile.
- Use the hide on device feature to show a different, vertically-cropped version for mobile users.
Balance quality and speed
High-resolution images look great, but they drastically slow down your site. Users rarely notice the difference between a ultra-high-res image and a correctly scaled one. Upload images at the size they are intended to be used. For example, if an image displays at 300x300 px on your site, do not upload a 4000x4000 px file.
