topic Re: „Show as maximum width in mobile devices" in CMS Development

„Show as maximum width in mobile devices"

BVogel5 — Thu, 26 Jun 2025 08:07:46 GMT

Hi everyone.

I used Hubspot's drag & drop module for one of our mail campaigns. I built a module that consists of three adjacent images in the desktop version. In the mobile version, these images are placed one below the other. I used the option “show as maximum width on mobile devices” because I want the images to be shown in full size on mobile devices. I have already inserted the images in a high resolution and large image size, but the images are very pixelated in mobile. How can I get around this?

Re: „Show as maximum width in mobile devices"

Anton — Thu, 26 Jun 2025 10:20:29 GMT

Hey @BVogel5,

it seems that your images might be a bit to small (width & height).
My recommendation would be to increase the dimensions to fit the "full-width" width because down-scaling is always better than up-scaling.

Detail/Example:
Since you're using the HubSpot drag&drop email builder, the email width is set to 600px.

I assume you have some padding in the template/module. Let's say 20px on each side. Therefore the images should have a width of 560px. Height is up to you, but I recommend to use either a 1:1(560x560) or a 2:1(560x280) ratio.

If you have a 3 column layout on desktop with 10px space between each image, the images will be scalled down to 180px. Which is totally fine.

Upscaling an image from 180px to 560px is a 3.1 increasement which results in a "pixelated-effect".

best,

Anton

Re: „Show as maximum width in mobile devices"

BVogel5 — Thu, 26 Jun 2025 11:12:26 GMT

Hi Anton. Thanks for your reply. Indeed, I have already inserted the image in 600px size. I have also tried with a 1200px size. In any case, the image looks pixelated in the mobile view

Re: „Show as maximum width in mobile devices"

GiantFocal — Thu, 26 Jun 2025 17:49:06 GMT

Hi @BVogel5,

The pixelation issue happens because your images are being stretched to fit the mobile screen. Even if you’ve uploaded high-resolution files, if the images themselves aren’t as wide as they appear on mobile, they’ll look blurry or pixelated.

Here's what you can do:

Ensure each image is at least as wide as the maximum width it will display on mobile. For HubSpot emails, the full width is usually around 600px, but with padding, aim for about 560px wide per image.
If you're using a three-column layout on desktop, each image may only display at around 180px wide. However, on mobile, they stack and stretch to the full width. To maintain sharpness, upload images at 560px wide (or wider).
Always use downscaling (large images scaled down) rather than upscaling (small images stretched up).

Replace your images with larger versions that are at least as wide as the maximum display size on mobile. This should fix the pixelation issue.

Re: „Show as maximum width in mobile devices"

Anton — Fri, 27 Jun 2025 05:51:01 GMT

Hey @BVogel5,

thanks for the info.

This makes it more interesting.

Just to go step-by-step:

What device and email client are you testing on?
Is it a real test (Send test email) or something like HubSpot email preview, Litmus, BrowserStack?
What does your module code look like and how are the images getting handled in it?

best,

Anton

Re: „Show as maximum width in mobile devices"

BVogel5 — Fri, 27 Jun 2025 10:17:07 GMT

What device and email client are you testing on?

--> Google Mail & Web on mobile & desktop

Is it a real test (Send test email) or something like HubSpot email preview, Litmus, BrowserStack?

--> Real Test (send test mail)

What does your module code look like and how are the images getting handled in it?

--> I do not see a module code. I use the drag & drop editor