Post

3 followers Follow
0
Avatar

Retina images & setting max-width

Hi,

Loving the service but have a question about retina images. Is there any way to add max-width to an image?

Here's an example of the issue I'm facing. I have a two-column layout, and in one column I'm placing a retina image. Because that retina image is twice the size of a non-retina image and (at full width) is wider than the column I'm placing it in, 'adjust to width' is automatically selected. However, when the columns stack on mobile devices, as 'adjust to width' is automatically selected, the image now becomes stretched. If there was a way to set max-width then this would be solved I think...

Thanks,

Chris

Chris Reidy

Please sign in to leave a comment.

10 comments

0
Avatar

Hi Guille,
This happens on all of the mobile size devices. It's not a specific device issue, it's a case of images getting stretched after 'adjust to width' is automatically selected. If there was a way of setting a max-width for an image, that would solve it.
Thanks,
Chris

Chris Reidy 0 votes
0
Avatar

On our tests we found an issue only when the email arrives to a Gmail mobile application, the images seems ok on iOS Mail or desktop devices. Please, can you send us a screenshot at support at beefree.io?

Guillermo Padilla 0 votes
0
Avatar

Hello Guille,

 

I have the same problem on beefree plugin (free plan). For example a have a picture width 200px. And the original picture is 400 px width for retina/hd displays on the mobile phone. 
But the picture is displayed in 400px, i cant adjust the size to 50%. is there any work around?

 

Many thanks!

Stefan Hafermehl 0 votes
0
Avatar

Hi Stefan, which email client are you having the issue with? Please provide as much detail as possible.

Massimo Arrigoni 0 votes
0
Avatar

Hey Massimo,

its not a mail client problem, i cannot adjust the size of the image in beefree. i have only the option 100% width in the container or original size. i need the option 50% or a pixel width field.

 

thank you

Stefan Hafermehl 0 votes
0
Avatar

That's by design because BEE's mission is to take care of all that stuff for you. So we just need to figure out exactly the scenario and then account for it in the HTML & CSS code that we create.

Entering image widths is not the answer. Again, BEE automatically adjusts image widths based on the container's size. Here there is simply a problem in how that is accomplished in specific email client / device combinations.

So, the more information you can provide, the better.

Massimo Arrigoni 0 votes
0
Avatar

Okay, good. Here a sample, here is a logo in 50x50 px that I would like to map sharply on a Smarthpone with HD display (apple retina etc.) to get the result I save the image in double size and scale it to 50% on the original resolution.

Beefree makes the logo either in original size or as big as the container, that is my problem, because the logo becomes much too large in both cases.

 

thank you

 

Stefan Hafermehl 0 votes
0
Avatar

Hi Stefan, thanks for the additional details. I better understand the scenario now.

Yes, if you have a small logo, but want to use a higher resolution picture, you can keep that logo small on desktop by using a multi-column layout (e.g. using a 4 column payout and just keeping some of those columns empty). However, on mobile the columns stack up and the logo may become too big.

I'm checking with my colleagues to see if there is any short-term workarounds. Medium-term, we plan to introduce some new features to better handle this scenario.

Massimo Arrigoni 0 votes
1
Avatar

Hi Stefan, a workaround for this is creating the image using the entire column width as canvas, so you get a wider image with logo + background (that could be transparent depending on the file format). You can use twice the value of the column width to get @2x similar results (will show at 100%).

Not a proper solution when trying to keep images optimized, but it may work in some cases till we add more image width options.

Guillermo Padilla 1 vote