Adjusting Image Width in HTML

Creating a good HTML email is hard — and even harder when you want it to be responsive, so that it conforms to both desktop and mobile devices. Much has been written and taught on the subject (such as this course by Chris Converse), but we generally get around the whole issue by using a template-based system from an email provider (in our case, Mailchimp). These templates often work great for building responsive emails, but there’s one instance where it just doesn’t work that well: Placing images inside text blocks.

If you put an image in its own image block, or an image-and-caption block, it works fine. (Those are special types of sections set up by the email provider.) But if you try to insert a picture inside a text block, there’s a problem: the width of the image often causes the email to no longer be responsive… so it may look great on your desktop or laptop, but not when it shows up on a mobile device, like a phone.

For example, let’s look at a recent issue of our free CreativePro weekly newsletter… this is how it appears in the mobile preview mode in Mailchimp:

image on phoneemail on phone

As you can see, it appears cut off… too wide! But of course, that’s just an emulation — Mailchimp is faking a mobile-size. Here’s how it looks on my iPhone:

email on an iphone

another iphone image

On the phone itself, the right side of the email doesn’t appear cut off (thank goodness!) but instead the text is scaled down considerably, so that it fits within the limited width of the mail client. That makes it difficult to read without pinching-and-zooming, or perhaps turning the phone sideways.

The problem lies within the HTML. In Mailchimp we can edit the text block and click the HTML button to view the code itself. Here’s how it looks:

Image code with fixed width

While it’s a little messy, you can see that the image width shows up twice in this line — and in both cases, it’s set to 500 pixels. In a responsive world, we don’t want to think about specific pixel sizes if we can avoid it. Instead, it’s often better to work in percentages. So let’s change the width to a percentage of the column:

image width as percentage

Now this image will be set to 80% of the column width. You’ll notice that I also added a max-width style, so the image won’t get enlarged if the email window is really wide — so in this case, the image can get smaller, but it will max out at 500 px wide.

The result is exactly the same when the email is viewed on a desktop/laptop, but it’s considerably better when viewed on a phone:

after changing to percentage width 1after changing to percentage width 2

I am certainly no HTML expert, and I’m sure I have a lot to learn about creating HTML emails, but this is one trick that I have found super helpful when formatting emails.

Tags
Posted on: May 24, 2018

David Blatner

David Blatner is the author or co-author of 15 books, including Real World InDesign, Spectrums: Our Mind-Boggling Universe From Infinitesimal to Infinity, and The Joy of Pi. He is also the author of InDesign Essential Training and the InDesign Insider Training titles at lynda.com. David is the co-host of InDesignSecrets and PePcon: The Print + ePublishing Conference, and is the co-founder of Creative Publishing Network.

Leave a comment

Your email address will not be published.


*