CODEWITHSUNDEEP
htmlcssmobilehtml-email
Niqql
Niqql

Reputation: 430

Not displaying a image in mobile but still loading it?

I'm designing a email along with a designer. We want to implement a Gif as a Hero Image in this email. But on Mobile I want to display a different Gif than on Desktop. Since almost all mobile clients support css in the header I inserted the Desktop Image in the Code and then the Mobile Image as a style. This is my code: CSS:

<style>
  @media only screen and (max-device-width: 470px) {
    span[id=mobile] {
      display:block;
      background-image: url(mobile.gif) !important;
      background-repeat: no-repeat !important;
      background-position: center !important;
      width: 320px !important;
      height: 290px !important;
    }
    img[id=desktop] {display: none !important;}
  }
</style>

and my HTML:

<span id="mobile">
  <img id="desktop" src="desktop.gif" alt="">
</span>

Everything works fine, the only issue I have is that each Gif is about 220kb in size. If only one is loaded, I think it's fine for mobile. I think now, allthough I dont display the desktop version, it still loads fully. Is there any workaround so only one loads?

Upvotes: 2

Views: 548

Answers (2)

Ted Goas
Ted Goas

Reputation: 7577

Different email clients handle this differently, but have you tried hiding the image in the HTML body and selectively displaying it in media queries? If an image is display:none;-ed by default, an email client reading the HTML might not download it right away.

CSS

<style>
    @media only screen and (min-device-width: 470px) {
        img[id=desktop] {
            display: block !important;
        }
    }
</style>

<!--[if !mso]>
<style>
    @media only screen and (max-device-width: 470px) {
        span[id=mobile] {
            display:block;
            background-image: url(mobile.gif) !important;
            background-repeat: no-repeat !important;
            background-position: center !important;
            width: 320px !important;
            height: 290px !important;
        }
        img[id=desktop] {
            display: none !important;
        }
    }
</style>
<![endif]-->

HTML

<span id="mobile">
    <img id="desktop" src="desktop.gif" alt="" style="display: none;">
</span>

Again, not sure if ALL email clients do this.

Not sure what clients you focus on, but another option worth testing is srcset?

<img srcset="small.gif 1x, large.gif 2x" src="small.gif" alt="my gif" border="0">

It should cover iOS Mail, though am not sure of coverage beyond that.

Upvotes: 2

Johannes
Johannes

Reputation: 67778

Apart from the too large image file (220MB? - uh uh...) you should do it the other way round, like first define the background image for mobile and then in a media query like min-device-width: 471px the one for desktop. That way the desktop image won't be loaded on mobile devices.

Upvotes: 0

Related Questions