Suggested Image Sizes
Suggested sizes for images as they appear on our demo site.
Note: The best-looking size may differ for your site depending on content layout and length.
Pixel sizes for images in columns are based on how they appear on mobile and will likely not show at that full size on desktop.
Caution**:** Using an image of a smaller width size may cause blurriness on retina devices.
Type
Pixel Size
Aspect Ratio
Background Hero
1920 x 480
4:1
Icons
30 x 30
1:1
2 Column Section
700 x 465
3:2
4 Column Section
300 x 300
1:1
Resource Thumbnail
700 x 465
3:2
Team Member Thumbnail
400 x 400
1:1
Blog Post Featured Image
600 x 400
3:2
How to Optimize Images in the HubSpot Page Editor
When working with images in the Spark theme’s drag-and-drop page editor, you’ll want to upload images that match these recommended dimensions before adding them to your modules. This approach ensures optimal loading speeds and visual quality across all devices.
Using the File Manager for Best Results
Upload your optimized images to HubSpot’s File Manager first, then select them when configuring image modules in the page editor. The Spark theme automatically applies responsive scaling, so your 700px wide images in 2-column sections will display beautifully on desktop screens while maintaining crisp quality on mobile devices.
Module-Specific Considerations
For background hero images, the 4:1 aspect ratio ensures your hero content displays consistently across the theme’s various page templates. When using the team member module, square images create uniform grid layouts that work particularly well on About Us and Team pages. The 3:2 aspect ratio for blog featured images and resource thumbnails provides an ideal balance for both listing pages and individual post headers.
Retina Display Optimization
Since HubSpot automatically generates multiple image sizes for responsive display, starting with larger dimensions prevents pixelation on high-resolution screens. For icon images, consider uploading 60x60 pixel versions even though they display at 30x30 – this ensures sharp rendering on retina devices without impacting page load times.
Theme Settings Integration
The Spark theme’s global settings allow you to adjust default image styling across your site. After uploading properly sized images, you can fine-tune border radius, shadows, and hover effects through the theme editor to match your brand aesthetic while maintaining the performance benefits of correctly sized source images.