Retina Images on HubSpot

The Problem: Blurry Images ????

If you have a high DPI or “retina” display you might notice some of your website’s imagery looking a little blurry. This is most likely due to the fact that your template or custom modules only use the src attribute in the image markup. You can verify your image markup by right clicking and clicking on “Inspect Element”, then look for the <img> tag. If it’s missing a srcset attribute then you’ve successfully found the culprit (nice work! ????).

srcset To The Rescue!

To fix the blurriness and add some crispy goodness, you’ll need to find the template or module’s HTML/HubL via the Design Manager and modify the <img> markup. Finally, add the srcset attribute with 2× and 3× images. Thankfully, HubSpot offers a dynamic image resize HubL function so you don’t have to manually resize every image.

There are multiple ways to write responsive image markup which this great MDN article goes in-depth about, but if all you need is to add Retina support to your images this is what you need:

<img srcset="{{ resize_image_url(image.src, image.width) }} 1x,
             {{ resize_image_url(image.src, image.width * 2) }} 2x, 
             {{ resize_image_url(image.src, image.width * 3) }} 3x">Code language: Twig (twig)

The above HubL will output something similar to the following:

<img srcset="https://cdn2.hubspot.net/photo.jpg?w=400 1x,
             https://cdn2.hubspot.net/photo.jpg?w=800 2x, 
             https://cdn2.hubspot.net/photo.jpg?w=1200 3x">Code language: HTML, XML (xml)

As you can see, we are using the {{ resize_image_url }} HubL function in conjunction with some basic math to dynamically generate the 2× and 3× images. Once you’ve added the srcset attribute, save your module and/or template and bask in your crispy retina image glory. ????