Optimizing your images for web
Optimizing your images for
- 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 of when you would potentially want a larger high-res 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 (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.
The image editor can be accessed when attaching
Access the content editor
In this example, we will access the content editor by editing a website page (from Content > Website Pages), but the following steps would be the same for email, landing pages, or blog posts.
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 insert/edit image icon.
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.
Click Clone and Edit
Click the gear icon and choose Clone & Edit.
The crop feature removes the outer parts of a selection and changes the images aspect ratio.
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.
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.
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.
You can use effects to add more character to an image. To add effects, click Effects, choose the desired
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. Click Save to save your cloned image.
To draw on an image, click Draw, select a color/brush, click and drag your
To draw on a frame, click Frames, select a frame, and click Apply to add your drawing to the photo. Click Save to save your cloned image.
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.
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.
WarmthYou can adjust the warmth of an image by clicking Warmth, dragging the slider, and clicking Apply. Click 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. Click Save to save your cloned image.
Add the image to your content
After clicking Save, choose your cloned image and select Use Image to insert it into your content.