การอัปโหลดรูปภาพ

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

หากต้องการแสดงรูปภาพในร้านค้าออนไลน์ของคุณให้เป็นไปตามที่คุณต้องการ คุณจำเป็นต้องใช้อัตราส่วนภาพของรูปภาพที่ถูกต้อง รูปภาพจะได้รับการปรับให้เหมาะสมกับหน้าร้านของคุณโดยอัตโนมัติด้วย Shopify Content Delivery Network (CDN)

อัปโหลดรูปภาพในตัวแก้ไขธีม

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

ขั้นตอน

การเพิ่มรูปภาพโดยใช้เมตาฟิลด์

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

การกำหนดจุดโฟกัสบนรูปภาพ

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

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

ความเข้ากันได้ของจุดโฟกัสกับธีมฟรีของ Shopify

คุณสามารถกำหนดจุดโฟกัสได้บนธีมฟรีของ Shopify เวอร์ชันต่อไปนี้

• ธีมทั้งหมดในตระกูล Horizon
• Colorblock เวอร์ชัน 3.0.0 ขึ้นไป
• Craft เวอร์ชัน 5.0.0 ขึ้นไป
• Crave เวอร์ชัน 5.0.0 ขึ้นไป
• Dawn เวอร์ชัน 7.0.0 ขึ้นไป
• Origin เวอร์ชัน 1.0.0 ขึ้นไป
• Publisher เวอร์ชัน 1.0.0 ขึ้นไป
• Refresh เวอร์ชัน 2.0.0 ขึ้นไป
• Ride เวอร์ชัน 3.0.0 ขึ้นไป
• Rise เวอร์ชัน 1.0.0 ขึ้นไป
• Sense เวอร์ชัน 5.0.0 ขึ้นไป
• Spotlight เวอร์ชัน 0.0.1 ขึ้นไป
• Studio เวอร์ชัน 4.0.0 ขึ้นไป
• Taste เวอร์ชัน 4.0.0 ขึ้นไป
• Trade เวอร์ชัน 1.0.0 ขึ้นไป

หากคุณใช้ธีมภายนอก ให้ตรวจสอบเอกสารประกอบของธีมของคุณเพื่อดูว่าธีมของคุณรองรับการใช้จุดโฟกัสหรือไม่

เพิ่มจุดโฟกัสไปยังรูปภาพ

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

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

ขั้นตอน

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

ลบจุดโฟกัสออกจากรูปภาพ

ขั้นตอน

1. คลิกรูปภาพจากตำแหน่งที่ตั้งใดก็ได้ต่อไปนี้ในส่วนผู้ดูแล Shopify ของคุณ
   • ในส่วนเนื้อหา > ไฟล์
   • ในเครื่องมือแก้ไขธีม
   • ในส่วนสื่อของรายการสินค้าของคุณในส่วน สินค้า
   • ในเครื่องมือแก้ไขอีเมลของ Shopify Messaging
   • ในส่วนเมตาฟิลด์ของทรัพยากรใดๆ ที่มีเมตาฟิลด์ประเภทการอ้างอิงไฟล์สำหรับการเพิ่มรูปภาพ
2. คลิก ลบ
3. คลิก บันทึกเป็นรายการใหม่

รูปแบบรูปภาพ

ระบบรองรับรูปแบบรูปภาพดังต่อไปนี้

• JPEG
• Progressive JPEG
• PNG
• GIF
• HEIC
• WebP

การใช้รูปภาพ JPEG

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

• สินค้า
• แบนเนอร์หรือสไลด์โชว์
• หน้าและบล็อกโพสต์

การใช้รูปภาพ PNG

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

• โลโก้
• ไอคอน
• เส้นขอบและการตัดแต่ง

การบีบอัดรูปภาพและการเลือกรูปแบบโดยอัตโนมัติ

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

• เมื่อมีการแสดงรูปภาพผ่านธีมร้านค้าของคุณ รูปภาพคุณภาพสูงอาจได้รับการบีบอัด
• Shopify จะกำหนดรูปแบบไฟล์ที่ดีที่สุดที่จะใช้โดยอัตโนมัติเมื่อแสดงรูปภาพของคุณ
• เมื่อเว็บเบราว์เซอร์ของลูกค้ารองรับรูปแบบรูปภาพสมัยใหม่ เช่น WebP และ AVIF (AV1 Image File Format) รูปภาพของคุณจะแสดงในรูปแบบเหล่านั้น
• ไฟล์ GIF จะถูกแปลงเป็นรูปแบบ WebP แบบภาพเคลื่อนไหวโดยอัตโนมัติเพื่อปรับปรุงประสิทธิภาพโดยการลดขนาดไฟล์

โปรดพิจารณาดำเนินการต่อไปนี้เพื่อให้ได้รูปภาพที่มีคุณภาพดีที่สุด

• อัปโหลดรูปภาพที่มีความละเอียดสูงขึ้นสูงสุด 5000 x 5000 พิกเซล หรือ 25 เมกะพิกเซล
• เลือกประเภทรูปภาพที่สูญเสียคุณภาพน้อยกว่า เช่น PNG สำหรับภาพวาดลายเส้น ข้อความ และกราฟิกสัญลักษณ์ที่มีความโปร่งใส
• ใช้ JPEG สำหรับรูปภาพสินค้าหรือสไลด์โชว์
• รองรับไฟล์ SVG แต่มีข้อจำกัด โดยจะไม่สามารถเปลี่ยนรูปแบบ (ปรับขนาด, ครอบตัด เป็นต้น) ได้หากไม่ขอรูปแบบแรสเตอร์ (JPEG, WebP, PNG)

ประเภทไฟล์อื่นๆ เช่น PSD (Photoshop Document), TIFF (Tagged Image File Format) และ BMP (Bitmap) ได้รับการยอมรับ แต่จะถูกแปลงเป็น JPEG/PNG เมื่ออัปโหลด

ขีดจำกัดการอัปโหลดรูปภาพ

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

รูปภาพที่อัปโหลดไปยัง Shopify ต้องไม่เกินขีดจำกัดอย่างใดอย่างหนึ่งต่อไปนี้

• 20 เมกะพิกเซล
• 20 เมกะไบต์

หากต้องการหาค่าเมกะพิกเซลของรูปภาพของคุณ คุณสามารถใช้สมการต่อไปนี้

(ความกว้างเป็นพิกเซล x ความสูงเป็นพิกเซล)/1,000,000

ตัวอย่างเช่น รูปภาพที่มีความละเอียด 4900 x 6930 พิกเซล จะเท่ากับ 33.9 เมกะพิกเซลตามสมการ: (4900x6930)/1,000,000 = 33.9 MP

โปรไฟล์สีของรูปภาพ

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

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

โปรไฟล์สีจะถูกลบออกด้วยเหตุผลต่อไปนี้

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

ลบโปรไฟล์สีออกจากรูปภาพ

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

ดูเอกสารของ Adobe เกี่ยวกับวิธีกำหนดหรือลบโปรไฟล์สี (Illustrator, Photoshop) และกำหนดหรือลบโปรไฟล์สี (InDesign)

หลักปฏิบัติที่ดีที่สุดสำหรับสไลด์โชว์ แบนเนอร์รูปภาพ และรูปภาพเต็มความกว้าง

ธีม Shopify จำนวนมากมีรูปภาพขนาดใหญ่หรือสไลด์โชว์ที่ปรับขนาดตามความสูงของเบราว์เซอร์หรือปรับให้เข้ากับขนาดหน้าจอของคุณ

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

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

ข้อควรพิจารณาในการใช้รูปภาพสำหรับสไลด์โชว์หรือแบนเนอร์รูปภาพ

เพื่อให้แน่ใจว่ารูปภาพของคุณใช้งานได้ดีกับธีมของคุณ โปรดคำนึงถึงประเด็นต่อไปนี้

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

• สำหรับรูปภาพที่คุณใช้ในสไลด์โชว์หรือเป็นพื้นหลัง ให้เลือกรูปภาพที่เรียบง่ายเพื่อให้ข้อความที่ซ้อนทับอ่านง่าย

รูปภาพแนวกว้างบนหน้าจอแนวตั้ง

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

รูปภาพแนวตั้งบนหน้าจอแนวกว้าง

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

ลักษณะการโหลดรูปภาพ

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

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

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

การแก้ไขปัญหารูปภาพ