Responsive images for emails - seperate images for mobile and desktop

[CaptainToby]

Hi Y'all,

We have been referred here by Hupsot support. We have been having trouble with our email templates on hubspot displaying our email images responsively and was hoping someone could help!

Currently our email template is designed to show one image for mobile and a different image for desktop. We hide the mobile image for desktop by making it 1x1px and then scale responsively using CSS for mobile.

We were able to do this on our previous platform as the 1x1px image would be scaled to it's original size, whereas on Hubspot we're seeing the 1x1px stretch to the new size, rather than the full image loading (see below).Image not displaying correctly in mobile version - relevent html visible to right lines 138-143

The strange thing is the code responds as expected outside of hubspot - it is only when loaded into hubspot that the problem occurs. And, we think may be linked to when we re-hosted the images for the email on Hubspot rather than our original platform.

Mobile version of image displaying correctly outside of hubspot

desktop version of image displaying correctly outside of hubspot

Does anyone know why this might be occuring and how we could fix it?

And, if not does anyone have a solution for how to display a seperate image for mobile and desktop using hubspot?

Thank you massively in advance!

[jackjadish · Accepted solution]

Hi,

First make sure that I understood your requirements well, If not please correct me. 

My suggestion is you can add media queries for the particular device in the header section. 

As shown in the above image, please choose head section and enter images with media queries which will be support for the responsive devices. 

[jackjadish · Accepted solution]

Hi,

First make sure that I understood your requirements well, If not please correct me. 

My suggestion is you can add media queries for the particular device in the header section. 

As shown in the above image, please choose head section and enter images with media queries which will be support for the responsive devices. 

[CaptainToby]

Hi,

Thank you so much for taking the time to respond 🙂

We currently already use media enquiries to scale the images. And, the code responds as expected outside of Hubspot. It is only when the images are hosted on Hubspot that the code no longer reponds as expected. We are currently using a work around of hosting the images externally. But are interested to know why the issues might be occuring, as well as best practice on Hubspot when using a seperate image for desktop and mobile versions of the email.

[Jsum · Accepted solution]

Media queries aren't recognized by some email clients (including the android gmail app!?!?) I always suggest to avoid using them all together.

Also Hubspot forces some css on mobile that is pretty annoying. If you check your inspector you will see something like:

img {
    width: 100% !important;
    height: 100% !important;
}

This could be causing your issue. 

[jackjadish]

That may be the cerification http | https pags, so there is a chnace for image loading issue.

I'm not sure. But I have seen this kind of issue.