Retina images & setting max-width

Comments

10 comments

  • Avatar
    Guillermo Padilla

    Hi Chris, are you using the Gmail app?

    0
    Comment actions Permalink
  • Avatar
    Chris Reidy

    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

    0
    Comment actions Permalink
  • Avatar
    Guillermo Padilla

    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?

    0
    Comment actions Permalink
  • Avatar
    Stefan Hafermehl

    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!

    0
    Comment actions Permalink
  • Avatar
    Massimo Arrigoni

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

    0
    Comment actions Permalink
  • Avatar
    Stefan Hafermehl

    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

    0
    Comment actions Permalink
  • Avatar
    Massimo Arrigoni

    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.

    0
    Comment actions Permalink
  • Avatar
    Stefan Hafermehl

    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

     

    0
    Comment actions Permalink
  • Avatar
    Massimo Arrigoni

    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.

    0
    Comment actions Permalink
  • Avatar
    Guillermo Padilla

    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.

    1
    Comment actions Permalink

Please sign in to leave a comment.