ขนาดรูปภาพและขีดจำกัดไฟล์ในอีเมลข่าวสาร

ควบคุมให้รูปภาพในนิวสเล็ตเตอร์แต่ละรูปมีขนาดไม่เกิน 100 KB, กำหนดขนาดรูปภาพเป็นสองเท่าของความกว้างที่แสดงผล และใช้ JPG หรือ PNG แทน WebP Gmail จะตัดข้อความใดๆ ที่ซอร์สโค้ดภาษา HTML มีขนาดเกินประมาณ 102 KB โดยจะแทนที่ส่วนที่เหลือด้วยลิงก์ ดูข้อความทั้งหมด (View entire message)

ผู้ส่งส่วนใหญ่มักจะประสบปัญหาการตัดข้อความนี้ด้วยวิธีที่ยากลำบาก ซึ่งมักจะเกิดขึ้นเมื่อลิงก์ยกเลิกการรับข่าวสารและพิกเซลติดตามผลตกลงไปอยู่ส่วนที่ถูกตัด รูปภาพมักเป็นสาเหตุเนื่องจากฝังอยู่ในข้อความโดยตรงหรือเนื่องจากมาร์กอัปที่ล้อมรอบขยายใหญ่ขึ้นจากการส่งหลายๆ แคมเปญ

ขีดจำกัดการตัดข้อความของ Gmail วัดจากอะไรกันแน่

Gmail วัดจากซอร์สโค้ด HTML ของข้อความ ไม่ใช่รูปภาพที่ลิงก์ไปถึง นิวสเล็ตเตอร์ที่ลิงก์ไปยังรูปถ่ายขนาดใหญ่ 10 รูปยังคงอยู่ภายในขีดจำกัดได้อย่างสบาย ในขณะที่ข้อความที่มีการใส่สไตล์อินไลน์จำนวนมากและฝังรูปภาพไว้จะไม่สามารถทำได้

ความแตกต่างนี้มีความสำคัญเนื่องจากวิธีแก้ไขนั้นแตกต่างกัน รูปภาพที่มีการลิงก์จะไม่ถูกนำมาคิดรวมในขนาด 102 KB ดังนั้นการตัดข้อความจึงมักเกิดจากการใส่สไตล์อินไลน์ซ้ำๆ, พารามิเตอร์การติดตามที่ยาวในทุกๆ ลิงก์ หรือรูปภาพที่ฝังเป็นข้อมูล base64 การลบรูปภาพที่ฝังไว้ออกและการตัดทอนมาร์กอัปจะช่วยแก้ปัญหาการตัดข้อความได้ ในขณะที่การบีบอัดรูปถ่ายที่มีการลิงก์จะช่วยแก้ปัญหาเวลาในการโหลด

ขนาดรูปภาพที่แนะนำสำหรับอีเมล

ออกแบบส่วนเนื้อหาอีเมลให้มีความกว้าง 600 พิกเซล และส่งออกรูปภาพที่ความกว้าง 1200 พิกเซลสำหรับหน้าจอที่มีความหนาแน่นสูง มาตรฐาน 600 พิกเซลนี้ใช้มาหลายปีแล้วเนื่องจากสามารถพอดีกับหน้าต่างแสดงตัวอย่างของโปรแกรมรับอีเมลบนเดสก์ท็อปทุกตัวโดยไม่ต้องเลื่อนหน้าจอในแนวราบ

การเพิ่มความกว้างในการส่งออกเป็นสองเท่าจะช่วยรองรับหน้าจอที่มีความหนาแน่นสูงและพอดีแล้ว การส่งออกที่ความกว้าง 3 เท่าของขนาดแสดงผลจะเพิ่มขนาดไฟล์โดยที่ไม่มีโปรแกรมรับอีเมลตัวไหนแสดงผลได้ดีขึ้น และอีเมลคือช่องทางเดียวที่ทุกๆ กิโลไบต์จะถูกดาวน์โหลดผ่านโทรศัพท์มือถือ

ทำไม WebP ถึงยังคงเป็นตัวเลือกที่ไม่ถูกต้องสำหรับการใช้อีเมล

การรองรับ WebP ของโปรแกรมรับอีเมลยังคงไม่สม่ำเสมอ โดยเฉพาะ Outlook ที่คาดเดาได้ยากเป็นพิเศษ อีเมลเป็นหนึ่งในไม่กี่แห่งที่รูปแบบไฟล์แบบเดิมที่ปลอดภัยยังคงเป็นตัวเลือกที่ถูกต้อง

เว็บเบราว์เซอร์ทั้งหมดรองรับ WebP ซึ่งทำให้ผู้คนคิดว่าโปรแกรมรับอีเมลก็รองรับเช่นกัน Outlook บนเดสก์ท็อปเรนเดอร์ข้อความด้วยเอนจิ้นที่แตกต่างกันโดยสิ้นเชิง และระบบเมลขององค์กรหลายแห่งจะลบหรือไม่รองรับรูปแบบที่ตนไม่รู้จัก รูปภาพที่เสียในนิวสเล็ตเตอร์นั้นเสียหายมากกว่าการประหยัดพื้นที่ไฟล์ 30 เปอร์เซ็นต์ที่ WebP จะมอบให้ ดังนั้น JPG และ PNG จึงยังคงเป็นตัวเลือกที่ถูกต้องในที่นี้

การเลือกรูปแบบไฟล์ภายในอีเมล

ใช้ JPG สำหรับรูปถ่าย และ PNG สำหรับโลโก้ ปุ่ม และสิ่งใดก็ตามที่มีข้อความ กฎนี้เหมือนกับบนเว็บ และผลลัพธ์จะมองเห็นได้ชัดเจนกว่าเนื่องจากรูปภาพในอีเมลักมีขนาดเล็ก

• JPG สำหรับรูปถ่ายสินค้า ภาพส่วนหัว และภาพถ่ายของฉากจริงใดๆ
• PNG สำหรับโลโก้ ไอคอน และกราฟิกที่มีสีแบบเรียบหรือขอบข้อความที่คมชัด
• Animated GIF เฉพาะเมื่อแอนิเมชันนั้นมีความหมาย และต้องมีขนาดต่ำกว่า 1 MB
• หลีกเลี่ยง WebP และ AVIF เนื่องจากไม่มีรูปแบบใดที่แสดงผลได้อย่างเสถียรในโปรแกรมรับอีเมลทุกตัว
• หลีกเลี่ยง SVG โดยสิ้นเชิง เนื่องจากโปรแกรมรับอีเมลส่วนใหญ่บล็อกด้วยเหตุผลด้านความปลอดภัย

รูปภาพจะถูกบล็อกโดยค่าเริ่มต้นในโปรแกรมรับอีเมลหลายตัว

ผู้รับจำนวนมากเห็นอีเมลของคุณโดยที่ปิดการแสดงรูปภาพไว้ ดังนั้นข้อความจึงต้องยังคงใช้งานได้ในรูปแบบข้อความ ระบบเมลขององค์กรและผู้ใช้ที่คำนึงถึงความเป็นส่วนตัวต่างบล็อกรูปภาพระยะไกลจนกว่าผู้อ่านจะเลือกโหลดรูปภาพเหล่านั้น

เขียนข้อความแทนรูปภาพ (alt text) บนทุกรูปภาพ เนื่องจากรูปภาพที่ถูกบล็อกจะแสดงข้อความดังกล่าวแทน ห้ามวางข้อมูลที่จำเป็น ซึ่งรวมถึงข้อเสนอ วันหมดเขต หรือปุ่มเรียกร้องให้ดำเนินการ ไว้ในรูปภาพเพียงอย่างเดียว นิวสเล็ตเตอร์ที่สร้างขึ้นจากกราฟิกขนาดใหญ่เพียงภาพเดียวจะกลายเป็นสี่เหลี่ยมว่างเปล่าสำหรับผู้ใช้จำนวนมาก และยังทำงานได้ไม่ดีกับโปรแกรมอ่านหน้าจออีกด้วย

วิธีเตรียมรูปภาพสำหรับนิวสเล็ตเตอร์

เพื่อให้รักษานิวสเล็ตเตอร์ให้อ่านง่ายและโหลดเร็ว ให้ทำตาม 7 ขั้นตอนเหล่านี้

1. ออกแบบอีเมลให้มีความกว้าง 600 พิกเซล ซึ่งโปรแกรมรับอีเมลบนเดสก์ท็อปทุกตัวจะเรนเดอร์ได้โดยไม่ต้องเลื่อนหน้าจอ
2. ครอปรูปภาพแต่ละรูปให้มีรูปร่างที่แน่นอนตามที่จะแสดงในเลย์เอาต์
3. ปรับขนาดเป็นสองเท่าของความกว้างที่แสดงผล และไม่ต้องทำอะไรเพิ่มอีก
4. แปลงเป็น JPG สำหรับรูปถ่าย หรือ PNG สำหรับกราฟิกที่มีข้อความ
5. บีบอัดแต่ละไฟล์ให้มีขนาดเป้าหมายต่ำกว่า 100 KB
6. โฮสต์รูปภาพบนแพลตฟอร์มการส่งอีเมลของคุณหรือบนเซิร์ฟเวอร์ของคุณเองแทนที่จะฝังรูปภาพลงในข้อความ
7. ส่งอีเมลทดสอบไปยัง Gmail, Outlook และโทรศัพท์มือถือก่อนกำหนดเวลาส่งแคมเปญ

น้ำหนักรวมของอีเมลมีความสำคัญมากกว่ารูปภาพเดี่ยวๆ ทุกรูป

ควบคุมข้อความทั้งหมดให้อยู่ต่ำกว่า 600 KB รวมรูปภาพแล้ว เนื่องจากผู้ติดตามเปิดนิวสเล็ตเตอร์บนโทรศัพท์มือถือ และมักจะอยู่บนการเชื่อมต่อที่ไม่ดี นิวสเล็ตเตอร์ขนาด 5 MB จะโหลดช้าและถูกปิดก่อนที่จะแสดงผลเสร็จ

นับจำนวนรูปภาพก่อนที่จะบีบอัดอะไรก็ตาม นิวสเล็ตเตอร์ที่มีรูปถ่าย 12 รูป ขนาดรูปละ 100 KB จะมีขนาดถึง 1.2 MB แล้ว ซึ่งแสดงว่าเลย์เอาต์ต้องการรูปภาพที่น้อยลงมากกว่ารูปภาพที่มีขนาดเล็กลง การลดจำนวนรูปภาพมักจะช่วยปรับปรุงทั้งประสิทธิภาพและความสามารถในการอ่าน เนื่องจากนิวสเล็ตเตอร์ที่มีรูปภาพจำนวนมากมักจะไม่มีใครอ่านจนจบ

โหมดมืด (Dark mode) เปลี่ยนแปลงรูปลักษณ์ของรูปภาพ

โปรแกรมรับอีเมลหลายตัวกลับสีหรือปรับสีในโหมดมืด และโลโก้บนพื้นหลังสีขาวจะกลายเป็นสี่เหลี่ยมสีสว่างในข้อความสีเข้ม ทดสอบทุกแคมเปญในโหมดมืดก่อนส่ง

ใช้ไฟล์ PNG ที่มีพื้นหลังโปร่งใสสำหรับโลโก้และไอคอน เพื่อให้สามารถวางบนสีใดก็ได้อย่าถูกต้อง หลีกเลี่ยงรูปภาพที่มีพื้นหลังสีขาวในกรณีที่การออกแบบสันนิษฐานว่าหน้าเบื้องหลังก็เป็นสีขาวเช่นกัน รูปถ่ายโดยทั่วไปจะปลอดภัยเนื่องจากโปรแกรมรับอีเมลแทบจะไม่เปลี่ยนแปลงเนื้อหารูปถ่าย ในขณะที่กราฟิกแบบแบนและภาพข้อความคือจุดที่จะเกิดปัญหาในโหมดมืด

หน้าจอเรตินาและความคมชัดของรูปภาพ

ส่งออกที่ความกว้างเป็นสองเท่าของขนาดแสดงผลเพื่อให้รูปภาพคมชัดบนหน้าจอที่มีความหนาแน่นสูง จากนั้นบีบอัดให้หนักขึ้นเพื่อชดเชยพิกเซลที่เพิ่มขึ้น รูปภาพขนาด 1200 พิกเซลที่คุณภาพ 70 มักจะดูดีกว่าและมีขนาดเล็กกว่ารูปภาพขนาด 600 พิกเซลที่คุณภาพ 95

กำหนดแอตทริบิวต์ความกว้างในมาร์กอัปให้เป็นขนาดที่แสดงผลแทนที่จะเป็นขนาดไฟล์ เพื่อให้โปรแกรมรับอีเมลแสดงผลรูปภาพที่ 600 พิกเซลในขณะที่ใช้รายละเอียดส่วนเกิน การละเว้นแอตทริบิวต์ความกว้างจะทำให้โปรแกรมรับอีเมลบางตัวแสดงรูปภาพตามขนาดพิกเซลจริง ซึ่งจะทำให้เลย์เอาต์บนเดสก์ท็อปพัง

การตรวจสอบแคมเปญก่อนส่ง

• ส่งอีเมลทดสอบไปยัง Gmail, Outlook, Apple Mail และโทรศัพท์มือถืออย่างน้อยหนึ่งเครื่อง
• ดูการทดสอบโดยปิดการแสดงรูปภาพ เพื่อยืนยันว่าข้อความยังคงสื่อความหมายได้
• ตรวจสอบว่าข้อความไม่ถูกตัดใน Gmail ซึ่งจะแสดงลิงก์ ดูข้อความทั้งหมด (View entire message) ตรงจุดที่ถูกตัด
• ยืนยันว่าทุกรูปภาพมีข้อความแทนรูปภาพที่อธิบายสิ่งที่แสดงอยู่
• ตรวจสอบการแสดงผลในโหมดมืด โดยเฉพาะสำหรับโลโก้และกราฟิกแบบแบน
• รวมน้ำหนักของรูปภาพทั้งหมดและยืนยันว่ามีขนาดต่ำกว่า 600 KB

การเตรียมแคมเปญในชุดเดียว

ประมวลผลรูปภาพทุกรูปในนิวสเล็ตเตอร์พร้อมกัน เพื่อให้แคมเปญทั้งหมดใช้ข้อกำหนดเดียวกัน นิวสเล็ตเตอร์มักจะมีรูปภาพ 5 ถึง 15 รูป และผู้ส่งรายสัปดาห์จะเตรียมรูปภาพหลายร้อยรูปตลอดทั้งปี

กำหนดความกว้างและเป้าหมาย KB เพียงครั้งเดียว วางรูปภาพลงไป และไฟล์แต่ละไฟล์จะถูกปรับให้ตรงกัน ทุกอย่างทำงานภายในเบราว์เซอร์ของคุณบนโปรเซสเซอร์ของคุณเอง ดังนั้นข้อเสนอที่ยังไม่เปิดเผย รายชื่อผู้รับจดหมายข่าวที่เรนเดอร์เป็นรูปภาพ และงานแคมเปญของลูกค้าจะไม่เคยไปถึงเซิร์ฟเวอร์ สำหรับเอเจนซี่ที่กำลังเตรียมการเปิดตัว การเก็บไฟล์เหล่านี้ไว้ในเครื่องจะช่วยหลีกเลี่ยงการเปิดเผยข้อมูลซึ่งไม่มีการบีบอัดไฟล์ใดจะคุ้มค่ากับความเสี่ยงได้

เก็บบันทึกโฟลเดอร์เทมเพลตของพื้นที่วางรูปภาพที่มีขนาดถูกต้องสำหรับแต่ละบล็อกเลย์เอาต์ที่ใช้ซ้ำ เช่น ส่วนหัว แถวสินค้า 2 คอลัมน์ และโลโก้ส่วนท้าย ผู้ส่งรายสัปดาห์ใช้รูปร่างเดิม 4 หรือ 5 แบบซ้ำไปเรื่อยๆ และการจับคู่งานศิลป์ใหม่ให้เข้ากับข้อกำหนดที่มีอยู่ใช้เวลาน้อยกว่าการตัดสินใจเรื่องขนาดใหม่สำหรับทุกๆ แคมเปญ