How to Add Retina Images to HubSpot Email and Page Templates

  • Updated on
  • read
  • Add to Flipboard Magazine.

HubSpot CMS handles responsive images by default by creating different image sizes for different screen widths (using srcset). But with retina display images, you want to load higher resolution images and scale them down to 100%. Thankfully you can add ?noresize to the end of your image source to disable this dynamic resizing.

In the example below I added a linked image tag to an email template. I want a content author to update the values but have more control over the output of the code. So I added two important attributes to the tag.

  • export_to_template_context=True This tells it to store the data and make it accessible but not to actually render the code for it on the page
  • no_wrapper=True This tells it not to add any div wrapper around content if displayed on the page.

Next I give it a unique name of “hero_image” I then can use that name to reference the values anywhere I want in my template using this snippet formula {{ widget_data.your-unique-name.value }}

Below is an example of how I used this to create an email hero image that is optimized for retina displays. The author adds an image 1200px wide but it is scaled down to 600px wide in the template. Keep in mind, you probably don’t want to use retina images everywhere to prevent slow page loading. Use it in areas that will have a lot of

What the HubL code will output on the page


Written by: Jacob Lett - Jacob started BootstrapCreative to help others learn web design and development. He has built websites for 10+ years for companies and as a freelancer. He enjoys learning and encouraging others to improve their skills.
Category: Code Snippets

Want to Get Email Updates?

Receive a monthly digest of new tutorials and resources.

Bootstrap 4 books - learn responsive web design for beginners

Want a Bootstrap Reference Book?

Learn More

Advertise Here