1200 x 628 vs 1200 x 627: ขนาดไหนที่เหมาะสม?

หากคุณเคยพยายามสร้างภาพ link preview คุณอาจเจอปัญหานี้: คู่มืออันหนึ่งบอก 1200 x 628 อีกคู่มือบอก 1200 x 627 เอกสารของ Facebook เองบอก 1200 x 630 และเทมเพลตการออกแบบของคุณตั้งค่าเป็นอย่างอื่นทั้งหมด ทั้งสี่แบบดูเหมือนกัน แล้วแบบไหนที่ถูกต้องจริง ๆ?

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

พวกมันทั้งหมดพยายามกำหนด 1.91:1

โปรโตคอล Open Graph ชุดของแท็ก meta ที่ Facebook, LinkedIn, Slack, iMessage และแพลตฟอร์มอื่น ๆ ส่วนใหญ่อ่านเพื่อสร้าง link preview แนะนำภาพที่มีอัตราส่วนภาพ 1.91:1 เพียงเท่านั้น 1.91 เป็นตัวเลขที่ปัดเศษแล้ว เมื่อบริษัทต่าง ๆ คูณมันออกมา พวกมันจึงตกลงในตำแหน่งที่ต่างกันเล็กน้อย:

• 1200 ÷ 1.91 = 628.27 → ปัดเศษเป็น1200 x 628
• 1200 x 630 = ตรง 1.905:1 → คำแนะนำที่มีเอกสารประกอบของ Facebook
• 1200 x 627 = 1.914:1 → ขนาดที่เผยแพร่มาตั้งนานของ LinkedIn
• 1200 x 625 = ตรง 1.92:1 → ปรากฏในเทมเพลตเก่า

ไม่มีตัวไหนที่ "ผิด" พวกมันเป็นสิ่งประดิษฐ์จากการปัดเศษของข้อกำหนดเดียวกัน Crawlers ไม่ปฏิเสธภาพเพราะห่างออกไปสามพิกเซล พวกมันต้องการให้ไฟล์มีขนาดอย่างน้อย 200 x 200 และในอุดมคติ 1200px กว้างเพื่อให้แสดงผลคมชัดบนหน้าจอความหนาแน่นสูง

ความแตกต่าง 3 พิกเซลสำคัญหรือไม่?

ในทางปฏิบัติ เพียงในสถานการณ์เดียว: การครอบตัดแบบแน่น แพลตฟอร์มไม่แสดงภาพของคุณในขนาดดั้งเดิม พวกมันปรับให้พอดีกับการจัดวางการ์ดที่พวกมันใช้ในเดือนนั้น และขอบจะถูกตัดออก หากข้อความหัวข้อของคุณวิ่งไปจนถึงด้านบนของเฟรม ภาพ 1200 x 628 ที่ครอบตัดเป็นการ์ด 1.78:1 จะตัดมัน และเช่นเดียวกับ 1200 x 630

วิธีแก้ไขไม่ใช่การเลือกจำนวนพิกเซลที่ "ถูกต้อง" มันคือการปล่อยขอบเขตความปลอดภัย: เก็บโลโก้และข้อความไว้ภายใน ~90% ของบริเวณแคนวาส และไม่มีสิ่งสำคัญอยู่ห่างจากขอบใด ๆ 60 พิกเซล จากนั้นจริง ๆ แล้วไม่สำคัญว่าคุณจะส่งออกขนาดใดจากสามขนาดนั้น

วิธีสร้างภาพเดียวที่ใช้ได้ทุกแพลตฟอร์ม

คำแนะนำของฉัน: สร้างที่1200 x 630 มันเป็นขนาดที่มีเอกสารประกอบของ Facebook มันอยู่ใกล้เคียงกับ 1.91:1 และมันเป็นเลขคู่ ซึ่งหลีกเลี่ยงการแสดงผล half-pixel แปลกในบางตัวแก้ไข จากนั้นใช้ไฟล์เดียวกันนั้นอีกครั้งสำหรับ LinkedIn, Slack, Discord และแท็ก Open Graph โดยทั่วไป

หากคุณมีภาพที่มีขนาดผิด นี่คือวิธีที่รวดเร็วในการแก้ไขโดยไม่ต้องติดตั้งอะไร:

1. เปิดเครื่องมือครอบตัดและครอบตัดรูปถ่ายต้นฉบับของคุณให้เป็นรูปร่าง 1.91:1 ประมาณก่อน นี่คือขั้นตอนที่ผู้คนข้าม หากคุณข้ามไปยังการปรับขนาด รูปถ่าย 4:3 จะถูกบีบและใบหน้าจะดูผิดปกติ
2. นำไฟล์ที่ครอบตัดไปยังเครื่องมือปรับขนาดและตั้งค่าเป็น 1200 x 630 (หรือ 628 หรือ 627 เลือกอันใดอันหนึ่งและจบ)
3. ส่งออกเป็น JPG สำหรับรูปถ่าย PNG เฉพาะในกรณีที่คุณต้องการข้อความที่คมชัดหรือความโปร่งใสด้านหลังโลโก้ ตัวแปลงรูปภาพจัดการสวิตช์นั้นหากต้นฉบับของคุณเป็น PNG, WebP หรือ HEIC

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

ดูขนาดไฟล์เช่นกัน

แพลตฟอร์มมีขีดจำกัดการอัปโหลดและการดึงข้อมูล Facebook จำกัดรูปภาพ Open Graph ที่ 8MB และบาง crawlers เงียบ ๆ ยอมแพ้สิ่งใดที่ช้าในการดาวน์โหลด JPG 1200 x 630 ควรตกลงอย่างสะดวกระหว่าง 100KB ถึง 300KB หากส่งออก PNG ขนาดหลายเมกะไบต์ ให้ใช้ผ่านตัวบีบอัดก่อน ไฟล์ที่เล็กกว่ายังหมายความว่า preview จริง ๆ ปรากฏแทนที่จะแสดงการ์ดว่างขณะที่ crawler หมดเวลา

หากตัวอย่างยังแสดงภาพเก่า

นี่เกือบจะไม่ใช่ปัญหาการปรับขนาด Facebook, LinkedIn และ Twitter แคชไพรวิวที่สกัดมาอย่างหนัก หลังจากแทนที่ไฟล์ ให้รัน URL ผ่านตัวดีบักของแพลตฟอร์ม (Facebook Sharing Debugger, LinkedIn Post Inspector) เพื่อบังคับให้มีการสกัดซ้ำ การเปลี่ยนภาพของคุณจาก 1200 x 627 เป็น 1200 x 628 จะไม่แก้ไขตัวอย่างที่แคช เฉพาะการล้างแคชเท่านั้น

เพราะฉะนั้น: หยุดทำให้ตัวเองเครียดเกี่ยวกับพิกเซลสุดท้าย เลือก 1200 x 630 เก็บข้อความของคุณห่างจากขอบ เก็บไฟล์ไว้ต่ำกว่าสองสามร้อย KB และคุณก็จะอุดหนุนบนทุกแพลตฟอร์มที่อ่านแท็ก Open Graph