ขนาดรูป Shopify และเหตุผลที่ควรต่ำกว่า 500 KB

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

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

ขนาดรูปภาพ Shopify ตามตำแหน่งการแสดงผล

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

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

ทำไม 500 KB ถึงเป็นตัวเลขที่สำคัญ

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

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

Shopify ช่วยบีบอัดรูปภาพให้คุณหรือไม่

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

ประเด็นหลังนี้คือข้อจำกัด Shopify สร้างไฟล์ขนาดเล็กกว่าจากต้นฉบับของคุณ ดังนั้นการอัปโหลดไฟล์ 5 MB ที่ผ่านการบีบอัดมาไม่ดี จะทำให้ได้ไฟล์ขนาดใหญ่กว่าการอัปโหลดไฟล์ขนาด 400 KB ที่เตรียมมาเป็นอย่างดี การบีบอัดภาพก่อนอัปโหลดช่วยลดการใช้พื้นที่จัดเก็บของคุณเอง และทำให้การนำเข้าข้อมูลจำนวนมาก (Bulk Import) รวดเร็วขึ้นอย่างมาก เนื่องจากสินค้า 500 รายการจะใช้เวลาโอนย้ายข้อมูลเพียง 200 MB แทนที่จะเป็น 2.5 GB

วิธีเตรียมรูปภาพสำหรับ Shopify

เพื่อให้ได้หน้าสินค้าที่โหลดเร็ว ให้ทำตาม 6 ขั้นตอนเหล่านี้

1. ส่งออกภาพต้นฉบับรูปทรงจัตุรัสขนาด 2048 คูณ 2048 พิกเซลจากโปรแกรมแต่งภาพของคุณ
2. ปรับขนาดแบนเนอร์หรือภาพไลฟ์สไตล์ให้ตรงกับความกว้างในการแสดงผลจริง และคูณสองสำหรับหน้าจอความหนาแน่นสูง
3. แปลงรูปถ่ายเป็น WebP หรือใช้ JPG ต่อไปหากขั้นตอนการทำงานของคุณรองรับ เนื่องจาก Shopify สามารถแปลงได้ทั้งสองแบบ
4. บีบอัดให้ได้ขนาดเป้าหมาย โดยใช้ 300 KB สำหรับภาพถ่ายสินค้า และ 400 KB สำหรับแบนเนอร์
5. ตั้งชื่อไฟล์ตามรหัสสินค้าและมุมมอง เพื่อให้การนำเข้า CSV แบบกลุ่มสามารถจับคู่รูปภาพกับสินค้าได้อย่างถูกต้อง
6. อัปโหลดและตรวจสอบหน้าสินค้าบนโทรศัพท์มือถือแทนที่จะดูแค่จากตัวอย่างบนคอมพิวเตอร์

ไฟล์ WebP บน Shopify

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

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

การแก้ไขปัญหาหน้าสินค้าที่โหลดช้า

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

• ปรับขนาดก่อนทำการบีบอัด แบนเนอร์ขนาด 4000 พิกเซลในช่องแสดงผลขนาด 1920 พิกเซล ทำให้สูญเสียข้อมูลไปถึง 75 เปอร์เซ็นต์โดยเปล่าประโยชน์
• ลดจำนวนรูปภาพที่อยู่เหนือเส้นพับหน้าจอ (Above the fold) แกลเลอรีที่มีรูปภาพ 12 รูปโหลดพร้อมกันจะทำให้ทุกอย่างช้าลง
• ตรวจสอบว่าได้เปิดใช้งานการโหลดภาพแบบขี้เกียจ (Lazy loading) สำหรับรูปภาพที่อยู่ต่ำกว่าเส้นพับหน้าจอ ซึ่งธีมสมัยใหม่ส่วนใหญ่ตั้งค่านี้มาให้เป็นค่าเริ่มต้น
• แทนที่ไฟล์ GIF แบบเคลื่อนไหวด้วยวิดีโอ เนื่องจากไฟล์ GIF สั้นๆ มักจะมีขนาดใหญ่กว่าน้ำหนักรวมของหน้าเว็บส่วนที่เหลือทั้งหมด
• ตรวจสอบแอปพลิเคชันต่างๆ วิดเจ็ต ป๊อปอัป และป้ายความน่าเชื่อถือ มักจะโหลดรูปภาพและสคริปต์ของตัวเองเข้ามาด้วย

ข้อความอธิบายรูปภาพ (Alt Text) และชื่อไฟล์รูปภาพ

เขียน Alt Text อธิบายตัวสินค้าสำหรับผู้ซื้อที่ใช้โปรแกรมอ่านหน้าจอ และตั้งชื่อไฟล์ตามชื่อสินค้าแทนที่จะใช้ชื่อจากกล้อง ไฟล์ชื่อ IMG_4821.jpg ไม่ได้ให้ข้อมูลอะไรเลยกับเครื่องมือค้นหาและลูกค้า

ใช้รูปแบบเช่น navy-linen-shirt-front.jpg ซึ่งยังคงอ่านเข้าใจได้ง่ายในการนำเข้าข้อมูลแบบกลุ่ม สามารถจัดเรียงในโฟลเดอร์ได้อย่างเป็นระเบียบ และอธิบายรูปภาพในผลการค้นหาได้ ข้อความ Alt Textควรอธิบายสิ่งที่ปรากฏในภาพ รวมถึงสี วัสดุ และมุมมอง โดยไม่ต้องทำซ้ำชื่อสินค้าคำต่อคำ ทั้งสองช่องนี้ใช้เวลาเพียงไม่กี่วินาทีต่อสินค้าหนึ่งชิ้น แต่ช่วยปรับปรุงการแสดงผลของร้านค้าในผลการค้นหารูปภาพได้อย่างมาก

การทดสอบการเปลี่ยนแปลงก่อนนำไปใช้งานจริง

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

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

การใช้แอปบีบอัดรูปภาพเทียบกับการจัดการก่อนอัปโหลด

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

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

ข้อผิดพลาดเกี่ยวกับรูปภาพ Shopify ที่พบบ่อย

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

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

การรักษาความสม่ำเสมอของแคตตาล็อก

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

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

การประมวลผลแคตตาล็อกในครั้งเดียว

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

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