---
title: Retina Images on HubSpot
description: Retina Images on HubSpot
image: https://corporate.kelp.agency/hubfs/Imported_Blog_Media/HubSpot-Retina-Images-1136x479.jpg
---
[](https://corporate.kelp.agency/)
Menu
- [Home](https://corporate.kelp.agency)
- About
- [Who We Are](https://corporate.kelp.agency/who-we-are)
- [What We Do](https://corporate.kelp.agency/what-we-do)
- [Landing Page](https://corporate.kelp.agency/landing-page)
- [Blog](https://corporate.kelp.agency/blog)
- [Contact](https://corporate.kelp.agency/contact)
# Corporate Blog
Select a Topic HubSpot How-Tos Company News Design Dives Featured Content Creation WordPress Strategy Struts Web Development
Subscribe
[Share via Facebook](https://www.facebook.com/sharer/sharer.php?u=https%3A%2F%2Fcorporate.kelp.agency%2Fblog%2Fretina-images-on-hubspot) [Share via Twitter](https://twitter.com/intent/tweet?url=https%3A%2F%2Fcorporate.kelp.agency%2Fblog%2Fretina-images-on-hubspot&text=Retina+Images+on+HubSpot) [Share via Email](mailto:?subject=Retina+Images+on+HubSpot&body=https%3A%2F%2Fcorporate.kelp.agency%2Fblog%2Fretina-images-on-hubspot) [Share via LinkedIn](https://www.linkedin.com/shareArticle?mini=true&url=https%3A%2F%2Fcorporate.kelp.agency%2Fblog%2Fretina-images-on-hubspot&title=Retina+Images+on+HubSpot&summary=Retina+Images+on+HubSpot)
[HubSpot How-Tos](https://corporate.kelp.agency/blog/tag/hubspot)
# Retina Images on HubSpot
By [Stefen Phelps](https://corporate.kelp.agency/blog/author/stefen) on Aug 26, 2019 3:11:56 PM
## 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 `![]()
` 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 `![]()
` markup. Finally, add the `srcset` attribute with 2× and 3× images. Thankfully, HubSpot offers a dynamic [image resize HubL function](https://designers.hubspot.com/en/docs/hubl/hubl-supported-functions#resize-image-url) 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](https://developer.mozilla.org/en-US/docs/Learn/HTML/Multimedia_and_embedding/Responsive_images), but if all you need is to add Retina support to your images this is what you need:
```
![]()
```
The above HubL will output something similar to the following:
```
![]()
```
As you can see, we are using the `` 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.
## Related Posts
[HubSpot How-Tos](https://corporate.kelp.agency/blog/tag/hubspot)
## [HubSpot How To: Lazy Load Images in Rich Text Modules](https://corporate.kelp.agency/blog/hubspot-how-to-lazy-load-images-in-rich-text-modules)
Feb 23, 2019 5:46:52 PM
[](https://corporate.kelp.agency/blog/understanding-the-new-go-to-other-action-tool-in-hubspot-workflows) [HubSpot How-Tos](https://corporate.kelp.agency/blog/tag/hubspot)
## [Understanding the new “Go to other action” tool in HubSpot workflows](https://corporate.kelp.agency/blog/understanding-the-new-go-to-other-action-tool-in-hubspot-workflows)
Jul 14, 2020 3:07:00 PM
[](https://corporate.kelp.agency/blog/hubspot-cms-2018-review) [HubSpot How-Tos](https://corporate.kelp.agency/blog/tag/hubspot)
## [The HubSpot CMS—a 2018 Review](https://corporate.kelp.agency/blog/hubspot-cms-2018-review)
Sep 10, 2018 11:47:43 AM
### Ready to take your business to the next level?
Schedule a free consultation today.
Learn More about {{item.heading}}
- [Home](https://corporate.kelp.agency)
- About
- [Who We Are](https://corporate.kelp.agency/who-we-are)
- [What We Do](https://corporate.kelp.agency/what-we-do)
- [Landing Page](https://corporate.kelp.agency/landing-page)
- [Blog](https://corporate.kelp.agency/blog)
- [Contact](https://corporate.kelp.agency/contact)
© 2026 Kelp Creative Agency, All Rights Reserved.
```
As you can see, we are using the `` 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.
## Related Posts
[HubSpot How-Tos](https://corporate.kelp.agency/blog/tag/hubspot)
## [HubSpot How To: Lazy Load Images in Rich Text Modules](https://corporate.kelp.agency/blog/hubspot-how-to-lazy-load-images-in-rich-text-modules)
Feb 23, 2019 5:46:52 PM
[](https://corporate.kelp.agency/blog/understanding-the-new-go-to-other-action-tool-in-hubspot-workflows) [HubSpot How-Tos](https://corporate.kelp.agency/blog/tag/hubspot)
## [Understanding the new “Go to other action” tool in HubSpot workflows](https://corporate.kelp.agency/blog/understanding-the-new-go-to-other-action-tool-in-hubspot-workflows)
Jul 14, 2020 3:07:00 PM
[](https://corporate.kelp.agency/blog/hubspot-cms-2018-review) [HubSpot How-Tos](https://corporate.kelp.agency/blog/tag/hubspot)
## [The HubSpot CMS—a 2018 Review](https://corporate.kelp.agency/blog/hubspot-cms-2018-review)
Sep 10, 2018 11:47:43 AM
### Ready to take your business to the next level?
Schedule a free consultation today.
Learn More about {{item.heading}}
- [Home](https://corporate.kelp.agency)
- About
- [Who We Are](https://corporate.kelp.agency/who-we-are)
- [What We Do](https://corporate.kelp.agency/what-we-do)
- [Landing Page](https://corporate.kelp.agency/landing-page)
- [Blog](https://corporate.kelp.agency/blog)
- [Contact](https://corporate.kelp.agency/contact)
© 2026 Kelp Creative Agency, All Rights Reserved.