Android Gmail image resizing issues

There is a really strange issue that just started happening on Android Gmail. (see link)

Can anyone share any insight or a workaround? I've tried setting widths in CSS, !important, adding rows, changing image sources etc...

Thanks

Redferret, 3 years ago

From my initial research into Gmail auto sizing I seem to think it could be related to the fact that the cell on the left is smaller than the viewport where the right one isnt, so one image gets resized but the other doesn't.

740 is very wide for an email, I think scaling the whole thing down is the only option :(


Gmail app apologist
j05hr, 3 years ago

Have you had a look at my post on this forum?  It's basically asking exactly the same question.

As Redferret said, Gmail for Android uses a feature called auto sizing and no matter how wide your email is, it will scale it to fit in 100% width of the screen.  It's such a new feature that I don't think anyone has any solutions for it yet.

Take a look at the thread

https://www.campaignmonitor.com/forums/ … gmail-app/

Redferret, 3 years ago

I've got a hunch that adding a table row width a single cell set to 740 width will fix it


Gmail app apologist
JohnP JohnP, 3 years ago

@Redferret I tested it out with a standard 600px wide table and still had the same issue. Also tried using empty table rows, or another row with a 600 wide image and still no fix.

@j05hr I did see your post, but wasn't aware it was the same issue. You had a lot of responsive talk in there, so without diving into the code, I didn't make the connection. Thanks for the info.

Ultimately this is a huge setback for email design - literally something as basic as this breaks in Gmail Android:

<table>
  <tr>
    <td width="400">
      <img style="margin: 0; border: 0; padding: 0; display: block;" src="http://lorempixel.com/400/200/" width="400" height="200" alt="">
    </td>
    <td width="200">
      <img style="margin: 0; border: 0; padding: 0; display: block;" src="http://lorempixel.com/200/200/" width="200" height="200" alt="">
    </td>
  </tr>
</table>
j05hr, 3 years ago

The responsive side of it didn't matter in the end as Gmail just ignores the CSS that does the responsive side of it.

The thing that I don't get is if I receive emails from other companies it works absolutely fine.  Sort of like they have something in their code that makes Gmail ignore the  autofit but I have no idea how it works or what  they're doing so differently to us.

JohnP JohnP, 3 years ago

This issue I mention has nothing to do with responsive design, although your responsive issue may be encompassing this one.

The core of the issue I raise is in the code I posted above. It is the most basic example of a table with two cells, an image in each. In a basic static email, this is breaking in Gmail Android, as the first image gets shrunk, mis-aligning the images.

Redferret, 3 years ago

Ok I think i've got it but it will largely depend on the pixel width of the device so you may want to test on a range of devices.

What i've found is that on my Nexus 4, the workable area in the gmail app (accounting for Pixel ratio) is 352, images below this appear at their native size, above this and they auto-scale to fill what available area they can.

If both images are above 352 then they both scale appropriately but that's no help for this issue.

Setting min-width on both also doesnt work as the smaller image is still below 352, the only way around this is the increase the size of the viewport by adding a new row with a full width image AND min-width set so that it doesn't auto scale.

Heres my finished code:

<table width="600">
    <tr>
        <td colspan="2" width="600"><img style="margin: 0; width:600px; height:200px; border: 0; padding: 0; display: block; min-width:600px" src="http://lorempixel.com/600/200/"width="600" height="200" alt=""></td>
    </tr>
    <tr>
        <td width="400">
            <img style="margin: 0; border: 0; padding: 0; display: block; width:400px; height:200px; min-width:400px" src="http://lorempixel.com/400/200/" width="400" height="200" alt="">
        </td>
        <td width="200">
            <img style="margin: 0; border: 0; padding: 0; display: block; width:200px; height:200px; min-width:200px; max-width:200px;" src="http://lorempixel.com/200/200/" width="200" height="200" alt="">
        </td>
    </tr>

Gmail app apologist
Redferret, 3 years ago

In fact scratch that guys, heres the golden bullet:

Just add min-width to your background/container table!

That way, the viewport is locked to that width and everything scales appropriately.

Let me know how you get on!


Gmail app apologist
JohnP JohnP, 3 years ago

Thanks Redferret, that works. Just clarifying to everyone else, put min-width on the table with the shrinking image like this:

<table width="600" border="0" cellpadding="0" cellspacing="0" style="min-width:600px;">
  <tr>
    <td width="400" style="min-width:400px;">
      <img style="margin: 0; border: 0; padding: 0; display: block;" src="http://lorempixel.com/400/200/" width="400" height="200" alt="">
    </td>
    <td width="200">
      <img style="margin: 0; border: 0; padding: 0; display: block;" src="http://lorempixel.com/200/200/" width="200" height="200" alt="">
    </td>
  </tr>
</table>
j05hr, 3 years ago

Yeah that worked too thanks Redferret, had many of us stumped but you came up with a solution so cheers.

Ryan E., 3 years ago

Thanks for the fix, this was the only thread I found on this issue.

omidn, 3 years ago

This is the only page that comes up on web search related to this issue. Bunch of our email campaigns just broke for Android. The fix here worked like a charm. Thank you @Redferret.

Redferret, 3 years ago

No problem, I got my hands on the upcoming Gmail 4.6 app yesterday, looks like theres some slight changes in auto-fit that should make it a bit better where this is concerned, i'll keep you updated!


Gmail app apologist
danielles, 3 years ago

Maybe I got it wrong but the following code does not stop the gmail app from resizing. IS the code wrong?

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Newsletter</title>

<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
</head>
<body bgcolor="#FFFFFF" style="padding:0; margin:0; -webkit-text-size-adjust:none; -ms-text-size-adjust:100%; background-color:#ffffff;">

<table width="600" style="min-width:600px;">
    <tr>
        <td colspan="2" width="600"><img style="margin: 0; width:600px; height:200px; border: 0; padding: 0; display: block; min-width:600px;" src="http://lorempixel.com/600/200/" width="600" height="200" alt=""></td>
    </tr>
    <tr>
        <td width="400">
            <img style="margin: 0; border: 0; padding: 0; display: block; width:400px; height:200px; min-width:400px" src="http://lorempixel.com/400/200/" width="400" height="200" alt="">
        </td>
        <td width="200">
            <img style="margin: 0; border: 0; padding: 0; display: block; width:200px; height:200px; min-width:200px; max-width:200px;" src="http://lorempixel.com/200/200/" width="200" height="200" alt=""><a target="_blank" href="*|UNSUB|*">c</a>
        </td>
    </tr>
</table>
</body>
</html>
Tweedskin Tweedskin, 3 years ago

Having exactly the same problem. Responsive email that works beautifully on desktop and mobile. I know that Gmail strips out the CSS media queries so happy for desktop version to display in Gmail Android app but it's breaking. Auto - fit is stretching the email out and breaking the design/widths. Email is 600px and would look fine at 100% but gmail ruins it!!

Min-width on the wrapper table doesn't seem to be working either.

jainaj jainaj, 3 years ago

@redferret thank you so much! This worked a treat for me in the gmail app. Had a table with two cells, one with text and the other an image. Obviously the text was staying the same size and text cell getting all squished and not displaying correctly. Thank you!

@danielles what I found I had to do was put in the min-width in every table and <td> that I had explicitly told to be a width of 600. And I also added a class for those tables, in the media queries, to zero out the min-width for mobile devices. Otherwise it didn't look great in mobile devices.

up24downSeventy6, 2 years ago

I am facing the same issues with Gmail App for Android. I have attempted all hacks as suggested above but the email still gets squeezed and everything breaks.

What next?

Aki Tendo, 1 year ago

The solution above no longer works. After a week of hunting I found the following works most of the time.

<table style="display: block">
  <tr style="display: block; white-space: nowrap;"><td style="display: inline-block;">
    <img>
  </td><td style="display: inline-block;">
    <img>
  </td></tr>
</table>

Note the code above is simplified to show what is fixing the issue - it doesn't include other markup used in the course of normal email construction.

The crux of the issue is a rendering issue in the Blink, Webkit and Gecko HTML layout engines (which power Chrome/Gmail App, Safari/Apple Mail and Firefox/Thunderbird respectively) which comes into effect when zooming in or out on a table.  The engines all seem to round the table cell size up when recalculating it, and resize the image size down. This is why there's a 1px gap.

The solution sidesteps this issue by leaving the table layout engine behind and going back to css element positioning.  Outlook doesn't respect the display property at all, so it remains in table mode.  Keep in mind that inline-blocks respect the immediate white space around them, so you cannot have so much as a space between the td and tr elements as shown above if you are doing this. Put your line breaks after the opening td.

Very ironically, Trident (Internet Explorer) doesn't have this bug, and never has.  From the time zoom was introduced in IE 7, IE has been able to zoom tables without doing this.

This fix will break if any client decides to honor display without honoring display: inline-block. At the moment, no known client does this.

Hey mate, you shouldn't have to add display block or inline-block anywhere. Especially on tables and rows.
The previously mentioned fix still works...

Setting min-width:*enter width here*px; on say your first cell of your email (or an element that spans the entire width), like I do will stop Gmail from trying to make your email responsive.

Much less code too.
Set it once and you're set.
And it should always be a part of your email development no matter if its responsive or not.


Twitter: https://twitter.com/Nivicious88
Dribbble: https://dribbble.com/Nivicious
Codepen: http://codepen.io/Nivicious/
estevo, 1 year ago

Hi all,
first of all thank you very much for this hint/tip. I've been doing tests methdologically and noticed the discrepancy in Gmail App (android) between the previews provided by a service provider and the actual email on mobile phone. The email we are creating is not in responsive form but the code still works.

Credit to Digital Frankenstein as well for pointing out the min-width on the first cell. Without this it would not work, at lease in my case.

Again thanks a lot and happy testing!!!

cheers
Ashar

Join 200,000 companies around the world that use Campaign Monitor to run email marketing campaigns that deliver results for their business.

Get started for free
1-888-533-8098