How to Use Images Effectively in Hubspot Content

Learning how image tools work in Hubspot helps you build faster, more engaging pages, blog posts, and emails without breaking layouts or slowing down load times.

This guide walks you through every major image task you can perform inside the content editors, based strictly on HubSpot documentation. You will learn how to add, crop, replace, and configure images so they display correctly across your entire site.

Where You Can Use Images in Hubspot

You can work with images across several areas of the platform. The exact tools you see depend on whether you are using the drag-and-drop editors or the classic editors.

• Website and landing pages
• Blog posts and listing pages
• Drag-and-drop marketing emails
• Global content such as headers and footers

The image experience is similar in each place, but the layout of the editor may change slightly depending on your Hubspot theme or template.

Accessing the Hubspot Image Editor

The built-in image editor lets you quickly adjust files without leaving your content. You can open it whenever you insert an image from the file manager.

Steps to open the image editor in Hubspot

1. In your Hubspot account, open a page, blog post, or email in the content editor.
2. Click an existing image module, or add a new image module to your layout.
3. Select Browse images to open the file manager.
4. Hover over the image you want to edit and click Actions > Edit (or the edit icon).

The image editor appears in a new panel, where you can apply changes such as cropping and resizing. Edits you save here apply to the file itself in the file manager.

Inserting Images into Hubspot Content

You can insert new images from your computer or reuse existing files already stored in the file manager.

Add a new image to a page or blog in Hubspot

1. Open your page or blog post in the drag-and-drop content editor.
2. In the left sidebar, drag an Image module into your layout.
3. In the right panel, click Replace or Select image.
4. To upload a new file, choose Upload files, then select an image from your computer.
5. To reuse a file, browse or search the file manager, then click the image you want.
6. Click Insert to add it to the content area.

Once inserted, you can adjust alignment, size, and spacing directly from the image module settings.

Insert images with the rich text toolbar in Hubspot

If your module is a rich text area, you can insert images inline with text using the formatting toolbar.

1. Click inside the rich text module where you want the image.
2. In the toolbar, click the Insert dropdown or image icon.
3. Choose Image, then upload or select a file from the file manager.
4. After insertion, click the image to adjust alignment and size options.

Editing Images Inside Hubspot

Beyond inserting images, you can refine them within the platform so they display correctly and remain lightweight.

Basic image editing options in Hubspot

Inside the image editor you can typically:

• Crop to remove unwanted edges.
• Resize to control display dimensions.
• Rotate or flip to correct orientation.
• Adjust focus so the important subject stays visible on different screen sizes.

After making changes, save your edits. Hubspot updates the file in the file manager and any modules that use this exact file will reflect the new version.

Replacing an existing image in Hubspot modules

To keep designs consistent while updating visuals, you can swap out images in any module.

1. Open the relevant page, post, or email in the content editor.
2. Click the image you want to replace.
3. In the right settings panel, click Replace.
4. Select a different file from the file manager or upload a new one.
5. Click Insert to confirm.

Because layouts are controlled by modules, replacing a file normally preserves padding, alignment, and other styling that already exists in Hubspot.

Configuring Image Options in Hubspot

Each image module and rich text image has customizable settings that affect design, accessibility, and performance.

Core image settings available in Hubspot

• Alt text: describe the image for screen readers and search engines.
• Size: choose original size, set a fixed width, or make the image responsive.
• Alignment: align left, center, or right in the module.
• Link: turn the image into a clickable link to a page, file, email address, or external URL.
• Spacing: adjust margins or padding around the image so it fits the layout.

Using clear alt text and reasonable sizes in Hubspot improves accessibility and helps pages load faster while remaining SEO friendly.

Using Background Images in Hubspot Sections

Row and section backgrounds allow you to place text and buttons over images while keeping content flexible and responsive.

Set a section background image in Hubspot

1. Open a drag-and-drop page in the editor.
2. Hover over a section and click Edit section or similar controls.
3. In the styling or background tab, choose Image as the background type.
4. Select or upload an image from the file manager.
5. Adjust settings such as position, repeat, and size (for example, Cover to fill the width).

This technique keeps your content modules on top while the background remains controlled by the layout, a common pattern in Hubspot themes.

Managing Image Files in the Hubspot File Manager

The file manager is the central place where all uploaded assets are stored, including images referenced in content.

Organize and maintain images for cleaner Hubspot projects

• Create folders by campaign, site area, or asset type.
• Rename files with descriptive, SEO-friendly names before or after upload.
• Delete unused images to keep storage tidy.
• Use search and filters to quickly locate frequently used assets.

Good organization inside Hubspot makes it easier to maintain consistent branding across pages, emails, and blog posts.

Image Best Practices for Hubspot Performance

To keep your site and emails loading quickly, follow these practical tips when working with images.

• Compress images before uploading to reduce file size.
• Choose modern formats when possible, such as optimized JPEG or PNG for transparency.
• Avoid using very large dimensions when the image displays small in Hubspot templates.
• Always add descriptive alt text to support accessibility tools.
• Test pages on mobile to ensure images scale correctly in responsive layouts.

More Resources on Hubspot Image Features

For full technical details on image tools, review the official documentation on the HubSpot Knowledge Base: Use images in HubSpot content.

If you need strategic help implementing images and templates alongside CRM and automation, you can also explore consulting services from Consultevo, which works with digital marketing stacks built around platforms like Hubspot.

By combining solid image practices with the built-in tools described above, you can keep your Hubspot content visually engaging, fast to load, and easy to maintain across your entire website and marketing campaigns.

Need Help With Hubspot?

If you want expert help building, automating, or scaling your Hubspot , work with ConsultEvo, a team who has a decade of Hubspot experience.

Scale Hubspot

“`