Kích thước ảnh tối ưu cho bản tin Email
Gmail cắt bớt các thư trên 102 KB và hình ảnh thường là nguyên nhân. Những gì mỗi ứng dụng email chấp nhận và cách duy trì trong giới hạn đó.
Giữ mỗi hình ảnh bản tin dưới 100 KB, định kích thước hình ảnh gấp đôi chiều rộng hiển thị của chúng và sử dụng JPG hoặc PNG thay vì WebP. Gmail sẽ cắt bớt bất kỳ thư nào có ngôn ngữ đánh dấu siêu văn bản (HTML) vượt quá khoảng 102 KB, thay thế phần còn lại bằng liên kết Xem toàn bộ thư.
Hầu hết người gửi đều phát hiện ra giới hạn cắt bớt này một cách khó khăn, thường là khi liên kết hủy đăng ký và pixel theo dõi bị rơi xuống dưới phần bị cắt. Hình ảnh thường là lý do, do chúng được nhúng trực tiếp vào thư hoặc do mã đánh dấu xung quanh chúng đã phình to qua nhiều chiến dịch.
Giới hạn cắt bớt của Gmail thực sự đo lường điều gì
Gmail đo lường nguồn HTML của thư, chứ không phải các hình ảnh mà thư liên kết đến. Một bản tin liên kết đến 10 bức ảnh lớn vẫn nằm trong giới hạn, trong khi một thư có kiểu dáng nội tuyến nặng và hình ảnh nhúng thì không.
Sự khác biệt này rất quan trọng vì cách khắc phục là khác nhau. Hình ảnh được liên kết không tính vào con số 102 KB, vì vậy việc cắt bớt thường do các kiểu nội tuyến lặp đi lặp lại, các tham số theo dõi dài trên mỗi liên kết hoặc hình ảnh được nhúng dưới dạng dữ liệu base64. Loại bỏ hình ảnh nhúng và cắt giảm mã đánh dấu sẽ giải quyết được vấn đề cắt bớt, trong khi nén các bức ảnh được liên kết sẽ giải quyết được thời gian tải.
Kích thước hình ảnh được khuyến nghị cho email
Thiết kế phần thân email ở chiều rộng 600 pixel và xuất hình ảnh ở kích thước 1200 pixel cho màn hình có mật độ điểm ảnh cao. Tiêu chuẩn 600 pixel đã được duy trì trong nhiều năm vì nó vừa vặn với mọi ngăn xem trước của ứng dụng email trên máy tính để bàn mà không cần cuộn ngang.
| Vị trí đặt | Chiều rộng hiển thị | Chiều rộng xuất | Dung lượng tệp mục tiêu |
|---|---|---|---|
| Tiêu đề toàn chiều rộng | 600 px | 1200 px | 80 KB đến 100 KB |
| Ảnh trong phần thân | 600 px | 1200 px | 60 KB đến 100 KB |
| Hình ảnh hai cột | 280 px | 560 px | 30 KB đến 50 KB |
| Hình thu nhỏ sản phẩm | 150 px | 300 px | 15 KB đến 25 KB |
| Logo | 200 px | 400 px | Dưới 20 KB |
Nhân đôi chiều rộng xuất giúp đáp ứng các màn hình có mật độ điểm ảnh cao và dừng lại ở đó. Xuất ở kích thước gấp 3 lần chiều rộng hiển thị chỉ làm tăng dung lượng mà không có ứng dụng email nào hiển thị tốt hơn, và email là kênh duy nhất mà mọi kilobyte đều được tải xuống trên điện thoại.
Tại sao WebP vẫn là lựa chọn sai lầm trong email
Sự hỗ trợ của các ứng dụng email dành cho WebP vẫn chưa đồng đều, và đặc biệt là Outlook vẫn không thể dự đoán trước được. Email là một trong số ít nơi còn lại mà các định dạng cũ an toàn mới là lựa chọn đúng đắn.
Các trình duyệt web đều hỗ trợ WebP, điều này khiến mọi người cho rằng các ứng dụng email cũng vậy. Outlook trên máy tính để bàn hiển thị thư bằng một công cụ hoàn toàn khác và một số hệ thống thư của doanh nghiệp sẽ loại bỏ hoặc lỗi trên các định dạng mà chúng không nhận dạng được. Một hình ảnh bị hỏng trong bản tin sẽ gây tổn thất lớn hơn nhiều so với việc tiết kiệm 30 phần trăm dung lượng tệp mà WebP mang lại, vì vậy JPG và PNG vẫn là lựa chọn chính xác ở đây.
Lựa chọn định dạng bên trong email
Sử dụng JPG cho ảnh chụp và PNG cho logo, nút và bất kỳ thứ gì chứa văn bản. Quy tắc này giống như trên web và hậu quả sẽ dễ thấy hơn vì hình ảnh email thường nhỏ.
- JPG cho ảnh chụp sản phẩm, hình ảnh tiêu đề và bất kỳ hình ảnh nào về cảnh thực tế.
- PNG cho logo, biểu tượng và đồ họa có màu phẳng hoặc cạnh văn bản sắc nét.
- GIF động chỉ khi hoạt ảnh mang lại ý nghĩa và được giữ dưới 1 MB.
- Tránh WebP và AVIF, vì cả hai đều không hiển thị đáng tin cậy trên tất cả các ứng dụng thư.
- Tránh hoàn toàn SVG, vì hầu hết các ứng dụng email đều chặn định dạng này vì lý do bảo mật.
Hình ảnh bị chặn theo mặc định trong nhiều ứng dụng email
Nhiều người nhận xem email của bạn khi đã tắt hình ảnh, vì vậy thư vẫn phải hoạt động được dưới dạng văn bản. Các hệ thống thư của doanh nghiệp và những người dùng có ý thức bảo mật đều chặn hình ảnh từ xa cho đến khi người đọc chọn tải chúng.
Viết văn bản thay thế (alt text) trên mọi hình ảnh, vì các hình ảnh bị chặn sẽ hiển thị văn bản đó thay thế. Không bao giờ đặt thông tin thiết yếu, bao gồm ưu đãi, thời hạn hoặc lời kêu gọi hành động, chỉ bên trong một hình ảnh. Một bản tin được xây dựng hoàn toàn từ một hình ảnh lớn sẽ trở thành một hình chữ nhật trống đối với một phần lớn danh sách người nhận và nó cũng hoạt động kém với các trình đọc màn hình.
Cách chuẩn bị hình ảnh bản tin
Để giữ cho bản tin nhanh và dễ đọc, hãy làm theo 7 bước sau.
- Thiết kế email ở chiều rộng 600 pixel, mức mà mọi ứng dụng máy tính để bàn đều hiển thị được mà không cần cuộn.
- Cắt từng hình ảnh theo hình dạng chính xác mà nó sẽ chiếm trong bố cục.
- Thay đổi kích thước thành gấp đôi chiều rộng hiển thị và không hơn thế.
- Chuyển đổi sang JPG cho ảnh chụp hoặc PNG cho đồ họa chứa văn bản.
- Nén từng tệp xuống mục tiêu dưới 100 KB.
- Lưu trữ hình ảnh trên nền tảng gửi của bạn hoặc máy chủ của riêng bạn thay vì nhúng chúng vào thư.
- Gửi thử nghiệm đến Gmail, Outlook và điện thoại trước khi lên lịch chiến dịch.
Tổng dung lượng email quan trọng hơn bất kỳ hình ảnh đơn lẻ nào
Giữ toàn bộ thư dưới 600 KB bao gồm cả hình ảnh, vì người đăng ký mở bản tin trên điện thoại, thường là trên các kết nối kém. Một bản tin dung lượng 5 MB sẽ tải chậm và bị đóng trước khi kịp hiển thị.
Đếm số lượng hình ảnh trước khi nén bất kỳ thứ gì. Một bản tin chứa 12 bức ảnh, mỗi bức 100 KB đã lên tới 1.2 MB, điều này cho thấy bố cục cần ít hình ảnh hơn chứ không phải hình ảnh nhỏ hơn. Giảm số lượng hình ảnh thường cải thiện cả hiệu suất và khả năng đọc, vì các bản tin dài chứa nhiều hình ảnh hiếm khi được đọc đến cuối.
Chế độ tối thay đổi cách hiển thị của hình ảnh
Một số ứng dụng email đảo ngược hoặc điều chỉnh màu sắc ở chế độ tối, và một logo trên nền trắng sẽ trở thành một hình chữ nhật sáng rực trong một bức thư tối màu. Hãy thử nghiệm mọi chiến dịch ở chế độ tối trước khi gửi.
Sử dụng các tệp PNG có nền trong suốt cho logo và biểu tượng để chúng hiển thị chính xác trên bất kỳ màu nền nào. Tránh các hình ảnh có nền trắng khi thiết kế giả định trang phía sau chúng cũng có màu trắng. Ảnh chụp nói chung là an toàn, vì các ứng dụng email hiếm khi thay đổi nội dung ảnh, trong khi đồ họa phẳng và hình ảnh văn bản là những nơi thường xuất hiện sự cố chế độ tối.
Màn hình Retina và độ sắc nét của hình ảnh
Xuất ở kích thước gấp đôi chiều rộng hiển thị để hình ảnh luôn sắc nét trên màn hình có mật độ điểm ảnh cao, sau đó nén mạnh hơn để bù lại lượng pixel tăng thêm. Một hình ảnh 1200 pixel ở chất lượng 70 thường trông đẹp hơn và nhẹ hơn một hình ảnh 600 pixel ở chất lượng 95.
Đặt thuộc tính chiều rộng trong mã đánh dấu thành kích thước hiển thị thay vì kích thước tệp, để ứng dụng email hiển thị hình ảnh ở kích thước 600 pixel trong khi vẫn sử dụng chi tiết bổ sung. Việc bỏ qua thuộc tính chiều rộng khiến một số ứng dụng hiển thị hình ảnh ở kích thước pixel đầy đủ của nó, điều này làm hỏng bố cục trên máy tính để bàn.
Kiểm tra chiến dịch trước khi gửi
- Gửi thử nghiệm đến Gmail, Outlook, Apple Mail và ít nhất một điện thoại.
- Xem thử nghiệm khi hình ảnh bị chặn, xác nhận thư vẫn có ý nghĩa.
- Kiểm tra xem thư có bị cắt bớt trong Gmail hay không, nơi hiển thị liên kết Xem toàn bộ thư tại phần bị cắt.
- Xác nhận mọi hình ảnh đều có văn bản thay thế mô tả những gì nó hiển thị.
- Kiểm tra hiển thị ở chế độ tối, đặc biệt là đối với logo và đồ họa phẳng.
- Cộng tổng dung lượng của tất cả hình ảnh và xác nhận nó ở dưới 600 KB.
Chuẩn bị một chiến dịch trong một lượt
Xử lý tất cả hình ảnh trong bản tin cùng nhau để toàn bộ chiến dịch chia sẻ chung một thông số kỹ thuật. Một bản tin thường chứa từ 5 đến 15 hình ảnh và một người gửi hàng tuần sẽ chuẩn bị hàng trăm hình ảnh trong một năm.
Đặt chiều rộng và dung lượng KB mục tiêu một lần, thả các hình ảnh vào và mỗi tệp nhận lại đều khớp thông số. Mọi thứ đều chạy bên trong trình duyệt trên bộ xử lý của riêng bạn, vì vậy các ưu đãi chưa công bố, danh sách người đăng ký được hiển thị dưới dạng hình ảnh và công việc chiến dịch của khách hàng không bao giờ truyền đến máy chủ. Đối với một đại lý đang chuẩn bị ra mắt, việc giữ các tệp đó ở cục bộ sẽ tránh được việc rò rỉ thông tin mà không có mức tiết kiệm nén nào có thể bù đắp được.
Giữ một thư mục mẫu gồm các hình ảnh giữ chỗ có kích thước chính xác cho từng khối bố cục định kỳ, chẳng hạn như tiêu đề, hàng sản phẩm 2 cột và logo chân trang. Người gửi hàng tuần sử dụng lại cùng 4 hoặc 5 hình dạng đó vô thời hạn và việc khớp tác phẩm nghệ thuật mới với thông số kỹ thuật hiện có sẽ mất ít thời gian hơn so với việc quyết định lại kích thước cho mỗi chiến dịch.