title: Why does GMail break inline (CSS) styles for an email with minified markup/HTML using quote-printable encoding?
body: <p>I had an email that was getting clipped by GMail (around 120Kb in size — according to <a href="http://www.adestra.com/avoid-gmail-clipping-emails/" rel="nofollow noreferrer">http://www.adestra.com/avoid-gmail-clipping-emails/</a>, GMail starts clippping the messages at 102Kb) </p>
  
  <p><img src="https://i.stack.imgur.com/0YjU2.png" alt="GMail clipping emails"></p>
  
  <p>To reduce the email size, I decided to try out both <a href="https://github.com/cobrateam/django-htmlmin" rel="nofollow noreferrer">django-htmlmin</a> and plain ol' <code>re.sub(r'\n\s*(\S)', r'\1', email_html_content)</code> (Modifying markup using regex is a discussion for another day). Both these techniques resulted in 30%+ reduction in email size, but both solutions broke the rendering in GMail. When inspecting the broken design using Dev Tools, it seems some of the elements are not getting any inline styles, apparently at random. </p>
  
  <p><img src="https://i.stack.imgur.com/pvITe.png" alt="Element in GMail without any inline styles"></p>
  
  <p>However, when I clicked on 'Show Original' to view the raw email, I'm seeing inline styles for the element.</p>
  
  <p><img src="https://i.stack.imgur.com/LMA44.png" alt="Inline styles visible in the raw email"></p>
  
  <p>When checking the raw email, I saw that it is encoded using the <code>quote-printable</code> format. Which means, even though my entire email is just 1 line when minified, line breaks (<code>=</code> in quote-printable format) are inserted automatically, as is visible in the picture above. Some of these line breaks (<code>=</code> characters at the end of the line) appear mid-attribute values, but the email client seems to be ignoring these breaks and I don't think they are cause of the broken rendering (even my original email with unminified markup had such line breaks, and it was being rendered fine — according to my reading, it the email spec that suggests lines have a maximum limit of 78(?) characters). </p>
  
  <p>Another pattern I saw in the raw email code was after a chunk of lines (each delimited by a <code>=</code>), there seems to be a paragraph that is delimited by a <code>=0D</code> character. Each paragraph is not the same size and I'm cannot find any source on why these characters are being inserted in a one-line, minified markup email. The paragraph pattern can be seen in the image below: </p>
  
  <p><img src="https://i.stack.imgur.com/0spTH.png" alt="random paragraphs delimited by &lt;code&gt;=0D&lt;/code&gt; character"></p>
  
  <p>Even this character is appearing mid-attribute value for certain tags and I think this might be the reason the rendering is breaking. I got the rendering working again by using <code>re.sub(r'\n\s*(\S)', r'\n\1', email_body)</code> instead of <code>re.sub(r'\n\s*(\S)', r'\1', email_body)</code> — i.e. each tag (opening or closing) on a separate line instead of mashing up everything in just one line. This increased the size of the email, but got rid of the <code>=0D</code> characters from appearing mid-attribute value. Now it is at the end of each line and the email is rendering fine. </p>
  
  <p><img src="https://i.stack.imgur.com/fLeop.png" alt="With each tag on a separate line"></p>
  
  <p>So, my question is, how do I minify my email HTML and still produce an unbroken rendering within email clients? What is causing the broken rendering and how may I go about fixing it?</p>