ทำความเข้าใจกับภาพ Retina ในอีเมล HTML

นอกเหนือจากการจู่โจมของขนาดหน้าจอแล้ว การปฏิวัติมือถือยังนำเสนอความท้าทายที่น่าสนใจอีกประการหนึ่งสำหรับนักออกแบบอีเมล: การแสดง DPI สูง จอภาพเหล่านี้ ซึ่งมักเรียกกันว่าจอภาพ Retina (คำที่กำหนดโดยเครื่องการตลาดของ Apple) มีพลังในการปรับปรุงแคมเปญอีเมลใดๆ หรือมอบประสบการณ์อีเมลที่น้อยกว่าที่เป็นตัวเอกให้กับสมาชิกของคุณ

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

บิตของประวัติศาสตร์

ย้อนกลับไปในปี 2010 Apple เปิดตัว iPhone 4 ท่ามกลางการปรับปรุงฮาร์ดแวร์อื่นๆ iPhone 4 ให้ความสำคัญกับสิ่งที่ Apple เรียกว่าจอภาพ Retina จอภาพ Retina ของ Apple เป็นจอภาพที่มี DPI สูงหรือจุดต่อนิ้วสูงรุ่นแรกที่ผลิตขึ้นเป็นจำนวนมากสำหรับผู้บริโภค

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

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

ความต้องการภาพเรตินา

การเรียนรู้เพิ่มเติมเกี่ยวกับฮาร์ดแวร์และ DPI เป็นเรื่องที่ดีและดี แต่คุณอาจพบว่าตัวเองกำลังถามว่า:

เจสันเกี่ยวอะไรกับการตลาดผ่านอีเมล

คำถามที่ดี!

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

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

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

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

การใช้ภาพ Retina ในอีเมล

คุณจะปรับแต่งภาพให้เหมาะสมสำหรับหน้าจอเรตินาได้อย่างไร คำตอบปรากฏว่าค่อนข้างง่าย

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

มาดูตัวอย่างกัน

ในอีเมลของเรา เราได้ใส่โลโก้ Litmus ที่ด้านบนสุด เมื่อใช้ HTML จะปรับขนาดให้แสดงที่ 130 x 48 พิกเซล หากเราสร้างและบันทึกภาพโลโก้ในขนาดนั้น สมาชิกจะมองเห็นภาพเบลอบนหน้าจอเรตินา:

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

 <img alt="Litmus" src="[email protected]" width="130" height="48" border="0">

บนจอแสดงผล DPI สูง เราจะได้ภาพเรตินาที่สวยงาม คมชัด

การใช้ภาพ Retina ใน Outlook

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

ในตัวอย่างด้านล่าง เราใช้แอตทริบิวต์ width (ไม่มีแอตทริบิวต์ความสูง) และความกว้างสูงสุดเพื่อให้รูปภาพเรตินาทำงานได้กับไคลเอนต์อีเมลทั้งหมด

 <img alt="Litmus" src="[email protected]" width="600" border="0">

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

ภาพพื้นหลังสามารถเป็นเรตินาได้หรือไม่?

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

สิ่งสำคัญที่ควรทราบคือจะไม่ทำงานทุกที่ (แต่ในอีเมลทำอะไรได้บ้าง) สำหรับรูปภาพพื้นหลังเรตินา คุณควรใช้คุณสมบัติ CSS พื้นหลังแทนแอตทริบิวต์ HTML พื้นหลังบนเซลล์ตาราง

 <td>

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

ข้อควรพิจารณาบางประการ

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

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

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

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

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

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

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

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

รายการโปรดบางส่วนของเรา ได้แก่ ImageOptim, JPEGmini, TinyPNG, Compressor.io, Kraken และ Pied Piper ในกรณีส่วนใหญ่ คุณเพียงแค่ลากและวาง—หรืออัปโหลด—รูปภาพของคุณไปยังโปรแกรมและบีบอัดรูปภาพเหล่านั้น จากนั้น คุณสามารถอัปโหลดภาพที่ปรับให้เหมาะสมเหล่านั้นไปยัง ESP หรือเซิร์ฟเวอร์ของคุณเพื่อรวมไว้ในแคมเปญที่พร้อมใช้เรตินาของคุณ

มันคือโลกเรตินา

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

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

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