Adding images to a page, blog, email, or social media post makes your content infinitely more engaging. Images can help increase click through rates on social posts and in emails, as well as keep users on your pages and blog posts longer.
While HubSpot's state of the art infrastructure for serving content optimizes page load times for users around the world, uploading too many hi-res image files to your website can slow page load times, and cause your users to leave your pages. Similarly, including several large image files in an email can also make that email more likely to get caught by a spam filter. And while you can adjust the display size of an image using HTML or HubSpot's WYSIWYG editor, this action does not reduce the file size. This causes many marketers rely on tools like Adobe Photoshop and Pixlr.com to resize, crop, add text, filter, and save them for the web, but this requires a time investment to learn another software skill.
HubSpot now makes it easy to edit and resize images for you pages, blog posts, and social posts right from within the content editor, File Manager, or Social Publisher. Some useful applications of the photo editor include:
- Reducing the dimensions and file size of images to decrease page load times and ensure the proper max-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 until 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 would potentially want a larger high-res image, is when using large background images.
- Reducing the dimensions and file size of an image can help prevent emails from getting caught in spam filters (as well as including more text in the email).
- 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.
- Once is the image is the correct natural size, you can tweak the size further with HubSpot's WYSIWYG content editor.
The image editor can be accessed when attaching a image to a social media post, when uploading an image to File Manager, or when adding an image through the content editor. While the editing options are the same no matter how you access the image, this tutorial focuses on adding an image through the content editor. Follow these instructions to edit an image, when adding to a site page, email, landing page, or blog post.
1. Access the content editor
In this example, we will access the content editor by editing a Site Page, but the following steps would be the same for email, landing pages, or blog posts.
2. Click add image
You can add an image to many different types of modules, but in this example, an image is added to a rich text module. Click the add image icon.
3. Upload or choose a new image
You can upload a new image or edit an existing image.
HubSpot also provides you with a folder of stock photos.
4. Click Clone and Edit
Click the gear icon and choose Clone & Edit.
The image must be saved as a JPG or PNG to be editable with HubSpot's photo editor. If you do not see an option to Clone & Edit, please ensure that the image is saved as the correct file type with the correct extension (.jpg or .png).
5. Edit the image
The photo editor has several advanced photo editing functions that can be used individually or in conjunction. The photo editor has the following functions:
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. Select Save to save your cloned image.
Resize allows you to adjust the dimensions of an image. Lowering the image dimensions, also reduces the file size of the image and will improve its load speed.
To resize an image, click Resize, enter the new dimensions (you can toggle whether or no you want to lock the dimensions), and click Apply. Select Save to save your cloned image.
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 flip buttons, and click Apply. Select Save to save your cloned image.
You can use the text function to annotate or add captions to an image. Adding text to an image is a great way to explain image or tie it to the text of the page or post. It is also a useful feature for placing text over images in emails, because many email clients do not support background images.
To add text click Text, enter the text, and click Apply. In addition to adding multiple text boxes, you can change the font and text color. Select Save to save your cloned image.
You can use effects to add more character to an image.
To add effects, click Effects, choose the appropriate effect, and click apply. Select Save to save your cloned image.
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 apply. Select Save to save your cloned image.
To draw on an image, click Draw, select a color/brush, drag the mouse on the image, and click Apply to add your drawing to the photo. Select Save to save your cloned image.
To draw on a frame, click Frames, select a frame, and click Apply to add your drawing to the photo. Select Save to save your cloned image.
Stickers include arrows, though/speech bubbles, and other fun cartoon objects that you can add to your images. To Add , click Draw, select a color/brush, drag the mouse on the image, and click Apply to add your drawing to the photo. Select Save to save your cloned image.
You can adjust the brightness of an image by clicking Brightness, dragging the slider, and clicking Apply. Select Save to save your cloned image.
You can adjust the contrast of an image by clicking Contrast, dragging the slider, and clicking Apply. Select Save to save your cloned image.
You can adjust the saturation of an image by clicking Saturation, dragging the slider, and clicking Apply. Select Save to save your cloned image.
You can adjust the warmth of an image by clicking Saturation, dragging the slider, and clicking Apply. Select Save to save your cloned image.
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.
You can reduce redeye of an image by clicking Redeye, selecting a brush size, clicking on the eyes in the image, and pressing Apply. Select Save to save your cloned image.
6. Add the image to your content.
After clicking Save, choose your cloned image and select Use Image to insert it into your content.
7. Add alt text and adjust the image's display size in the editor
Once the image has been added to your content editor, you can edit the HTML dimensions and spacing, by clicking on the image.
To add alt text, click Edit image... and enter your description into the Alt Text (description) field.
Next Article: How to use the URL mapping tool to redirect pages