Using retina images as background images?

You can use retina images in VML markup. You just have to set your fill type to frame. What ever image you're using as your fill will stretch to the dimensions of your rectangle.

<v:fill type="frame" src="image2x.jpg" />

It's been 2 years but I just wanted to mention for anyone looking at this post that background-size is no longer stripped in Gmail. At least not in Gmail on the web which is what I assume Mark was referencing 2 years ago.

Mark, do you know if specifying a @1x image in the background attribute + the @2x image in the background style results in clients downloading both images? Any data / research on that you're aware of? Thanks!

Thanks Remi. Does this work in the Android gmail app? In my Litmus tests the image is blocked, which I thought was a client specific thing that couldn't be overcome.

This will help you out.

https://www.hteumeuleu.com/2021/background-properties-in-vml/

Here are the important bits. But see the link for the full explanation.

background-size
In VML, keyword values contain and cover of background-size can be replicated via the aspect attribute of the <v:fill> element.

aspect="atleast" (equivalent to background-size:cover)
aspect="atmost" (equivalent to background-size:contain)

background-position
In VML, background-position can be replicated using the origin attribute and the position attribute. Both attributes require two coordinates (x and y), separated by a space or a comma. Each coordinate is a fraction value relative to the width and height (between 0 and 1) of the image for the origin attribute, and of the VML shape for the position attribute. The coordinates move from the top left of the VML shape for the position attribute, while they move from the center of the image for the origin attribute.

Yes, but you don't really do it as a background image, you can load it as an image and use your position:absolute and position it accordingly with left and top css properties on the image element. Then you can overlay a table to include text overlay or add and position additional images—such as a logo—that need to be overtop the background image. You want to make sure you exclude any regular images from outlook and include them as additional VML image elements otherwise Windows10 Mail won't render the images.

So basically save out your image at 50% quality and double the dimensions and then you can use cover for css friendly clients and use absolute dimensions to scale it correctly in Outlook and Windows10 Mail.

Here's an example of the code I've been using for a while and It has fairly robust support across clients.

<!--[if (mso)|(IE)]>
<table align="center" border="0" cellspacing="0" cellpadding="0"><tr><td align="center" valign="top" width="724"><tr><td style="height:400px">
<v:image xmlns:v="urn:schemas-microsoft-com:vml" id="theImage" style="behavior: url(#default#VML); display: inline-block; position: absolute; width: 724px; height: 400px; top: 0; left: 0; border: 0; z-index: 1;" src="hero.jpg" />
<v:rect xmlns:v="urn:schemas-microsoft-com:vml" fill="true" stroke="false" style="display: inline-block; position: absolute; width: 652px; height: 328px; top: 0; left: 36px; border: 0;z-index: 3;">
<v:fill opacity="0%" style="z-index: 4;"/>
<![endif]-->
<div class="hero">
    <!--[if !mso]>-->
    <table role="presentation" align="center" border="0" cellpadding="0" cellspacing="0">
        <tr>
            <td style="padding:0 36px">
    <!--<![endif]-->
                <h1>
                    Title Text Here
                </h1>
    <!--[if !mso]>-->
            </td>
        </tr>
    </table>
    <!--<![endif]-->
</div>
<!--[if  (mso)|(IE)]>
</v:fill></v:rect>
</td></tr></table>
<![endif]-->

and here's the applicable css

.hero {
    width:100%;
    min-width:724px;
    min-height:400px;
    background:0 0/cover;
    background-image:url(hero.jpg);
    background-size:cover;
    background-repeat:no-repeat;
    background-position:center;
    margin:0;}
.hero table {
    width:724px;
}