Responsive image problem

Hi everyone,

I have a template we are creating for a client and we are making this template responsive for mobile. We have a 3-column area in the repeater that will have 3 images that will span the entire width of the email in desktop emails and than wrap underneath each other when viewed on mobile. See code below:

<layout label="3 Image Block">
            <table width="550" border="0" cellspacing="0" cellpadding="0" class="tableshrink">
  <tr>
    <td><table width="188" border="0" align="left" cellpadding="0" cellspacing="0" class="tableshrink">
            <tr>
              <td width="170"><p style="mso-table-lspace:0pt; mso-table-rspace:0pt;"><img src="images/box-1.jpg" alt="" width="170" border="0" class="imageshrink" style="display: block;" editable label="Image 1"></p></td>
              <td width="18" class="hide">&nbsp;</td>
            </tr>
            <tr>
              <td colspan="2"><img src="images/spacer.gif" alt="" width="10" height="12" style="display: block;"></td>
            </tr>
          </table>
          <table width="188" border="0" align="left" cellpadding="0" cellspacing="0" class="tableshrink">
              <tr>
                <td width="170"><p style="mso-table-lspace:0pt; mso-table-rspace:0pt;"><img src="images/box-2.jpg" alt="" width="170" border="0" class="imageshrink" style="display: block;" editable label="Image 2"></p></td>
                <td width="18" class="hide">&nbsp;</td>
              </tr>
              <tr>
                <td><img src="images/spacer.gif" alt="" width="10" height="12" style="display: block;"></td>
              </tr>
            </table>
            <table width="170" border="0" cellspacing="0" cellpadding="0" class="tableshrink">
              <tr>
                <td width="170"><p style="mso-table-lspace:0pt; mso-table-rspace:0pt;"><img src="images/box-3.jpg" alt="" width="170" border="0" class="imageshrink" style="display: block;" editable label="Image 3"></p></td>
              </tr>
              <tr>
                <td><img src="images/spacer.gif" alt="" width="10" height="12" style="display: block;"></td>
              </tr>
            </table></td>
  </tr>
</table>
            </layout>

This has been working great for us but we had never used it as an editable template for the client, I would always just work on the html and paste the code in before sending. Now that this is a template I am coming across an issue with the images in each column.

Each image is 170 px wide which is small enough so all images will fit side by side on desktops but when viewed on a mobile device I want to re-size the image to 320 to span the entire width of the phone. Obviously enlarging an image will lose quality so I created the image at 320 px wide and set the width to 170 px in the template code. When doing any testing this works great as the original images in the template look great on desktops and on mobile phones. But now that this is a template what happens if the user wants to swap out any of those images? They can't import an image at 320 px as your program resamples the images down to the width specified in the template. The images would look fine on desktops but on mobile the quality is lost as the image is re-sized again to the larger size of 320 px. I tried setting the width to 100% on the actual image but your program didn't like the percentage and set the width to 100 px. I tried setting the width to 100% in the CSS but Outlook showed the images at full size.

Is there anything else that can be done to help with this issue? I can provide more information as well. It was hard trying to explain this situation.

Thanks for any help!

Chris

roshodgekiss roshodgekiss, 1 year ago

Hi Mindsplit, thank you so much for the detailed explanation here. We've had other customers bring up similar situations, namely when optimizing their campaigns for Retina displays. The skinny is that at present, it isn't possible to add an editable image to a template that exceeds the editable region's width, without having the editor resize it to fit. This is certainly a bit of a bummer, as it means that you really have to handcode in any Retina-optimized images into a campaign/template.

We're certainly keen to explore options like adding an image via URL, but admittedly, most of the layouts we come across have media queries that reduce the dimensions of images for mobile devices, not the other way around. Nonetheless, we'll keep you posted if it's something we work on here. Sorry for the trouble!


Get in touch with us on Twitter: http://twitter.com/campaignmonitor
We're also on Facebook: http://facebook.com/campaignmonitor
Mindsplit, 1 year ago

No trouble at all!

Thanks for the reply!

Chris

cnolson100, 1 year ago

Glad to find out the answer to the weird artifacting problem that happens when images are resized in the template. I hope that soon we can have the ability to use editable retina images in our templates.

roshodgekiss roshodgekiss, 1 year ago

Hi Mindsplit, you're very welcome, thank you for your understanding!

cnolson100, we'll certainly keep you posted on this one. Thanks for letting us know :)


Get in touch with us on Twitter: http://twitter.com/campaignmonitor
We're also on Facebook: http://facebook.com/campaignmonitor
cnolson100, 1 year ago

I wish I didn't have to choose between the convenience, reliability, and consistency of a template (with non-retina images) and the benefits of using crisp retina graphics (with the less-consistent hard coded e-mail). I'm sure our e-mail client usage doesn't differ too much from others: 1. iPhone (34%) 2. Apple Mail (10%) 3. iPad (9%) all potentially retina devices. The template editor is becoming less of usable feature as more retina devices become mainstream. I'd hope this feature request is one of the top to be implemented.

This is what I resorted to on my last newsletter. However after doing it once, I don't think that it's worth it. There must be a better way.

1- Using my template with 1x graphics. This makes it easy to proof, and get newsletters approved.
2- When I'm ready to send, I click Edit > Import my own design > click the HTML tab, and copy and paste the HTML into my HTML editor.
3- Replace the 1x graphics with 2x retina graphics, and then upload this to a new campaign.
4- Even though I've thoroughly tested my custom template, I now need to go through a series of tests with my hard-coded draft because I've introduced more steps. This is where it's a drag as you are needing to test something that has already been tested in the template.

The fact that I'm not seeing more buzz about having this feature leads me to believe that I'm missing something when it comes to using templates with editable retina images. Am I? Thanks.

roshodgekiss roshodgekiss, 1 year ago

Hi cnolson100, thank you so much for sharing your workflow here. We generally do things a bit differently, ie. we use this background image technique to swap out Retina-optimized images using a media query. The advantage to this is that we can import all our images in one batch, code in one hit and just comment out the CSS code if problems arise.

The reason I presume why there haven't been more requests is that this is considered a fairly "advanced" technique, so we're yet to see more examples in the wild. That you're being so proactive about mobile optimization really puts you ahead of the email design curve - and now we've got to do our best to keep up :)


Get in touch with us on Twitter: http://twitter.com/campaignmonitor
We're also on Facebook: http://facebook.com/campaignmonitor
cnolson100, 1 year ago
roshodgekiss wrote:

The advantage to this is that we can import all our images in one batch, code in one hit and just comment out the CSS code if problems arise.

Revisiting this as I try to trim my workflow. Can you explain further what you mean by this? I am familiar with the background replacement technique. Are you suggesting that I update the template with new images that have the same filename each month? Or are you suggesting something else.

I feel like you might hold the key to my problem. Thanks.

roshodgekiss roshodgekiss, 1 year ago

Are you suggesting that I update the template with new images that have the same filename each month?

Yes, you can do this - and it will certainly work. It's likely going to be faster than exporting and editing the code each time :) Does this help?


Get in touch with us on Twitter: http://twitter.com/campaignmonitor
We're also on Facebook: http://facebook.com/campaignmonitor
djwhisky, 11 months ago

Any update on this... just hitting this responsive image being wider in the mobile version and needing to be editable. Maybe you could add a new tag for the image tag that specified the resize width for the uploaded image?

roshodgekiss roshodgekiss, 11 months ago

Hi djwhisky, we don't have any concrete plans to support this technique just yet, but the tag idea certainly has merit! I'll add your vote internally and keep you posted on this one, sorry there isn't an easier method here.


Get in touch with us on Twitter: http://twitter.com/campaignmonitor
We're also on Facebook: http://facebook.com/campaignmonitor
Lydia@NewNorth Lydia@NewNorth, 8 months ago

Ran into this today - djwhisky's suggestion is exactly what I need! I have images that are smaller at desktop size and slightly larger on one of the media query breakdowns. I need to be able to specify upload dimensions differently from the height and width attributes of the img tag.

roshodgekiss roshodgekiss, 8 months ago

Hi there Lydia, just to let you know, we updated how we resize images in the editor recently, specifically for the benefit of Retina/mobile displays. Could you kindly try uploading a larger image to the editor and let us know if this has improved things for you? If not, let us know and we'll look into this further.


Get in touch with us on Twitter: http://twitter.com/campaignmonitor
We're also on Facebook: http://facebook.com/campaignmonitor

Sign up for free.
Then send campaigns for as little as $9p/m

Create an account