Ảnh email marketing: kích thước, dung lượng, bẫy dark mode

Dòng tiêu đề giành lấy lượt mở. Ảnh sản phẩm giành lấy cú nhấp — với điều kiện nó hiển thị được. Email là môi trường thiết kế khắc nghiệt nhất trong marketing: hàng chục ứng dụng đọc thư, mỗi cái một bộ máy hiển thị riêng, chế độ chặn ảnh mặc định riêng, và ngày càng nhiều quan điểm cứng rắn của riêng nó về dark mode.

Những bức ảnh sản phẩm trông hoàn hảo trong công cụ thiết kế thường xuyên đến nơi trong tình trạng méo mó: bị kéo giãn vượt khung, quá nặng với kết nối chập chờn, bị thay bằng chiếc hộp xám trống rỗng, hoặc — kinh điển thời hiện đại — một ảnh PNG trong suốt lặng lẽ tan biến vào nền dark mode.

Đây là cách làm đúng với ảnh trong email marketing: chuẩn chiều rộng, kỷ luật dung lượng tệp, alt text làm tròn phận sự, và một giải pháp thực thụ cho cái bẫy dark mode.

Ảnh sản phẩm trong email nên rộng bao nhiêu?

Chiều rộng nội dung tiêu chuẩn cho email marketing là 600 pixel, một số mẫu hiện đại nới lên 640. Con số này sống sót được nhờ các khung xem trước và những ứng dụng desktop đời cũ chưa bao giờ nhận được thông báo về responsive. Hãy thiết kế theo nó.

• Ảnh sản phẩm tràn khung — xuất ở 1200px, hiển thị ở 600. Bản xuất 2x giữ viền sắc nét trên màn hình mật độ điểm ảnh cao mà không đổi bố cục.
• Lưới nhiều cột — chia đều vùng nội dung 600px, rồi xuất mỗi ảnh ở gấp đôi chiều rộng hiển thị của nó.
• Đặt thuộc tính width tường minh — một số ứng dụng desktop phớt lờ kích thước CSS và hiển thị ảnh theo kích thước gốc; đó là cách một bản xuất 2400px bị bỏ quên làm nổ tung cả bố cục.

Rộng hơn không đồng nghĩa tốt hơn ở đây. Một ảnh 600px hiển thị được ở mọi nơi thắng một kiệt tác 1400px chẳng hiển thị được ở đâu.

Giữ dung lượng tệp ảnh gọn nhẹ

Mỗi kilobyte là khoản thuế người đăng ký của bạn phải trả trên kết nối di động, và những ảnh hero tải chậm sẽ bị lướt qua trước khi kịp hiện ra.

• Nhắm dưới 200 KB mỗi ảnh, và keo kiệt hơn nữa với bất kỳ thứ gì nằm phía trên màn hình đầu tiên. Ảnh đã tách nền đặt trên nền phẳng nén cực kỳ hiệu quả.
• JPEG cho ảnh chụp, PNG cho mảng màu phẳng và ảnh tách nền. WebP nén tốt hơn cả hai — remover.bg hỗ trợ xuất — nhưng mức hỗ trợ ở các ứng dụng email vẫn chưa đồng đều, nên hãy giữ bản gốc JPEG và PNG cho các chiến dịch.
• Biết về giới hạn cắt của Gmail. Gmail cắt cụt những email có HTML vượt khoảng 102 KB. Ảnh host bên ngoài không tính vào giới hạn đó, nhưng một email bị cắt sẽ giấu mọi thứ bên dưới vết cắt — hãy giữ cả phần code gọn gàng nữa.

Viết alt text cho ảnh bị chặn

Các bản cài Outlook doanh nghiệp và những người đăng ký coi trọng quyền riêng tư vẫn chặn ảnh theo mặc định. Khi điều đó xảy ra, alt text là toàn bộ lớp hình ảnh của bạn.

• Mô tả sản phẩm và điểm mấu chốt — “Bộ pha cà phê pour-over gốm Terra màu xanh sage” hơn “image1.png” một khoảng cách cỡ giữa một đơn hàng và một cú xóa thư.
• Tạo kiểu cho nó — nhiều ứng dụng hiển thị alt text như văn bản thật có thể style inline: đặt font, cỡ chữ và màu để một ảnh bị chặn xuống cấp thành thứ trông có chủ đích.
• Đừng bao giờ nhốt thông tin quan trọng trong pixel — giá, hạn chót và CTA thuộc về văn bản thật. Nếu ảnh bị chặn, ưu đãi vẫn phải hoạt động.

Bẫy dark mode: PNG trong suốt trong ứng dụng email nền tối

Cái bẫy là thế này. Bạn xuất một ảnh tách nền gọn gàng dưới dạng PNG trong suốt — lựa chọn đúng cho hầu hết mọi kênh khác, như hướng dẫn về PNG trong suốt của chúng tôi giải thích — rồi thả vào một email được thiết kế trên nền trắng. Sau đó ứng dụng email lật nền đó sang gần như đen cho người dùng dark mode. Chiếc tai nghe màu than chì của bạn thành một đường viền mờ nhạt. Dòng chữ logo màu đen biến mất. Còn những mép khử răng cưa, vốn được hòa trộn với giả định nền trắng, giờ phát sáng với một quầng nhợt nhạt.

Tệ hơn, các ứng dụng còn không thống nhất dark mode nghĩa là gì: cái để nguyên màu của bạn, cái chỉ đảo nền, cái sơn lại gần như tất cả. Bạn không kiểm soát được người đăng ký dùng ứng dụng nào, nên hãy tạo những ảnh tách nền sống sót được qua tất cả.

• Ép sẵn một nền màu đặc phù hợp — làm phẳng ảnh tách nền lên một màu thương hiệu có chủ đích thay vì gửi đi ảnh trong suốt. Thả nó lên một màu đặc trong trình chỉnh sửa của remover.bg và ứng dụng email chẳng còn gì để đảo. Hướng dẫn chọn màu nền cho ảnh sản phẩm giúp bạn tìm tông màu đứng vững ở cả hai chế độ.
• Thêm viền và khoảng đệm — một đường viền tinh tế hoặc bóng mờ quanh các sản phẩm mép tối giữ chúng dễ nhìn kể cả khi nền bị sơn lại. Khoảng đệm rộng rãi ngăn ảnh cắt sát va vào bất cứ thứ gì ứng dụng vẽ xung quanh.
• Kiểm tra trong ứng dụng thật — gửi email thử thật sự tới Apple Mail, Gmail và Outlook với dark mode bật trước mỗi chiến dịch. Điều ứng dụng này tôn trọng, ứng dụng khác vui vẻ sơn đè lên.

Giữ ảnh tách nền đồng nhất xuyên suốt chiến dịch

Một chiến dịch hiếm khi chỉ có một email. Ra mắt, tiêu điểm, nhắc nhở cơ hội cuối — cùng một sản phẩm xuất hiện bốn năm lần, và nếu cách xử lý trôi dạt giữa các lần gửi (chỗ này nền trắng, chỗ kia xám, lúc có bóng, lúc không), chuỗi email sẽ như được chắp vá từ những mảnh stock rời rạc.

Chốt một cách xử lý và áp dụng ở mọi nơi: một màu nền, một quy tắc tỷ lệ cho phần khung hình sản phẩm chiếm, một kiểu bóng đổ — trình chỉnh sửa của remover.bg thêm bóng chân thực để ảnh tách nền đứng vững trong khung thay vì trôi nổi. Với danh mục lớn, API HTTP áp cùng một cách xử lý cho mọi ảnh một cách tự động, đúng logic tự động hóa đang âm thầm định hình lại AI trong thương mại điện tử.

Điều đọng lại

Ảnh email sống hay chết dựa trên bốn quyết định trước khi bạn nhấn gửi:

1. Chiều rộng — thiết kế theo 600px, xuất ở 2x.
2. Dung lượng — dưới 200 KB mỗi ảnh, JPEG hoặc PNG để được hỗ trợ tối đa.
3. Alt text — mô tả rõ, có style, không bao giờ giấu ưu đãi.
4. Dark mode — ép sẵn nền, viền cho mép tối, thử trong ứng dụng thật.

Làm đúng những điều đó và sản phẩm của bạn trông chỉn chu trong mọi hộp thư — chế độ sáng, chế độ tối, ảnh bị chặn hay không. Đó là điều không phải chiến dịch nào cũng nói được.