Why should images always include dimensions?

You've probably seen it: an email that starts loading, the text snaps into place, and then the layout suddenly lurches as images finish downloading and claim their space. That reflow happens when images don't have explicit width and height attributes. The email client doesn't know how much space to reserve, so it collapses images to nothing until they load, then expands them, pushing all the text and layout below each image downward in one jarring jump.

Setting width and height on every <img> tag solves this. The client reserves the exact space before the image loads, so the layout is stable from the moment the email opens. Use the display dimensions, not the file dimensions. If you're serving a 2x retina image that's 1200px wide but displays at 600px, set width="600" in the HTML. The browser handles the downscaling; you just need to tell it how much space to hold.

Dimensions also matter when images are blocked. When a client doesn't load external images, it still respects the declared dimensions and shows a placeholder in that space. This keeps your layout intact even for subscribers who never see your images. Without dimensions, blocked images collapse to zero and your template can look completely broken, with text sections running together and buttons misaligned.

There's a subtle distinction worth knowing between HTML attributes and CSS. Setting width and height as HTML attributes is the reliable method across email clients, especially older versions of Outlook, which has limited CSS support. CSS properties like width: 600px in a style attribute work in most modern clients but are less consistent in email than on the web. If you're using a responsive template, you'll typically set the HTML attribute to the desktop size and use a CSS max-width: 100% override for mobile, which is the standard pattern in responsive email design.

It takes about ten seconds per image to add width and height attributes. If you're building templates from scratch, add it to your image-insertion checklist now. If you're auditing existing templates, a quick search for <img tags without width attributes will show you what needs fixing.