Shopify ให้พื้นที่อัปโหลดมากกว่ามาร์เก็ตเพลสไหน ๆ — 5000×5000 พิกเซล ไฟล์ละ 20 MB รองรับหลายฟอร์แมต อิสระนี้ก็คือกับดักในตัวเอง ผู้ขายอัปโหลดภาพที่ได้จากกล้องตรง ๆ ธีมก็ครอปภาพในแบบที่ไม่ได้คาดคิด ผู้เข้าชมมือถือต้องรอภาพ hero นานถึงสี่วินาที และอัตราการออกจากหน้าเว็บก็เพิ่มขึ้นเงียบ ๆ บทความนี้ตอบสิบคำถามที่ผู้ขาย Shopify ถามกันจริง ๆ เกี่ยวกับภาพสินค้า — สเปก ธีม ประสิทธิภาพ SEO และตัวเลือกสินค้า (variant) — พร้อมตัวเลขที่คุณต้องใช้ในการตัดสินใจ
ภาพสินค้า Shopify ควรมีขนาดเท่าไหร่?
อัปโหลดที่ 2048×2048 พิกเซล แบบสี่เหลี่ยมจัตุรัส นี่คือตัวเลขที่เอกสารทางการของ Shopify ระบุว่าเป็นขนาดมาสเตอร์ที่แนะนำ และเป็นขนาดที่ทุกธีมหลักออกแบบมารองรับ
| บทบาทของภาพ | ขนาดที่แนะนำ | สัดส่วน | เหตุผล |
|---|---|---|---|
| ภาพสินค้า (มาสเตอร์) | 2048×2048 px | 1:1 | รองรับซูม + จอ Retina |
| ภาพสินค้า (ต่ำสุด) | 800×800 px | 1:1 | ต่ำกว่านี้ซูมจะไม่ทำงาน |
| ภาพคอลเลกชัน | 1024×1024 px | 1:1 | กริดแสดงผลของธีม |
| Hero / แบนเนอร์ | 1920×1080 px | 16:9 | เต็มความกว้างเดสก์ท็อป |
| สไลด์โชว์ | 1600×500 ถึง 1920×600 px | 3:1 ถึง 4:1 | ขึ้นกับธีม |
| โลโก้ | 450×200 px | ~2:1 | แสดงผลที่ส่วนหัว |
| Favicon | 32×32 px | 1:1 | แท็บเบราว์เซอร์ |
เพดานการอัปโหลด: 5000×5000 px, 20 MB เกินกว่านี้ถูกปฏิเสธ แต่ "อัปโหลดได้" กับ "ควรอัปโหลด" คือคนละเรื่อง — ดูหัวข้อขนาดไฟล์ด้านล่าง
ขนาดไฟล์เท่าไหร่ถึงรักษาให้หน้าเว็บเร็ว?
คำแนะนำของ Shopify เองระบุเป้าใช้งานที่ 200–500 KB ต่อภาพสินค้า และร้านที่มีสัดส่วนทราฟฟิกมือถือสูงควรเล็งไว้ที่ 200–300 KB
ทำไมถึงสำคัญ: ทุก ๆ 100 KB ของขนาดไฟล์ จะเพิ่มเวลาโหลดราว 150-300 มิลลิวินาทีบนการเชื่อมต่อมือถือ 4G หน้าสินค้าที่มี 10 ภาพ ภาพละ 2 MB จะมีเพย์โหลดรวม 20 MB — นั่นคือเวลาโหลดเกิน 30 วินาทีบนเครือข่ายมือถือที่ช้ากว่า ซึ่งข้อมูล telemetry ของ Shopify พบว่ามีความสัมพันธ์สูงกับการทิ้งตะกร้า
| ขนาดไฟล์ | เวลาโหลด (4G) | ผลที่เกิดขึ้น |
|---|---|---|
| <200 KB | <1 วินาที | เร็ว ไม่รู้สึกหน่วง |
| 200–500 KB | 1–2 วินาที | รับได้สำหรับภาพ hero/สินค้า |
| 500 KB–1 MB | 2–4 วินาที | รู้สึกหน่วง เสี่ยงออกจากหน้า |
| >1 MB | >4 วินาที | คนมือถือออกจากหน้าเยอะ |
Shopify จะบีบอัดและส่งไฟล์ WebP อัตโนมัติ แต่ก็ต่อเมื่อต้นฉบับของคุณถูกปรับให้เหมาะสมแล้ว ถ้าคุณอัปโหลด PNG ขนาด 15 MB Shopify ก็จะบีบอัดให้ แต่การบีบอัดอัตโนมัตินั้นระมัดระวัง — คุณจะได้ผลดีกว่ามากถ้าบีบอัดเป็น JPEG คุณภาพ 80-85 ก่อนอัปโหลด
ควรใช้ JPEG, PNG, WebP หรือ SVG?
การเลือกฟอร์แมตขึ้นกับประเภทของภาพ
| ฟอร์แมต | ใช้สำหรับ | หลีกเลี่ยงสำหรับ | หมายเหตุ |
|---|---|---|---|
| JPEG | ภาพถ่ายสินค้า ภาพไลฟ์สไตล์ | ภาพที่ต้องการพื้นหลังโปร่งใส | คุณภาพ 80-85 คือจุดลงตัว |
| PNG | โลโก้ ไอคอน อินโฟกราฟิกที่ต้องการโปร่งใส | ภาพถ่าย (ไฟล์ใหญ่เกินจำเป็น) | ใช้เมื่อจำเป็นต้องมี alpha channel เท่านั้น |
| WebP | ทุกกรณี (ถ้าคุณเอ็กซ์พอร์ตได้) | เบราว์เซอร์เก่า (ไม่ค่อยเจอปัญหาในปี 2026) | เล็กกว่า JPEG 25-35% ที่คุณภาพเท่ากัน |
| SVG | ไอคอน โลโก้ กราฟิกง่าย ๆ | ภาพถ่ายสินค้า | ขยายได้ไม่จำกัด ขนาดไฟล์เล็กมาก |
| GIF | เดโมแอนิเมชัน (ใช้อย่างประหยัด) | กรณีอื่น | ใช้ MP4/WebM สำหรับแอนิเมชันแทน |
Shopify จะเสิร์ฟไฟล์ WebP ให้เบราว์เซอร์ที่รองรับโดยอัตโนมัติ ไม่ว่าคุณจะอัปโหลดฟอร์แมตอะไร — ดังนั้นไม่ต้องกังวลเรื่องฟอร์แมตตอนอัปโหลด ให้โฟกัสว่าไฟล์ต้นทางคุณภาพสูงและอยู่ภายใต้เป้าหมายขนาดไฟล์ JPEG คุณภาพ 85 คือค่าเริ่มต้นที่ปลอดภัยสำหรับการถ่ายภาพสินค้า
จำเป็นต้องใช้ภาพสี่เหลี่ยมจัตุรัสบน Shopify ไหม?
ไม่จำเป็น — แต่ก็ควรใช้ ธีม Shopify ส่วนใหญ่ตั้งกริดแสดงผลเป็นสี่เหลี่ยมจัตุรัสโดยปริยาย และภาพที่ไม่ใช่สี่เหลี่ยมจะถูกครอป ถ้าธีมคาดว่าเป็น 1:1 แล้วคุณอัปโหลด 4:3 ก็อาจตัดส่วนบนหรือล่างของสินค้าออก หรือภาพจะลอยอยู่ในกรอบขาวที่ดูไม่เข้ากับภาพอื่น
เมื่อไหร่ที่สี่เหลี่ยมจัตุรัสใช้ได้ดี: กริดสินค้าเริ่มต้น หน้าคอลเลกชัน ผลการค้นหา คารูเซลสินค้าที่เกี่ยวข้อง ซึ่งครอบคลุมการใช้งาน 90% ของกรณีทั่วไป
เมื่อไหร่ที่คุณอาจเลือกแนวตั้ง (3:4 หรือ 4:5): ร้านแฟชั่นที่เน้นภาพเต็มตัวบนนางแบบ ที่ซึ่งการจัดองค์ประกอบแนวตั้งมีความสำคัญ สิ่งนี้ต้องใช้ธีมที่ออกแบบมาเพื่อสัดส่วนแนวตั้งโดยเฉพาะ (Dawn พร้อมการตั้งค่าที่เหมาะสม, Impact, Impulse) — อย่าฝืนใช้ภาพแนวตั้งบนธีมที่ตั้งค่าเริ่มต้นเป็นสี่เหลี่ยมจัตุรัส
เมื่อไหร่ที่แนวนอน (16:9) เหมาะสม: แบนเนอร์ hero ภาพไลฟ์สไตล์ที่ใช้เป็นภาพรอง ห้ามใช้เป็นภาพสินค้าหลักบนธีมที่ใช้กริดสี่เหลี่ยมจัตุรัส
ขั้นตอนที่ปลอดภัย: ถ่ายให้กว้างกว่าที่ต้องการ ครอปเป็น 2048×2048 สี่เหลี่ยมจัตุรัสสำหรับภาพสินค้ามาสเตอร์ จากนั้นสร้างเวอร์ชัน 2048×2048 เพิ่มเติมสำหรับมุมอื่น ใช้องค์ประกอบแนวนอนเฉพาะในแบนเนอร์และสไลด์โชว์เท่านั้น
ธีม Shopify ส่งผลต่อการแสดงภาพอย่างไร?
ทุกธีมครอปและปรับขนาดภาพต่างกัน — นี่คือสาเหตุอันดับหนึ่งของคำบ่น "ทำไมภาพสินค้าของฉันดูแย่บนเว็บของฉัน" ก่อนตัดสินใจสเปกภาพขั้นสุดท้าย ทดสอบบนธีมที่คุณใช้จริง
| ธีม | การครอปหน้าสินค้า | กริดคอลเลกชัน | หมายเหตุ |
|---|---|---|---|
| Dawn (ค่าเริ่มต้น Shopify) | ปรับได้ (สี่เหลี่ยม แนวตั้ง แนวนอน หรือขนาดธรรมชาติ) | ตรงกับการตั้งค่าในหน้าสินค้า | ยืดหยุ่นที่สุด |
| Debut | บังคับเป็นสี่เหลี่ยมจัตุรัส | สี่เหลี่ยมจัตุรัส | แสดงผล 1:1 แบบเคร่งครัด |
| Impact | รองรับแนวตั้งได้ดี | ปรับได้ | เหมาะกับแฟชั่น |
| Motion | เต็มหน้า ควบคุมโดยธีม | แบบการ์ด | มีแอนิเมชันเยอะ |
| Minimal | จัดกลางพร้อม padding | สี่เหลี่ยมจัตุรัส | เพิ่มพื้นที่ขาวถ้าภาพไม่ใช่สี่เหลี่ยม |
การทดสอบเชิงปฏิบัติ: หลังอัปโหลด ให้ดูหน้าสินค้าและหน้าคอลเลกชันทั้งบนเดสก์ท็อปและมือถือ ถ้าการครอปสินค้าดูไม่ถูกต้อง แก้ที่ภาพต้นฉบับ — อย่าพึ่งการปรับ CSS ของธีม เพราะมันจะพังเวลาอัปเดตธีม
เทียบกับ Amazon และ eBay เป็นอย่างไร?
ถ้าคุณขายบนหลายแพลตฟอร์มจากคลังภาพสินค้าเดียวกัน สเปกจะต่างกันในจุดสำคัญ
| สเปก | Shopify | Amazon | eBay |
|---|---|---|---|
| ขนาดที่แนะนำ | 2048×2048 px | 2000×2000 px | 1600×1600 px |
| ขนาดต่ำสุด | 800×800 px | 1000×1000 px (รองรับซูม) | 500×500 px |
| ขนาดสูงสุด | 5000×5000 px, 20 MB | ด้านยาวที่สุด 10000 px | 7 MB |
| สัดส่วน | ยืดหยุ่นตามธีม | ต้องเป็น 1:1 | แนะนำ 1:1 |
| พื้นหลัง | เลือกได้อิสระ | ขาวบริสุทธิ์ (ภาพหลัก) | สะอาด ไม่จำเป็นต้องขาว |
| โลโก้/ลายน้ำ | อนุญาต | ห้ามบนภาพหลัก | ห้ามบนภาพหลัก |
| ข้อความซ้อนภาพ | อนุญาต | ห้ามบนภาพหลัก อนุญาตบนภาพรอง | จำกัดบนภาพหลัก |
| ฟอร์แมตไฟล์ | JPEG, PNG, WebP, GIF, SVG | JPEG, PNG, TIFF, GIF | JPEG, PNG, GIF, BMP, TIFF |
ผลในเชิงปฏิบัติ: ภาพเดียวที่ผ่านมาตรฐาน Amazon (2000×2000 พื้นหลังขาวบริสุทธิ์ ไม่มีข้อความ) ใช้ได้ทุกที่ แต่จะดูเรียบเกินไปบน Shopify ที่ภาพไลฟ์สไตล์และอินโฟกราฟิกแปลงยอดได้ดีกว่า ให้สร้างคลังภาพของคุณด้วยภาพมาสเตอร์พื้นหลังสะอาด 2048×2048 แล้วจึงซ้อนเวอร์ชันอื่นทับลงไป
ควรเขียน Alt Text อย่างไรเพื่อ SEO?
Alt text ใช้ให้บริการผู้ใช้สามกลุ่ม: โปรแกรมอ่านหน้าจอ การค้นหารูปภาพของ Google และทางสำรองเมื่อภาพเสีย เขียนเพื่อสองกลุ่มแรก — กลุ่มที่สามจะดูแลตัวเองได้
สูตร Alt text ที่ดี: [ชื่อสินค้า] [คุณลักษณะสำคัญ] [บริบทเพิ่มเติมถ้าเกี่ยวข้อง]
| ประเภทของภาพ | Alt text อ่อน | Alt text ที่ดี |
|---|---|---|
| สินค้าหลัก | "แก้วขาว" | "แก้วกาแฟเซรามิกสีขาว 12 ออนซ์ ผิวด้าน" |
| ตัวเลือกสี | "รุ่นสีแดง" | "แก้วกาแฟเซรามิกสีแดง 12 ออนซ์ ผิวด้าน" |
| ภาพไลฟ์สไตล์ | "แก้วบนโต๊ะ" | "แก้วเซรามิกสีขาวบนโต๊ะไม้มื้อเช้าพร้อมกาแฟยามเช้า" |
| ภาพโคลสอัพ | "โคลสอัพ" | "ภาพโคลสอัพแก้วเซรามิกสีขาวผิวด้าน แสดงเนื้อสัมผัสของหูจับ" |
| อินโฟกราฟิก | "แผนภาพ" | "อินโฟกราฟิกแสดงขนาดแก้วกาแฟ สูง 3.5 นิ้ว เส้นผ่านศูนย์กลาง 4 นิ้ว" |
กฎ:
- ไม่เกิน 125 ตัวอักษร (โปรแกรมอ่านหน้าจอตัดที่ความยาวนี้)
- ใส่คีย์เวิร์ดหลักอย่างเป็นธรรมชาติ อย่ายัดคีย์เวิร์ด
- อธิบายสิ่งที่เห็นจริง ไม่ใช่คัดลอกชื่อสินค้า
- Alt text ต่างกันสำหรับแต่ละภาพของสินค้าเดียวกัน (ไม่ใช่ซ้ำกันหมด)
- ข้ามวลีอย่าง "ภาพของ" หรือ "รูปของ" — เทคโนโลยีช่วยเหลือจะเพิ่มให้อัตโนมัติ
จัดการภาพตัวเลือกสินค้า (สี ขนาด สไตล์) อย่างไร?
Shopify ช่วยให้คุณกำหนดภาพให้ตัวเลือกสินค้าแต่ละแบบได้ จุดนี้คือจุดที่ร้านส่วนใหญ่ทำได้ไม่ดีพอ
การตั้งค่าขั้นต่ำที่ใช้ได้: ภาพหนึ่งรูปต่อหนึ่งตัวเลือกสี แสดงสีนั้นจริง ๆ นี่คือสิ่งที่ลูกค้าคาดหวัง — กด "สีแดง" ต้องเห็นสินค้าสีแดง ไม่ใช่สีขาว
การตั้งค่าที่ดีกว่าสำหรับแฟชั่นและของใช้ในบ้าน:
- ภาพหลักของตัวเลือก: สินค้ามุมเดียวกัน แสงเดียวกัน จัดวางแบบเดียวกัน ทุกสี (เพื่อเปรียบเทียบเชิงสายตาได้ง่าย)
- ภาพไลฟ์สไตล์รอง: สินค้าขณะใช้งาน ย้อมสีให้ตรงกับตัวเลือก
- ภาพรายละเอียด: โคลสอัพแสดงสี/เนื้อสัมผัสที่ตรงจริง
ตัวเลือกขนาดไม่ต้องมีภาพแยก ยกเว้นสินค้ามีหน้าตาต่างกันชัดในแต่ละขนาด (เช่น กระเป๋าใบเล็กกับใบใหญ่ที่สัดส่วนต่างกัน) สำหรับเสื้อผ้า ภาพใส่จริงชุดเดียวกับตารางขนาดก็เพียงพอ
ความแม่นยำของสีสำคัญมาก: ผู้ซื้อคาดหวังให้ภาพตัวเลือกตรงกับสิ่งที่เห็นบนหน้าจอจริง ถ้าแสงสตูดิโอของคุณทำให้สีเพี้ยน ให้แก้ไขใน post ก่อนอัปโหลด การคืนสินค้าที่เกิดจากสีมักมาจากความไม่ตรงกันระหว่างภาพกับของจริงในตัวเลือกสี
ความเร็วของหน้าเว็บและขนาดภาพส่งผลต่อการแปลงยอดจริงไหม?
ใช่ วัดได้จริง ข้อมูล Core Web Vitals ของ Google และงานศึกษาเปรียบเทียบอีคอมเมิร์ซแสดงตรงกันว่า:
- LCP (Largest Contentful Paint) ต่ำกว่า 2.5 วินาที: เกณฑ์พื้นฐานสำหรับอันดับที่ดี
- LCP ระหว่าง 2.5-4 วินาที: เมตริก engagement ลดลงอย่างมีนัยสำคัญ
- LCP เกิน 4 วินาที: อัตราการออกจากหน้าสูงมากบนมือถือ
ภาพสินค้า hero มักเป็น element ที่วัดเป็น LCP ในหน้าสินค้า ลดขนาดลง 500 KB จะทำให้ LCP ลดลง 200-500 มิลลิวินาทีบนมือถือ 4G และผลสะสมต่อทั้ง session
| การปรับปรุงความเร็วหน้าเว็บ | ผลต่อการแปลงยอดโดยทั่วไป |
|---|---|
| 1 วิ → 2 วิ | เส้นฐาน ไม่มีผล |
| 3 วิ → 2 วิ | การแปลงยอด +3-7% |
| 5 วิ → 2 วิ | การแปลงยอด +10-15% บนมือถือ |
| 8 วิ → 3 วิ | การแปลงยอด +25-30% บนมือถือ |
นี่คือเหตุผลว่าทำไมเป้าขนาดไฟล์ 200-500 KB จึงสำคัญกว่าที่รู้สึก สิบภาพภาพละ 500 KB คือหน้า 5 MB สิบภาพภาพละ 2 MB คือหน้า 20 MB — ความต่างสัมผัสได้กับผู้ใช้มือถือทุกคน
เช็คลิสต์ก่อนอัปโหลด
ตรวจสอบตามนี้ก่อนเพิ่มภาพเข้าไปในสินค้าใด ๆ:
- ขนาดมาสเตอร์ 2048×2048 พิกเซล (หรือ 2000×2000 ถ้าขายหลายช่อง)
- สัดส่วนสี่เหลี่ยมจัตุรัสตรงกับกริดเริ่มต้นของธีม
- เอ็กซ์พอร์ตเป็น JPEG คุณภาพ 80-85 (หรือ WebP คุณภาพ 80)
- ขนาดไฟล์ระหว่าง 200-500 KB ต่อภาพ
- ชื่อไฟล์สื่อความหมาย:
ชื่อสินค้า-สี-มุม.jpg(ไม่ใช่IMG_4821.jpg) - เขียน Alt text ให้แต่ละภาพ ไม่เกิน 125 ตัวอักษร
- สีตรงกับของจริง (ตรวจบนจอที่สอบเทียบสีแล้ว)
- กำหนดภาพตัวเลือกถูกต้องใน Shopify admin
- ตรวจพรีวิวบนเดสก์ท็อปและมือถือหลังอัปโหลด
- ทดสอบการครอปในธีมที่คุณใช้จริง
คำถามที่พบบ่อย
Shopify บีบอัดภาพของฉันอัตโนมัติหรือเปล่า?
ใช่ Shopify เสิร์ฟเวอร์ชันที่เพิ่มประสิทธิภาพผ่าน CDN มักเป็น WebP สำหรับเบราว์เซอร์ที่รองรับ และขนาดเหมาะกับ viewport แต่การบีบอัดเป็นแบบ lossy ซ้อนจากไฟล์ที่คุณอัปโหลด — ต้นฉบับที่ถูกปรับมาก่อนจะให้ผลดีกว่าพึ่งการบีบอัดอัตโนมัติเสมอ
ใช้ภาพสินค้าเดียวกันบน Shopify และ Amazon ได้ไหม?
ภาพสินค้าหลัก — ใช่ ภาพขนาด 2000×2000 พื้นหลังขาวบริสุทธิ์ใช้ได้ทั้งสอง แต่ภาพรองมักต้องต่างกัน: Amazon ห้ามโลโก้และข้อความซ้อนส่วนใหญ่บนภาพหลัก และมีกฎเข้มกว่าสำหรับภาพรอง ส่วน Shopify เปิดกว้างทั้งหมด แยกโฟลเดอร์ติดแท็กตามช่องทางไว้จะดีที่สุด
แบนเนอร์ hero หน้าแรกขนาดที่เหมาะสมคือเท่าไหร่?
1920×1080 พิกเซลคือค่าปลอดภัย ธีมบางตัวรองรับ 2400×1200 สำหรับจอ ultra-wide ควรใส่ครอปมือถือเฉพาะไว้ด้วย (1080×1080 หรือ 1080×1350) — ผู้ใช้มือถือควรเห็นครอปที่โฟกัสสินค้าชัด ไม่ใช่เห็นแค่เสี้ยวกลางของแบนเนอร์เดสก์ท็อป
ควรมีภาพต่อสินค้ากี่ภาพ?
เจ็ดถึงแปดภาพคือจุดลงตัวสำหรับหมวดหมู่ส่วนใหญ่: หลักพื้นหลังขาว มุมเพิ่มอีก 2-3 ภาพ ไลฟ์สไตล์/ใช้งานจริง 1-2 ภาพ อ้างอิงสเกล/ขนาด 1 ภาพ อินโฟกราฟิก 1 ภาพ ต่ำกว่าสี่ภาพดูเหมือนลิสต์ยังไม่เสร็จ มากกว่าสิบภาพมักเพิ่ม noise โดยไม่ช่วยแปลงยอด
ทำไมภาพสินค้าของฉันดูเบลอบนมือถือ?
สาเหตุที่พบบ่อยสามอย่าง: (1) ภาพต้นฉบับเล็กกว่า 2048 px และถูกยืด (2) ธีมเสิร์ฟเวอร์ชันที่บีบอัดหนักเพราะไฟล์ต้นฉบับใหญ่เกิน (3) จอ Retina บนมือถือเรนเดอร์ต่างจากเดสก์ท็อป — ภาพที่ดูคมชัดบนเดสก์ท็อปอาจดูเบลอบนจอมือถือ 3x วิธีแก้: อัปโหลดต้นฉบับ 2048×2048 ที่คมชัด ปล่อยให้ Shopify จัดการย่อขนาด