Suggested Image Sizes
Suggested sizes for images as they appear on our demo site.
Note: Depending on the content layout and length, the best-looking size may be different for your site.
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
Image Grid
700 x 465
3:2
Thumbnail Slider
750 x 450
5:3
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 for Spark Premium
When uploading images to your HubSpot pages using Spark Premium’s modules and sections, the file manager automatically generates multiple sizes for responsive display. However, starting with properly sized images ensures the best visual quality across all devices.
Working with the HubSpot File Manager
Upload your images at the recommended pixel dimensions or larger to the HubSpot file manager. When you drag image modules onto your pages or add images to existing sections, HubSpot will automatically crop and resize them based on the module’s requirements. You can adjust the crop focus point by clicking on any image in the page editor and selecting “Edit” to access cropping controls.
Theme-Specific Considerations
Spark Premium’s 2 Column Sections and Image Grid modules use the same 700 x 465 sizing because they’re designed to maintain visual consistency when used together on the same page. This is particularly effective on service pages or about us templates where you want a cohesive gallery feel.
The Background Hero module’s 4:1 aspect ratio works especially well with Spark Premium’s full-width header layouts. If you’re using the theme’s overlay text options, ensure your hero images have sufficient contrast in the areas where text will appear.
Best Practices for Content Editors
When building pages with multiple Resource Thumbnails or Team Member images, upload all images at the same time and use the file manager’s batch editing features to maintain consistent sizing. For blog featured images, remember that these appear in blog listing pages, social media previews, and the individual post headers, so choose images that work well at smaller sizes too.
Always preview your pages on mobile after adding images, as Spark Premium’s responsive design may crop images differently than expected on smaller screens.