What dimensions should I use for a full-screen hero image on my Webflow website?
TL;DR
- Use 1920 × 1080 px for hero images, consider up to 2560 × 1440 px for Retina displays.
- Compress images (under 500 KB or use WebP), set hero section to 100vh, and enable responsive image settings in Webflow.
For a full-screen hero image on your Webflow site, you should use dimensions that ensure high quality across devices while optimizing for performance.
1. Recommended Dimensions
- Default size: 1920 × 1080 pixels (Full HD)
- This resolution provides good clarity on most desktop screens.
- For key visuals or backgrounds meant to stretch edge-to-edge, this is a safe standard.
2. Support for High-Resolution Displays
- For Retina or 4K displays, consider using images up to 2560 × 1440 pixels.
- However, balance file size vs. visual quality to avoid slow load times.
3. Responsive Considerations
- Webflow allows you to use responsive image settings, so upload large, high-quality versions, and Webflow will automatically generate lower-resolution versions for smaller screens.
- Make sure your hero section is set to 100vh for full-screen height regardless of the image size.
4. File Size Optimization
- Aim to keep image files under 500 KB when possible, or use WebP format for better compression and faster load times.
- Use tools like TinyPNG or Squoosh to compress images before uploading.
5. Aspect Ratio Guidance
- Use a 16:9 aspect ratio for wide visuals.
- Ensure the image is centered and has a focal point that remains effective even when the sides are cropped on smaller devices.
Summary
Use 1920 × 1080 px as a standard full-screen hero image size in Webflow, optimize for Retina with higher-res if needed (like 2560 px wide), and always compress images for fast loading. Let Webflow's responsive tools handle scaling across screen sizes.