Started a new discussion: Best Practice for Hiding and Showing Interactive Content/Fallbacks
Ah thank you very much.
Strange that it was only messing things up on gmail and not MSO browsers as well
Just edited with a screen shot and the code.
Had originally been hoping that it was a known issue already.
Assuming your images are hosted externally (which I would assume they are if you're using an EMS) the size of your images shouldn't effect the raw size of your email.
I ran some quick tests on one of the longer newsletters I've coded recently and using an html minifier (https://kangax.github.io/html-minifier/) and css minifier (https://cssminifier.com/)
In generally they get rid of line breaks which add to the file size but are largely for human reading not rendering engines. Running my css through saved little file space, but the html went from 46kb (~950 lines of code) to 34kb (a single line of code.)
I had to go back in a lot because it caused syntax errors to the point that constant contact wouldn't even let me save the file due to syntax errors ( I think a bunch of it was from MSO conditional codes, but it was really hard to tell since it's really hard to read the code once it's compressed).
Frankly if the email html file is that big, the email is probably just too long (to the point that who ever is receiving it probably not going to read half of it —especially keeping in mind that on mobile readers are going to be scrolling for miles. The client is probably insisting on cramming everything they possibly can into the email but the best bet is to either cut content or split it into two emails. Basically either they can cut content or email browsers are going to cut it anyway.
Started a new discussion: Gmail 1px Around TDs
Being relatively new to the email industry I wasn't aware of any awards (and I'm still not exactly clear on if there are official awards after reading Mike's post) but I'm fairly certain my agency would submit emails for awards if we knew where/when to submit stuff.
I'd personally love to have more places to see well designed/developed emails and also have designers/developers in a generally under appreciated sphere get more recognition.
Just to elaborate, about why to not use the image at all, even if you manage to line the image up perfectly, it still wont really match up since the border on the html part of it will be pixel perfect since it's html, and the image will be slightly blurry since it's an image. If you look at the intersection on the codepen you can see it doesn't match even without any outlook quirks. It'll be even more obvious on smaller screens when the border you have in the image scales down and the border you created in html retains it's size.
You can create it out of html/tables and text as Daniel said using 3 columns with [border top/left] [Your Text] [border top/right]
**Last time I put together a section that looks like this I ended up with some annoying nested tables to get my text to sit vertically centered with the top border. Not sure if the number of tables I used were necessary, but it worked.
I had a different line for webkit fonts adjustment, but I tried this one for good measure. Unfortunately it didn't work either.
I have one media query for font sizes, which only affects the first headline.