Вот этот вариант, например, работает в gmail который в свою очередь вырезает из тела шаблона всё лишнее(по его мнению, например class):
<head>
<style type="text/css" media="screen">
* span[title="img"] img[title="hover"]{display:none !important;}
* span[title="img"]:hover img[title="default"]{display:none !important;}
* span[title="img"]:hover img[title="hover"]{display:block !important;}
</style>
</head>
<body>
...
<span style="display:block;" title="img">
<img title="default" alt="" border="0" width="100%" src="http://i.ss.lv/gallery/1/28/6969/riga-region-carnikavas-nov-kalngale-1393682.800.jpg" style="display:block;"/>
<img title="hover" alt="" border="0" width="100%" src="http://i12.fastpic.ru/big/2010/1112/f3/530d321c27ab64881abd264bdbb636f3.jpg" style="display:block;"/>
</span>
!important в данном случае нужен в первую очередь когда в теле письма используются внешние изображения и :hover должен взаимодействовать именно с ними как в примере, тогда изображения по умолчанию скрыты и пользователь их показывает нажимая на соответствующую кнопку в интерфейсе и тогда у них выставляется
display:block;.
В Интерфейсе Яндекс-почты изображения показываются по умолчанию не взирая на
Простой
Средний
Простой
