Gmail is showing images within the body of an email that are full size, instead of limiting to the width of the browser window. Really large images shown in original size just gives a poor viewing experience, plus reading the text is hassle with lots of scrolling. I'm not sure if this is Gmail's fault, or whether it's just faithfully rendering the HTML sent, but either way, it's time to fix!

Time For Action

What is this image supposed to show?! Read on to find out.

Despite using Gmail for 10+ years I have only recently hit this issue a sufficient number of times in quick succession to do something about it. This is due to some recent back and forth about gear for a homemade cinema room (not my own unfortunately, but a story for another day!). These emails just happen to contain mega large images.

A quick Google suggested some full blown browser plugins to fix, but that feels a little overkill, it’s probably just one line of CSS required. This got me thinking back to Tampermonkey, or Greasemonkey for those on Firefox. Tampermonkey is a plugin to allow custom JavaScript (termed a userscript) to be run on preset websites. Being JavaScript the syntax is as you’d expect just with some special headers in comments at the top of the file to set out how and when the file should be run.

Having used it before just not for many years I wasted a good 10 minutes trying to guess which userscript headers did what. Eventually I went to the docs which answered my current question about how to get the script to fire for Gmail URL’s only (answer is via @match):

// @match        https://mail.google.com/mail/u/0/

We don’t really need JavaScript to solve our issue, we just need CSS, but that’s not a problem. We could use JS to make a style element and then set the inner HTML to be our custom style rules. Better yet, we can use the built-in helper function made specifically for this purpose: GM_addstyle. Quick note here, the helper functions are not imported by default. You have to use the @grant directive.

With the script finished and enabled we can revisit the last email with a super large image and finally make sense of it!

Now we can see the legacy InFocus LitePro 570 projector in the email! Glorious!

For those wondering, the final result really did end up as only one line of CSS:

// ==UserScript==
// @name         Gmail Image Width Fix
// @namespace    falkus-fix
// @version      0.1
// @description  Fix Gmail layout when supre large images are involved.
// @author       mfalkus
// @match        https://mail.google.com/mail/u/0/
// @icon         https://www.google.com/s2/favicons?domain=google.com
// @grant        GM_addStyle
// ==/UserScript==

(function() {
    'use strict';
    GM_addStyle('img { max-width: 100% !important; }');
})();

Job Done (for now…)

I did wonder if my blanket rule to match absolutely every image on the page is a little overkill but “so far so good” (a great phrase to use with any software task).

The CSS class names on the Gmail site do not immediately help me understand their purpose, so I wasn’t sure how to be more specific in a way that was predictable. Easier to reason about how it’ll work if I just apply everywhere. I plan to leave it covering all Gmail images and revisit if I notice any strange behavior.