Использование PNG вместо изображений JPG для устранения проблем с отображением в Outlook? - PullRequest
Новая
       34

Использование PNG вместо изображений JPG для устранения проблем с отображением в Outlook?

0 голосов
/ 30 мая 2019

Наши шаблоны электронной почты в формате HTML отлично смотрятся в каждом ESP, за исключением внешнего вида с разрешением 120 DPI. Предложенные подсказки блога на данный момент не сработали.

Кто-нибудь пробовал использовать изображения PNG вместо изображений JPG в своих электронных письмах? Помогло ли это решить проблемы с рендерингом изображений или вызвало и дополнительные проблемы?

Я пытался редактировать свои таблицы и медиазапросы с помощью различных советов блогов, таких как в https://litmus.com/blog/mastering-outlook-a-look-back-at-common-rendering-issues.. Я могу заставить каждый ESP правильно отображать наши шаблоны, но не в Outlook 120 DPI 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
  <head> 
    <meta name="viewport" content="width=device-width" /> 
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
    <meta charset="utf-8" /> 
    <meta http-equiv="X-UA-Compatible" content="IE=9; IE=8; IE=7; IE=edge" />
      <link href="https://fonts.googleapis.com/css?family=Open+Sans:300,300i,400,400i,600,600i,700,700i,800,800i" rel="stylesheet">
      <link href="https://fonts.googleapis.com/css?family=Roboto:300,300i,400,400i,500,500i,700,700i" rel="stylesheet">
    <title>Smartsheet</title> 

    <!-- Default Styles --> 
    <style type="text/css">
            .ExternalClass {
                width: 100%;
            }
            .ExternalClass, .ExternalClass p, .ExternalClass span, .ExternalClass font, .ExternalClass td, .ExternalClass div {
                line-height: 100%;
            }
            table { 
                border-spacing: 0px !important; 
                mso-table-lspace: 0pt; 
                mso-table-rspace: 0pt;
                table-layout: fixed;
            }
            table table { 
                table-layout: auto; 
            }
            h2,h2 a,h2 a:visited,h3,h3 a,h3 a:visited,h4,h5,h6,.t_cht {
                  color: #363639;
            }
            @-ms-viewport { 
                width: device-width; 
            }
            h1, h2, h3, h4 {
                font-weight: normal;
            }

Код выше должен содержать базовый CSS, необходимый для понимания моей проблемы, и HTML. Как вы можете видеть, изображение на плитке выдувается не пропорционально. Это происходит для всех наших изображений в outlook 120 DPI.

...