이메일 마케팅 및 자동화

HTML 이메일에서 Retina 디스플레이용 고해상도 이미지를 사용하는 방법

Retina 디스플레이는 Apple 인간의 눈이 일반적인 시청 거리에서 개별 픽셀을 구별할 수 없을 정도로 픽셀 밀도가 높은 고해상도 디스플레이를 설명합니다. 레티나 디스플레이는 일반적으로 픽셀 밀도가 인치당 300픽셀(PPI) 이상으로 픽셀 밀도가 72ppi인 표준 디스플레이보다 훨씬 높습니다.

Retina 디스플레이는 이제 디스플레이, 랩탑, 모바일 장치 및 태블릿의 주류입니다. 현재 많은 제조업체에서 픽셀 밀도가 Apple의 Retina 디스플레이와 같거나 그 이상인 고해상도 디스플레이를 제공하고 있습니다.

레티나 디스플레이용 고해상도 이미지를 표시하는 CSS

다음 CSS 코드를 사용하여 Retina 디스플레이용 고해상도 이미지를 로드할 수 있습니다. 이 코드는 장치의 픽셀 밀도를 감지하고 @2x 다른 디스플레이에 대한 표준 해상도 이미지를 로드하는 동안 Retina 디스플레이에 대한 접미사.

@media only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min--moz-device-pixel-ratio: 2), only screen and (-o-min-device-pixel-ratio: 2/1), only screen and (min-device-pixel-ratio: 2) {
/* Load high-resolution image */
background-image: url('image@2x.png');
}

또 다른 접근 방식은 벡터 그래픽을 사용하거나 SVG 품질 저하 없이 모든 해상도로 확장할 수 있는 이미지. 예를 들면 다음과 같습니다.

<div style="max-width: 300px;">
    <svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
        <circle cx="50" cy="50" r="40" stroke="black" stroke-width="3" fill="red" />
    </svg>
</div>

이 예에서 SVG 코드는 다음을 사용하여 HTML 이메일에 직접 포함됩니다. <svg> 꼬리표. 그만큼 viewBox 속성은 SVG 이미지의 크기를 정의하는 반면 xmlns 속성은 SVG에 대한 XML 네임스페이스를 지정합니다.

최대 XNUMXW 출력을 제공하는 max-width 속성은 div 요소를 사용하여 SVG 이미지가 사용 가능한 공간에 맞게 자동으로 확장되도록 합니다(이 경우 최대 너비 300px). 이는 SVG 이미지가 모든 장치 및 이메일 클라이언트에 올바르게 표시되도록 하기 위한 모범 사례입니다.

참고 : SVG 지원은 이메일 클라이언트에 따라 다를 수 있습니다., 따라서 여러 클라이언트에서 이메일을 테스트하여 SVG 이미지가 제대로 표시되는지 확인하는 것이 중요합니다.

Retina 디스플레이용 HTML 이메일을 코딩하는 또 다른 방법은 srcset. srcset 속성을 사용하면 Retina 디스플레이에 고해상도 이미지를 제공하는 동시에 저해상도 장치에 맞게 이미지 크기를 적절하게 조정할 수 있습니다.

<img src="image@2x.jpg" srcset="image.jpg 600w, image@2x.jpg 1200w" alt="My Image" style="width:100%;max-width:600px;">

이 예에서 srcset 속성은 두 가지 이미지 소스를 제공합니다. image.jpg 해상도가 600픽셀 이하인 장치의 경우 image@2x.jpg 해상도가 1200픽셀 이상인 장치의 경우. 그만큼 600w1200w 디스크립터는 이미지 크기를 픽셀 단위로 지정하므로 브라우저가 장치의 해상도에 따라 다운로드할 이미지를 결정하는 데 도움이 됩니다.

모든 이메일 클라이언트가 지원하는 것은 아닙니다. srcset 기인하다. 에 대한 지원 수준 srcset 이메일 클라이언트에 따라 크게 다를 수 있으므로 여러 클라이언트에서 이메일을 테스트하여 이미지가 제대로 표시되는지 확인하는 것이 중요합니다.

레티나 디스플레이에 최적화된 이메일의 이미지용 HTML

레티나 디스플레이에 최적화된 해상도로 이미지를 제대로 표시하는 반응형 HTML 이메일을 코딩할 수 있습니다. 방법은 다음과 같습니다.

  1. 이메일에 표시하려는 실제 이미지 크기의 두 배인 고해상도 이미지를 만듭니다. 예를 들어 300×200 이미지를 표시하려면 600×400 이미지를 만듭니다.
  2. 고해상도 이미지를 @2x 접미사. 예를 들어 원본 이미지가 image.png, 고해상도 버전을 다음과 같이 저장하십시오. 이미지@2x.png.
  3. HTML 이메일 코드에서 다음 코드를 사용하여 이미지를 표시합니다.
<img src="image.png" alt="Image" width="300" height="200" style="display:block; border:none; outline:none; text-decoration:none; -ms-interpolation-mode:bicubic;">
<!--[if (gte mso 9)|(IE)]>
  <img src="image@2x.png" alt="Image" width="300" height="200" style="display:block; border:none; outline:none; text-decoration:none; -ms-interpolation-mode:bicubic;">
<![endif]-->

<!--[if (gte mso 9)|(IE)]> Microsoft Word를 사용하여 HTML 이메일을 렌더링하는 특정 버전의 Microsoft Outlook을 대상으로 하는 데 사용되는 조건부 설명입니다. Microsoft Word의 HTML 렌더링 엔진은 다른 이메일 클라이언트 및 웹 브라우저와 상당히 다를 수 있으므로 특별한 처리가 필요한 경우가 많습니다. 그만큼

(gte mso 9) 조건은 Microsoft Office 버전이 Microsoft Office 9에 해당하는 2000 이상인지 확인합니다. |(IE) 조건은 클라이언트가 Microsoft Outlook에서 자주 사용하는 Internet Explorer인지 확인합니다.

Retina 디스플레이에 최적화된 이미지가 포함된 HTML 이메일

다음은 레티나 디스플레이에 최적화된 해상도로 이미지를 표시하는 반응형 HTML 이메일 코드의 예입니다.

<!doctype html>
<html>
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>My Retina-Optimized Email</title>
  <style>
    /* Mobile-specific styles */
    @media only screen and (max-width: 480px) {
      /* Add mobile-specific styles here */
    }
    
    /* High-density display styles */
    @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
      img {
        display: block;
        width: 300px !important;
        height: 200px !important;
        max-width: 100%;
        height: auto;
      }
    }
  </style>
</head>
<body style="margin: 0; padding: 0; background-color: #f7f7f7;">
  <table border="0" cellpadding="0" cellspacing="0" width="100%">
    <tr>
      <td align="center" style="padding: 40px 0 30px 0;">
        <img src="image.png" alt="My Image" width="300" height="200" style="display:block; border:none; outline:none; text-decoration:none; -ms-interpolation-mode:bicubic;">
        <!--[if (gte mso 9)|(IE)]>
          <img src="image@2x.png" alt="My Image" width="300" height="200" style="display:block; border:none; outline:none; text-decoration:none; -ms-interpolation-mode:bicubic;">
        <![endif]-->
      </td>
    </tr>
  </table>
</body>
</html>

Retina 디스플레이 이미지 팁

다음은 Retina 디스플레이에 최적화된 이미지에 대한 HTML 이메일 최적화에 대한 몇 가지 추가 팁입니다.

  • 항상 이미지 태그에 다음을 포함하도록 하십시오. alt 이미지에 대한 컨텍스트를 제공하는 텍스트입니다.
  • 웹용 이미지를 최적화하여 이미지 품질을 손상시키지 않고 파일 크기를 줄입니다. 여기에는 다음을 사용하는 것이 포함될 수 있습니다. 이미지 압축 도구, 이미지에 사용된 색상 수 줄이기, 이미지를 이메일에 업로드하기 전에 최적의 크기로 크기 조정하기.
  • 이메일 로드 시간을 늦출 수 있는 큰 배경 이미지를 피하십시오.
  • 애니메이션 GIF는 애니메이션을 만드는 데 필요한 여러 프레임으로 인해 정적 이미지보다 파일 크기가 클 수 있습니다. 1 미만으로 잘 유지해야 합니다. Mb.

Douglas Karr

Douglas Karr 의 CMO입니다. 오픈인사이트 그리고 설립자 Martech Zone. Douglas는 수십 개의 성공적인 MarTech 스타트업을 도왔고, Martech 인수 및 투자에서 5억 달러가 넘는 실사를 도왔으며, 기업이 판매 및 마케팅 전략을 구현하고 자동화하도록 지속적으로 지원하고 있습니다. Douglas는 국제적으로 인정받는 디지털 혁신이자 MarTech 전문가이자 연설가입니다. Douglas는 Dummie's Guide와 비즈니스 리더십 서적을 집필한 작가이기도 합니다.

관련 기사

맨 위로 가기 버튼
닫기

애드블록 감지됨

Martech Zone 은(는) 광고 수익, 제휴 링크 및 후원을 통해 사이트에서 수익을 창출하기 때문에 이 콘텐츠를 무료로 제공할 수 있습니다. 사이트를 볼 때 광고 차단기를 제거해 주시면 감사하겠습니다.