How to Add Retina Images to HubSpot Email and Page Templates

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 HubL code 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

{% linked_image "hero_image" label='Hero Image', link="https://bootstrapcreative.com/", open_in_new_tab=True, alt='hero image alt', src='//dummyimage.com/1200x500/000/ffffff', width='600', export_to_template_context=True, no_wrapper=True %}
<!--  
{{ widget_data.hero_image }}<br>
{{ widget_data.hero_image.link }}<br>
{{ widget_data.hero_image.src }}<br>
{{ widget_data.hero_image.alt }}<br>
{# email templates automatically add target="_blank" regardless of setting #}
{{ widget_data.hero_image.open_in_new_tab }}<br>
{{ widget_data.hero_image.width }}
-->
    
{% if widget_data.hero_image.link %}<a href="{{ widget_data.hero_image.link }}" {% if widget_data.hero_image.open_in_new_tab %}target="_blank"{% endif %}>{% endif %}
<img src="{{ widget_data.hero_image.src }}?noresize" width="{{widget_data.hero_image.width}}" alt="{{widget_data.hero_image.alt}}" />
{% if widget_data.hero_image.link %}</a>{% endif %}

What the HubL code will output on the page

<!--  
{src=//dummyimage.com/1200x500/000/ffffff, open_in_new_tab=true, no_wrapper=true, link=https://bootstrapcreative.com/, alt=hero image alt, width=600, parent_widget_container=null, label=Hero Image, export_to_template_context=true, content_editable_values=[alt, src, link, open_in_new_tab, width, height]}<br>
https://bootstrapcreative.com/<br>
//dummyimage.com/1200x500/000/ffffff<br>
hero image alt<br>

true<br>
600
-->
    
<a href="https://bootstrapcreative.com/" target="_blank" data-hs-link-id="0">
<img src="//dummyimage.com/1200x500/000/ffffff?noresize" width="600" alt="hero image alt">
</a>