Thỉnh thoảng, thật tuyệt khi thêm một số hình ảnh vào email tiếp thị hoặc giao dịch của bạn. Ngay cả khi đó chỉ là một biểu tượng, bạn sẽ thấy nó giúp tăng thêm tính hợp pháp cho những gì bạn gửi đi
Tuy nhiên, không có cách nào để làm điều này. Bạn có liên kết ra hình ảnh trên CDN không?
Trong bài đăng này, chúng tôi sẽ chỉ cho bạn cách nhúng hình ảnh vào email với tất cả các tùy chọn này—ngoài ra, chúng tôi sẽ giải quyết ưu và nhược điểm của từng tùy chọn. Đối với người dùng Twilio SendGrid, chúng tôi sẽ chỉ cho bạn cách bạn sẽ sử dụng các tùy chọn này với SendGrid, để bạn có thể xem xét nhu cầu và đối tượng của mình và quyết định
Hãy bắt đầu với CID bí ẩn
3 cách nhúng hình ảnh vào email
1. Hình ảnh nhúng CID [hình ảnh nội tuyến]
Đối với tôi, CID [hoặc Content-ID] cảm thấy cũ và có gì đó rất giống với cách làm việc với email trong Outlook. Bỏ qua vấn đề đó, đây vẫn là một tùy chọn và chúng tôi hỗ trợ tùy chọn này trong các thư viện máy khách của mình
Hình ảnh CID hoạt động bằng cách đính kèm hình ảnh vào email bạn gửi và sau đó sử dụng các thẻ hình ảnh HTML tiêu chuẩn tham chiếu hình ảnh đó để cuối cùng nhúng nó vào email khi người dùng mở nó
Sử dụng nút SendGrid. js, chúng tôi sẽ đính kèm hình ảnh như vậy
var params = {
smtpapi: new sengrid.SmtpapiHeaders[],
.. //some vars removed here!
files: [
{
filename: 'image.jpg',
contentType: 'image/jpeg',
cid: 'myimagecid',
content: ['yourbase64encodedimageasastringcangohere' | Buffer]
}
],
file_data: {},
headers: {}
};Sau đó, trong mẫu HTML của bạn, bạn sẽ nhúng hình ảnh theo cách này
Chà, phải không?
Vấn đề với hình ảnh nhúng CID là không phải lúc nào chúng cũng hiển thị chính xác trong ứng dụng email. Nguyên tắc chung là nhúng CID sẽ hoạt động tốt trong hầu hết các ứng dụng email trên máy tính để bàn, nhưng hầu như không hoạt động trong các ứng dụng email dựa trên web, chẳng hạn như Gmail hoặc Yahoo. Email
đáng tiếc
Ưu điểm của hình ảnh CID
- Nó đã tồn tại trong một thời gian dài
- Việc sử dụng nó đảm bảo loại mime chính xác của nhiều phần/liên quan
- Nó được hỗ trợ thông qua lib ứng dụng khách của chúng tôi
Nhược điểm của hình ảnh CID
- Tăng kích thước của email tổng thể
- Khác nhau về kết quả giữa các ứng dụng email, đặc biệt là webmail
- Cảm thấy lỗi thời
- Cần nhiều nỗ lực hơn
- Làm cho nhân viên ít kỹ thuật khó đạt được hơn
2. Nhúng nội tuyến [mã hóa Base64]
Nhúng nội tuyến đơn giản hơn nhiều, chủ yếu là do bạn không cần phải cuộn hoàn toàn các email của mình và tìm hiểu trong Tiện ích mở rộng thư Internet đa năng hoặc MIME để sử dụng nó
Trước tiên, việc nhúng hình ảnh vào email yêu cầu bạn phải có phiên bản của hình ảnh nói trên dưới dạng chuỗi được mã hóa Base64. Khi bạn mã hóa hình ảnh của mình, hãy chuyển sang mẫu của bạn hoặc bất kỳ HTML nào bạn gửi đi và nhúng nó bằng thẻ hình ảnh HTML tiêu chuẩn
Sau đó, bạn đã hoàn tất. Gửi đi
Ưu điểm của hình ảnh nhúng nội tuyến
- Đơn giản hơn để đạt được
- Làm nhanh hơn nhiều
- Yêu cầu ít đi sâu hơn vào MIME và mã ứng dụng
Nhược điểm của hình ảnh nhúng nội tuyến
- Thực sự có thể tăng kích thước email, đặc biệt nếu bạn sử dụng nhiều hơn một hình ảnh
- Rất có thể bị chặn theo mặc định trong nhiều dịch vụ webmail
- Bị chặn hoàn toàn trong Outlook
3. hình ảnh được liên kết
Như bạn có thể thấy từ ví dụ trên, nếu bạn cố gắng sử dụng nhiều hình ảnh được mã hóa Base64 trong email của mình, kích thước thực của email được gửi sẽ tăng lên đáng kể, làm chậm quá trình gửi. Cách thay thế của bạn là liên kết với hình ảnh của bạn và tải chúng từ một máy chủ bên ngoài
Không có gì siêu kỹ thuật để đạt được ở đây. Nó chỉ liên kết đến một hình ảnh trong HTML. Tuy nhiên, bạn nên cân nhắc những điều sau nếu thực hiện phương pháp này—có bao nhiêu người sẽ nhận được email này và họ ở đâu trên thế giới?
Nếu bạn gửi cho 100 người trong vòng một tuần, thì bạn không cần phải cân nhắc quá nhiều về vấn đề này—bạn có thể lưu trữ hình ảnh của mình trong thư mục chung của tài khoản Dropbox nếu muốn và như vậy là quá đủ
Tuy nhiên, nếu 200.000 người sẽ nhận được email của bạn trong vòng một ngày, thì sẽ là khôn ngoan nếu hình ảnh của bạn được lưu trữ trên Mạng phân phối nội dung như CloudFront của Amazon
Thực hiện theo các bước đơn giản sau để sử dụng hình ảnh được liên kết trong email của bạn
- Tải hình ảnh lên một thư mục trên máy chủ của bạn hoặc vào bất kỳ thư mục chung lưu trữ đám mây nào
- Giảm kích thước hình ảnh để nó không yêu cầu băng thông bổ sung
- Liên kết tới các hình ảnh trong email HTML của bạn với đường dẫn URL đầy đủ
- Đảm bảo hình ảnh có thể truy cập công khai
Ưu điểm của hình ảnh được liên kết
- Giữ trọng lượng email nhẹ
- Yêu cầu rất ít nỗ lực
- Cho phép thay đổi hình ảnh sau khi gửi
Nhược điểm của hình ảnh được liên kết
- Gặp phải các sự cố chặn tương tự như mã hóa Base64 trên hầu hết các dịch vụ
- Yêu cầu tải xuống từ các máy chủ bên ngoài
Kiểm tra email của bạn trước khi gửi
Bất kể bạn chọn phương pháp nhúng hình ảnh nào, bạn sẽ muốn kiểm tra email của mình trước khi gửi. Với Kiểm tra email tích hợp của chúng tôi, bạn có thể xem email tiếp thị của mình trông như thế nào trên các ứng dụng khách, trình duyệt và thiết bị—bao gồm iOS, Android, Gmail, Outlook và .
Kiểm tra email của bạn trước sẽ cho bạn biết nếu hình ảnh không hiển thị trên một trình duyệt quan trọng hoặc trong hộp thư đến phổ biến. Nếu số liệu thống kê SendGrid của bạn cho thấy rằng hầu hết người nhận của bạn sử dụng Gmail thì bạn sẽ muốn kiểm tra email của mình để đảm bảo hình ảnh của bạn hiển thị chính xác trong hộp thư đến đó
Hình ảnh của bạn có hiển thị chính xác không? . Nếu không, đã đến lúc bắt đầu khắc phục sự cố. Một giải pháp đơn giản có thể là thử nghiệm một phương pháp nhúng hình ảnh khác. Thay đổi phương thức của bạn, gửi một email kiểm tra khác và xem điều đó có khắc phục được sự cố không
Ngay cả khi hình ảnh của bạn hiển thị, điều quan trọng là thiết kế email với giả định rằng hình ảnh sẽ không tải. Bất kể trình duyệt, thiết bị hay hộp thư đến của người nhận, họ có thể đã điều chỉnh cài đặt cá nhân của mình để tự động chặn hình ảnh. Do đó, bạn sẽ cần đảm bảo rằng email của mình trông đẹp mắt [không bị hỏng] khi hình ảnh bạn đã lên kế hoạch không xuất hiện.
Ngoài ra, hãy bao gồm văn bản ALT để làm cho email của bạn dễ truy cập hơn đối với những người đăng ký khiếm thị của bạn. Ngoài ra, nếu hình ảnh không tải được, những người đăng ký không bị khiếm thị của bạn sẽ biết bối cảnh xung quanh hình ảnh không tải được.
Duy trì khả năng giao hàng của bạn
Chơi xung quanh với hình ảnh có thể có tác động xấu đến khả năng gửi của bạn. Sau đây là một số điều bạn cần lưu ý khi thêm hình ảnh vào email của mình
Không thêm tệp đính kèm
Bất kể đó là PDF, tờ rơi hay GIF chú mèo dễ thương, đừng thêm tệp đính kèm vào email của bạn. Các nhà cung cấp hộp thư đến thường sẽ gắn cờ các email có tệp đính kèm là thư rác, ngay cả khi nội dung email của bạn là hợp pháp. Nếu bạn muốn bao gồm bất kỳ yếu tố hình ảnh nào trong số này, hãy thêm chúng thông qua 3 phương pháp chúng tôi đã đề cập ở trên hoặc liên kết với chúng bằng lời gọi hành động hiệu quả
Bao gồm nhiều hơn chỉ một hình ảnh
Với một hình ảnh, bạn có toàn quyền kiểm soát tất cả các yếu tố thiết kế và thực sự có thể tạo ra trải nghiệm hộp thư đến có một không hai. Tuy nhiên, việc email của bạn chỉ bao gồm một hình ảnh [không có văn bản] có thể khiến email của bạn bị gắn cờ là thư rác
Không thêm quá nhiều hình ảnh
Thêm sự đa dạng cho email của bạn. Bao gồm hình ảnh [một cách tiết kiệm] với các khối văn bản và tiêu đề xuyên suốt. Tuy nhiên, hãy lưu ý rằng quá nhiều hình ảnh có thể là yếu tố tiêu cực đối với khả năng gửi của bạn
Nếu bạn có thêm câu hỏi về khả năng gửi email, hãy tải xuống Hướng dẫn về khả năng gửi email mới nhất của chúng tôi. Nó chứa đầy tất cả các mẹo, thủ thuật và lời khuyên mới nhất để đảm bảo email của bạn được gửi đúng nơi dự kiến
Cách tốt nhất để nhúng hình ảnh vào email là gì?
Nó khá ảm đạm, phải không? . Trên hết, bạn cần nghĩ xem người nhận sẽ đọc nó ở đâu
Bạn có thể sử dụng dữ liệu phân tích từ tài khoản SendGrid của mình để xây dựng bức tranh về những người đọc nội dung và nơi họ đọc nội dung đó. Khi bạn biết điều đó, bạn có thể lập trình chọn mẫu và phương pháp nhúng tốt nhất cho chúng
Nhìn chung, tốt nhất là giữ cho hình ảnh nhẹ nhàng trong các email giao dịch và nhanh chóng truy cập những nội dung quan trọng, điều đó có nghĩa là hầu hết bạn sẽ muốn có một hoặc hai biểu trưng trong đó. Phần còn lại bạn có thể đạt được bằng cách sử dụng CSS nội tuyến
Cách tốt nhất để tìm ra điều gì sẽ phù hợp với nhu cầu của bạn là xem email từ các công ty có quy mô lớn hơn, chẳng hạn như Amazon, Pinterest, Spotify hoặc Twitter. Xem mã, xem tiêu đề email của họ và khám phá những gì phù hợp với họ, sau đó áp dụng mã đó vào email của bạn và kiểm tra, kiểm tra, kiểm tra. *
* Gợi ý hữu ích. Không sử dụng iOS Mail để thử nghiệm. Nó rất tử tế với hình ảnh và tải khá nhiều thứ. Kiểm tra với Gmail và Outlook nếu bạn có thể
Cải thiện mức độ tương tác của email bằng cách nhúng hình ảnh với Twilio SendGrid
Khi bạn chạy tất cả các thử nghiệm này và thử các phương pháp khác nhau này, hãy nhớ tại sao bạn lại cố gắng nhúng email ngay từ đầu. Là nó để cải thiện tính nhất quán thương hiệu của bạn?
Với Twilio SendGrid, chúng tôi có thể giúp bạn theo dõi các phân tích gửi của mình cũng như so sánh và đối chiếu kết quả của bạn. Nếu bạn cố gắng gửi email giàu hình ảnh trong vài tuần nhưng thấy mức độ tương tác của mình giảm xuống, thì có thể không đáng để thay đổi tính nhất quán thương hiệu của bạn
Đối tượng của bạn rất đa dạng tùy theo các ứng dụng email, trình duyệt và thiết bị khác nhau—hãy đảm bảo cũng bao gồm mong muốn và nhu cầu của họ trong các quyết định thiết kế của bạn. Liên hệ với nhóm Bán hàng của chúng tôi ngay hôm nay để tìm hiểu thêm
Jesse SumrakTác giả
Jesse Sumrak là Giám đốc tiếp thị nội dung tại Twilio SendGrid tập trung vào việc viết nội dung hấp dẫn và tạo ra các hội thảo trên web hấp dẫn. Là một người cuồng viết lách vào ban ngày và một vận động viên chạy siêu việt dã vào ban đêm [và vào sáng sớm], bạn thường có thể thấy Jesse đang chuẩn bị cho ngày tận thế trên một đỉnh núi dựng đứng ở đâu đó trong Dãy núi Rocky
Ayanna Julienngười phản biện
Với tư cách là Giám đốc tiếp thị biên tập của Twilio SendGrid, Ayanna đảm bảo chất lượng cho nội dung blog bằng cách tập trung vào cách kể chuyện chân thực và tính toàn vẹn của biên tập. Khi không chỉnh sửa, Ayanna thích đọc một cuốn tiểu thuyết viễn tưởng hay hoặc viết tiểu thuyết của riêng mình