Tiếp thị qua email & Tự động hóa

Cách sử dụng hình ảnh độ phân giải cao cho màn hình Retina trong email HTML của bạn

Màn hình Retina là một thuật ngữ tiếp thị được sử dụng bởi Apple để mô tả màn hình độ phân giải cao có mật độ điểm ảnh đủ cao để mắt người không thể phân biệt các điểm ảnh riêng lẻ ở khoảng cách xem thông thường. Màn hình retina thường có mật độ điểm ảnh là 300 pixel trên inch (ppi) hoặc cao hơn, cao hơn đáng kể so với màn hình tiêu chuẩn có mật độ điểm ảnh là 72 ppi.

Màn hình Retina hiện nay khá phổ biến cho màn hình, máy tính xách tay, thiết bị di động và máy tính bảng. Nhiều nhà sản xuất hiện cung cấp màn hình có độ phân giải cao với mật độ điểm ảnh bằng hoặc vượt trội so với màn hình Retina của Apple.

CSS để hiển thị hình ảnh có độ phân giải cao hơn cho màn hình Retina

Bạn có thể sử dụng mã CSS sau để tải hình ảnh có độ phân giải cao cho màn hình Retina. Mã này phát hiện mật độ pixel của thiết bị và tải hình ảnh bằng @ 2x hậu tố cho màn hình Retina, trong khi tải hình ảnh có độ phân giải tiêu chuẩn cho các màn hình khác.

@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');
}

Một cách tiếp cận khác là sử dụng đồ họa vector hoặc SVG hình ảnh, có thể mở rộng theo bất kỳ độ phân giải nào mà không làm giảm chất lượng. Đây là một ví dụ:

<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>

Trong ví dụ này, mã SVG được nhúng trực tiếp vào email HTML bằng cách sử dụng <svg> nhãn. Các viewBox thuộc tính xác định kích thước của hình ảnh SVG, trong khi thuộc tính xmlns thuộc tính chỉ định không gian tên XML cho SVG.

Mô hình max-width tài sản được thiết lập trên div phần tử để đảm bảo rằng hình ảnh SVG tự động chia tỷ lệ để vừa với không gian có sẵn, lên đến chiều rộng tối đa là 300px trong trường hợp này. Đây là phương pháp hay nhất để đảm bảo rằng hình ảnh SVG được hiển thị chính xác trên tất cả các thiết bị và ứng dụng email.

Lưu ý: Hỗ trợ SVG có thể khác nhau tùy thuộc vào ứng dụng email, vì vậy, điều quan trọng là phải kiểm tra email của bạn trên nhiều ứng dụng khách để đảm bảo rằng hình ảnh SVG được hiển thị chính xác.

Một cách khác để mã hóa email HTML cho màn hình Retina là sử dụng srcset. Sử dụng thuộc tính srcset cho phép bạn cung cấp hình ảnh có độ phân giải cao cho màn hình Retina đồng thời đảm bảo rằng hình ảnh có kích thước phù hợp cho các thiết bị có độ phân giải thấp hơn.

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

Trong ví dụ này, srcset thuộc tính cung cấp hai nguồn hình ảnh: image.jpg cho các thiết bị có độ phân giải từ 600 pixel trở xuống và image@2x.jpg đối với thiết bị có độ phân giải từ 1200 pixel trở lên. Các 600w1200w bộ mô tả chỉ định kích thước của hình ảnh tính bằng pixel, giúp trình duyệt xác định hình ảnh nào sẽ tải xuống dựa trên độ phân giải của thiết bị.

Không phải tất cả ứng dụng email đều hỗ trợ srcset thuộc tính. Mức hỗ trợ cho srcset có thể rất khác nhau tùy thuộc vào ứng dụng email, vì vậy, điều quan trọng là phải kiểm tra email của bạn trên nhiều ứng dụng khách để đảm bảo rằng hình ảnh được hiển thị chính xác.

HTML cho hình ảnh trong email được tối ưu hóa cho màn hình Retina

có thể mã hóa một email HTML phản hồi sẽ hiển thị đúng hình ảnh ở độ phân giải được tối ưu hóa cho màn hình võng mạc. Đây là cách:

  1. Tạo một hình ảnh có độ phân giải cao gấp đôi kích thước của hình ảnh thực mà bạn muốn hiển thị trong email. Ví dụ: nếu bạn muốn hiển thị hình ảnh 300×200, hãy tạo hình ảnh 600×400.
  2. Lưu hình ảnh có độ phân giải cao với @ 2x hậu tố. Ví dụ: nếu hình ảnh gốc của bạn là image.png, lưu phiên bản có độ phân giải cao dưới dạng hình ảnh@2x.png.
  3. Trong mã email HTML của bạn, hãy sử dụng mã sau để hiển thị hình ảnh:
<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)]> là một nhận xét có điều kiện được sử dụng để nhắm mục tiêu các phiên bản cụ thể của Microsoft Outlook, sử dụng Microsoft Word để hiển thị email HTML. Công cụ kết xuất HTML của Microsoft Word có thể khá khác so với các ứng dụng email và trình duyệt web khác, do đó, nó thường yêu cầu xử lý đặc biệt. Các

(gte mso 9) điều kiện kiểm tra xem phiên bản Microsoft Office có lớn hơn hoặc bằng 9, tương ứng với Microsoft Office 2000 hay không. |(IE) điều kiện kiểm tra xem máy khách có phải là Internet Explorer hay không, thường được sử dụng bởi Microsoft Outlook.

Email HTML với hình ảnh được tối ưu hóa cho màn hình Retina

Dưới đây là ví dụ về mã email HTML đáp ứng hiển thị hình ảnh ở độ phân giải được tối ưu hóa cho màn hình retina:

<!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>

Mẹo hình ảnh hiển thị Retina

Dưới đây là một số mẹo bổ sung về tối ưu hóa Email HTML của bạn để có hình ảnh được tối ưu hóa cho màn hình Retina:

  • Đảm bảo luôn có các thẻ hình ảnh của bạn bao gồm việc sử dụng alt văn bản để cung cấp ngữ cảnh cho hình ảnh.
  • Tối ưu hóa hình ảnh cho web để giảm kích thước tệp mà không làm giảm chất lượng hình ảnh. Điều này có thể bao gồm việc sử dụng Nén hình ảnh các công cụ, giảm số lượng màu được sử dụng trong hình ảnh và thay đổi kích thước hình ảnh thành kích thước tối ưu trước khi tải hình ảnh lên email.
  • Tránh các hình nền lớn có thể làm chậm thời gian tải email.
  • GIF động có thể có kích thước tệp lớn hơn so với hình ảnh tĩnh do cần có nhiều khung hình để tạo hoạt ảnh, hãy đảm bảo giữ chúng dưới 1 Mb.

Douglas Karr

Douglas Karr là CMO của mởINSIGHTS và người sáng lập ra Martech Zone. Douglas đã giúp hàng chục công ty khởi nghiệp MarTech thành công, đã hỗ trợ thẩm định hơn 5 tỷ USD trong các thương vụ mua lại và đầu tư của Martech, đồng thời tiếp tục hỗ trợ các công ty triển khai và tự động hóa các chiến lược tiếp thị và bán hàng của họ. Douglas là một chuyên gia và diễn giả về chuyển đổi kỹ thuật số và MarTech được quốc tế công nhận. Douglas cũng là tác giả đã xuất bản sách hướng dẫn của Dummie và sách lãnh đạo doanh nghiệp.

Bài viết liên quan

Back to top
Đóng

Đã phát hiện ra khối quảng cáo

Martech Zone có thể cung cấp cho bạn nội dung này miễn phí vì chúng tôi kiếm tiền từ trang web của mình thông qua doanh thu quảng cáo, liên kết đơn vị liên kết và tài trợ. Chúng tôi sẽ đánh giá cao nếu bạn xóa trình chặn quảng cáo của mình khi bạn xem trang web của chúng tôi.