How to edit and optimize images within HubSpot

Last updated: March 21, 2018

Applies to:

Website
Website add-on
Marketing Hub
marketing-basic-pro-enterprise
Basic, Professional, Enterprise

Adding images to a blog post, email, page, or social media post makes your content more engaging. Images can help increase click-through rates on your emails and social posts and keep users on your blog posts and pages longer.  

In HubSpot, you can customize your images right from within the content editor, file manager, or social messages composer. Some useful applications of the photo editor include:

  • Reducing the dimensions and file sizes of images to decrease page load times and ensure the proper maximum width of images.
  • Cropping images to better fit in with your content.
  • Adding text, stickers, and drawings to images to help explain or highlight areas of an image.
  • Adjusting brightness and contrast of a photo to ensure image clarity.

Optimizing your images for web

Optimizing your images for web has both technical and SEO benefits. Here are some tips for optimizing your images on HubSpot pages:

  • Images on HubSpot's responsive pages or emails will scale up to their natural size; therefore, you generally will not need an image to be wider than the main content on your page (generally 980px-1280px) or email (generally 600px). One exception where you may want a larger high-resolution image is for large background images.
  • Reducing the dimensions and file size of an image can help prevent emails from getting caught in spam filters.
  • Adding alt text or descriptions to your images can help search engines and screen readers interpret your images and understand their content. Use relevant targeted keywords identified with the keywords tool to improve your content's SEO.

Instructions

The image editor can be accessed when attaching a image to a social media post, when uploading an image to your File Manager, or when adding an image to the content editor. While the editing options are the same no matter how you access the image, this tutorial focuses on adding an image to the content editor. 

Navigate to your HubSpot content

In your HubSpot Marketing BasicProfessional, or Enterprise account, navigate to Content BlogEmailLanding Pages, or Website Pages.

In the dashboard, click the blog postemaillanding page, or website page you'd like to insert the CTA on.

Add an image to a rich text module

Locate a rich text module in the content editor. Place your cursor at the location you'd like to place the CTA, then click Insert > Insert/edit image or click the insert image icon insertImage from the rich text toolbar.

User-added image

Select or upload an image

In the pane that slides in on the right, select an image from your Recent images, search for an image in the search bar at the top, or click Browse folders to look through files in your file manager. You can also click Add image at the bottom of the pane to upload a file or add a file URL.

Open the image in the photo editor

Hover over the image and click the icon info, then scroll down and click Edit. This will open the image in the photo editor.

Please note: the image must be saved in a JPG or PNG format to be editable in HubSpot's photo editor. If you don't see an option to Edit, ensure that the image is saved as the correct file type with the correct extension (.jpg or .png).

Edit the image

The photo editor has several advanced photo editing functions that can be used individually or in conjunction with one another. The photo editor has the following functions:

Crop

The crop feature removes the outer parts of a selection and changes the images aspect ratio. Crop is useful for changing the shape of or removing extra space from an image. To crop an image, click Crop. Drag the corners of the selection or choose a preset. Click Apply to crop the image and Save to save your cloned image.

HubSpot Help article screenshot

Resize

While HubSpot optimizes page load times, uploading too many hi-res image files can cause slower page load times or cause your emails to be caught by spam filters. The image resize tool in HubSpot allows you to adjust the dimensions of an image, which also reduces the file size and improves its load speed. 

To resize an image, click Resize and enter the new dimensions (you can choose whether or not you want to maintain the ratio of the dimensions by clicking the lock icon). Click Apply, then Save to save your cloned image.

HubSpot Help article screenshot

Orientation

The orientation function allows you to rotate or flip an image. This can be useful if the image you upload is not automatically oriented correctly. To change the orientation of an image, click Orientation, click the Rotate or Mirror buttons, then click Apply. Click Save to save your cloned image.

HubSpot Help article screenshot

Text

You can use the text feature to annotate or add captions to an image. This is a great way to explain the image or tie it to the content of your page or post. You can also use this feature to place text over images in emails as many email clients do not support background images.

To add a text box to your image, click Text, then click into the text box to enter your text. Use the dropdown menus at the top of the dialog box to change the color or font of your text or click Add Text to place additional text boxes on your image. You can move your text by dragging and dropping the text box. To resize your text, click the white circle at the bottom right corner of the box. Once you've customized your image(s), click Apply. Select Save to save your cloned image.

HubSpot Help article screenshot

Effects

You can use effects to add more character to an image. To add effects, click Effects, choose the desired effect, and click apply. Click Save to save your cloned image.

HubSpot Help article screenshot

Enhance

Enhance provides you with three presets to improve the quality of your photos. Enhance has the following modes:

  • Hi-Def sharpens your image.
  • Illuminate accounts for lighting issues.
  • Color Fix makes automatic color adjustments.

To enhance an image, click Enhance, choose a mode, and click applyClick Save to save your cloned image.

HubSpot Help article screenshot

Draw

To draw on an image, click Drawselect a color/brush, click and drag your cursore on the image to add annotation, and click Apply. Click Save to save your cloned image.

HubSpot Help article screenshot

Frames

To draw on a frame, click Framesselect a frame, and click Apply to add your drawing to the photo. Click Save to save your cloned image.

HubSpot Help article screenshot

Stickers

Stickers include arrows, thought/speech bubbles, and other fun cartoon objects that you can add to your images. To add stickers, click Stickers and click on a sticker to add it to the image editor. You can then drag the sticker into position on your image. Click Apply then Save to save your cloned image.

HubSpot Help article screenshot

Brightness

You can adjust the brightness of an image by clicking Brightness, dragging the slider, and clicking Apply. Select Save to save your cloned image.

HubSpot Help article screenshot

Contrast

You can adjust the contrast of an image by clicking Contrast, dragging the slider, and clicking Apply. Select Save to save your cloned image.

HubSpot Help article screenshot

Saturation

You can adjust the saturation of an image by clicking Saturation, dragging the slider, and clicking Apply. Select Save to save your cloned image.

HubSpot Help article screenshot

Warmth

You can adjust the warmth of an image by clicking Warmth, dragging the slider, and clicking Apply. Click Save to save your cloned image.
HubSpot Help article screenshot

Focus

The focus feature allows you to blur the edges of a photo. You can adjust the focus of an image by clicking Focus, selecting a shape, dragging that shape on the image, and clicking Apply. Select Save to save your cloned image.

HubSpot Help article screenshot

Redeye

You can reduce redeye of an image by clicking Redeye, selecting a brush size, clicking on the eyes in the image, and pressing Apply. Click Save to save your cloned image.

HubSpot Help article screenshot

Add the image to your content

After clicking Save, click the image to insert it into the content editor.

Was this article helpful?

If you still need help you can get answers from the , or to contact support.

Previous article:

Measuring Your Performance Project

Next article: