ขนาดภาพสินค้า Shopify: 2048 px คือจุดที่ควรหยุด

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

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

เริ่มที่ 2048 x 2048 แล้วหยุดแค่นั้น

คำแนะนำจาก Shopify เองคือ 2048 x 2048 px มักแสดงผลได้ดีที่สุดสำหรับภาพสินค้าทรงจัตุรัส ส่วนเพดานจริง ๆ อยู่สูงกว่านั้นมาก — ภาพสินค้าหรือภาพคอลเลกชันต้องมีขนาดไม่เกิน 20 MB และขึ้นไปได้ถึง 5000 x 5000 px หรือ 25 เมกะพิกเซล

เพดานพวกนั้นไม่ใช่เป้าหมาย ในธีม Dawn แกลเลอรีสินค้าที่ฝังอยู่ในหน้าไม่เคยขอไฟล์จาก CDN ที่กว้างเกิน 1946 px และแม้แต่ไลต์บ็อกซ์สำหรับซูมก็หยุดเรียกขนาดไว้ที่ 4096 px ไฟล์ต้นฉบับ 5000 px ส่วนใหญ่แลกมาด้วยการอัปโหลดที่ช้าลงและการแก้ไฟล์ระหว่างทางที่ช้าลง ยึด 2048 px ทรงจัตุรัสไว้สำหรับแกลเลอรีหลักก็พอ รูปแบบไฟล์ที่อัปโหลดได้มีทั้ง PNG JPEG และ WebP ฉะนั้นส่งไฟล์ที่บีบอัดมาแล้วให้ Shopify ดีกว่ายัด TIFF ขนาด 6 MB เข้าไป

จัตุรัสหรือแนวตั้ง: เลือกอัตราส่วนเดียวแล้วยึดไว้

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

ฉะนั้นตัดสินใจให้จบทีเดียว ทรงจัตุรัส (1:1) เป็นค่าเริ่มต้นที่ปลอดภัยที่สุดและจัดเรียงตัวได้ดีบนหน้าจอแคบ ส่วนอัตราส่วนแนวตั้งอย่าง 4:5 หรือ 2:3 เข้ากับเสื้อผ้าและขวดทรงสูง เพราะกินพื้นที่แนวตั้งบนมือถือได้มากกว่า สิ่งที่ทำไม่ได้คือใช้ทั้งสองแบบปนกันในคอลเลกชันเดียว

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

CDN ของ Shopify ย่อขนาดให้ได้ แต่แก้ไฟล์ต้นทางให้ไม่ได้

ธีมเรียกภาพผ่านฟิลเตอร์ image_url และ image_tag ของ Liquid ซึ่งประกอบ srcset ขึ้นมาให้ CDN ส่งไฟล์ที่ขนาดพอดีและรูปแบบพอดีต่ออุปกรณ์แต่ละเครื่อง นี่คือเหตุผลที่ธีมซึ่งเขียนมาดีจะไม่ยัดไฟล์ 2048 px ของคุณลงมือถือหน้าจอ 390 px

มีสองเรื่องที่มันไม่ครอบคลุม เรื่องแรกคือการเลือกรูปแบบไฟล์ตอนอัปโหลดยังสำคัญอยู่ดี: ส่งออกเป็น WebP ช่วยให้ไฟล์เล็กตั้งแต่ก่อนถึง CDN และ Shopify รับ WebP ตรง ๆ โดยไม่ต้องแปลง เหมือนที่ remover.bg รองรับ WebP ครบวงจร เรื่องที่สองคือพอมี SKU เป็นร้อย ๆ ตัว ก็ไม่มีทางลัดแบบลากทั้งโฟลเดอร์เข้าไป งานแบบนั้นเป็นงานของสคริปต์ที่ยิงเข้า API ลบพื้นหลัง แล้วรันคู่ไปกับการนำเข้า CSV ของคุณ

ซูมช่วยได้ก็ต่อเมื่อมีพิกเซลมากพอ

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

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

ภาพของตัวเลือกสินค้าและลำดับสื่อ

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

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

alt text: ใส่ได้ 512 ตัวอักษร แต่ 125 ก็เหลือเฟือ

Shopify จำกัด alt text ไว้ที่ 512 ตัวอักษร และแนะนำให้อยู่ที่ 125 หรือน้อยกว่า นั่นเป็นแนวทางเรื่องความอ่านง่าย ไม่ใช่ขีดจำกัดของโปรแกรมอ่านหน้าจอ: alt text ยาว ๆ ฟังแล้วเหนื่อย เพราะคนฟังกวาดสายตาข้ามไม่ได้ ให้บรรยายสิ่งที่อยู่ในเฟรม รวมถึงตัวเลือกสินค้าด้วย "เสื้อเชิ้ตลินินสีกรมท่า มุมมองด้านหน้า ติดกระดุม" ดีกว่า "เสื้อเชิ้ต" ข้ามคำว่า "ภาพของ" ไป และข้ามการไล่คีย์เวิร์ดไปด้วย alt text แก้ไขแบบกลุ่มได้ผ่านการอัปโหลด CSV แทนที่จะไล่แก้ทีละสินค้า

เช็กลิสต์สั้น ๆ ก่อนอัปโหลด

ก่อนส่งภาพชุดหนึ่งเข้า Shopify: ส่งออกเป็นทรงจัตุรัสที่ 2048 px เว้นแต่คุณเลือกแนวตั้ง คุมขนาดให้ต่ำกว่าเพดาน 20 MB อยู่มาก ใช้การจัดการพื้นหลังแบบเดียวกันทั้งคอลเลกชัน กำหนดภาพหนึ่งภาพต่อหนึ่งตัวเลือกสินค้าแล้วจัดลำดับแกลเลอรีล้อไปกับมัน และคุม alt text ไว้ไม่ให้เกิน 125 ตัวอักษร ไม่มีข้อไหนดูหรูหราสักข้อ แต่ทุกข้อโผล่ให้เห็นบนหน้าคอลเลกชันทันทีที่คุณทำพลาด