การอัปโหลดรูปภาพ
คุณสามารถใช้รูปภาพประเภทต่างๆ ได้ เช่น โลโก้บริษัท รูปภาพสินค้า สไลด์โชว์ แบนเนอร์ และรูปภาพบล็อกโพสต์ นอกจากนี้ คุณยังสามารถแปลงรูปภาพของคุณด้วยการดำเนินการครอบตัดและปรับขนาด รวมถึงปรับแต่งการตั้งค่าสื่อในธีมของคุณเพื่อเปลี่ยนเส้นขอบหรือเงาบนสื่อทั้งหมดที่แสดงในร้านค้าของคุณได้
หากต้องการแสดงรูปภาพในร้านค้าออนไลน์ของคุณให้ออกมาตรงตามต้องการ คุณต้องใช้อัตราส่วนภาพที่ถูกต้อง รูปภาพจะได้รับการเพิ่มประสิทธิภาพโดยอัตโนมัติสำหรับหน้าร้านของคุณโดยใช้เครือข่ายการจัดส่งเนื้อหา (CDN) ของ Shopify
ในหน้านี้
อัปโหลดรูปภาพในตัวแก้ไขธีม
คุณสามารถเพิ่มรูปภาพไปยังธีมของคุณได้ในตัวแก้ไขธีม คุณยังสามารถอัปโหลดรูปภาพในส่วน เนื้อหา > ไฟล์ ของส่วนผู้ดูแล Shopify ได้อีกด้วย หากต้องการดูข้อมูลเพิ่มเติม โปรดดูที่การอัปโหลดและการจัดการไฟล์
ขั้นตอนมีดังนี้
เดสก์ท็อป
ในส่วนผู้ดูแล Shopify ให้ไปที่ร้านค้าออนไลน์ > ธีม
คลิก “ปรับแต่ง” กับเทมเพลตที่คุณต้องการอัปโหลดรูปภาพ
ตัวเลือกเสริม: หากคุณต้องการเพิ่มรูปภาพไปยังหน้าอื่นในร้านค้าที่ไม่ใช่หน้าแรก ให้คลิกเมนูดรอปดาวน์ "หน้าแรก" จากนั้นเลือกเทมเพลตที่คุณต้องการแก้ไข
จากแถบด้านข้างของตัวแก้ไขธีม ให้คลิกที่ส่วนหรือบล็อกที่คุณต้องการเพิ่มรูปภาพ
ในช่องรูปภาพ ให้เลือกอย่างใดอย่างหนึ่งต่อไปนี้:
หากต้องการอัปโหลดรูปภาพจากคอมพิวเตอร์ของคุณ ให้ดำเนินการตามขั้นตอนต่อไปนี้
- คลิก "เลือกรูปภาพ" > "เพิ่มรูปภาพ"
- ค้นหาและเปิดรูปภาพในคอมพิวเตอร์ของคุณ
- คลิกที่เสร็จสิ้น
หากต้องการใช้รูปภาพสต็อกฟรีจาก Burst ให้ดำเนินการตามขั้นตอนต่อไปนี้
- คลิก สำรวจรูปภาพฟรี
- ค้นหารูปภาพที่คุณต้องการใช้
- คลิก “เลือก”
แล้วคลิกที่บันทึก
iPhone
จากแอป Shopify ให้แตะที่ปุ่ม …
ในส่วนช่องทางการขาย ให้แตะที่ร้านค้าออนไลน์
แตะจัดการธีมทั้งหมด
แตะ "ปรับแต่ง" สำหรับธีมที่คุณต้องการอัปโหลดรูปภาพ
ตัวเลือกเสริม: หากคุณต้องการเพิ่มรูปภาพไปยังหน้าอื่นในร้านค้าที่ไม่ใช่หน้าแรก ให้แตะเมนูดรอปดาวน์ "หน้าแรก" จากนั้นเลือกเทมเพลตที่คุณต้องการแก้ไข
แตะ "ส่วนต่างๆ" จากนั้นแตะส่วนหรือบล็อกที่คุณต้องการเพิ่มรูปภาพ
ในช่องรูปภาพ ให้เลือกอย่างใดอย่างหนึ่งต่อไปนี้:
หากต้องการอัปโหลดรูปภาพจากอุปกรณ์ของคุณ ให้ดำเนินการตามขั้นตอนต่อไปนี้:
- แตะ “เลือกรูปภาพ” > “เพิ่มรูปภาพ”
- ค้นหาและเปิดรูปภาพในอุปกรณ์ของคุณ
- แตะที่ เสร็จสิ้น
หากต้องการใช้รูปภาพสต็อกฟรีจาก Burst ให้ดำเนินการตามขั้นตอนต่อไปนี้
- แตะ "สำรวจรูปภาพฟรี"
- ค้นหารูปภาพที่คุณต้องการใช้
- แตะที่ เสร็จสิ้น
แตะบันทึก
Android
จากแอป Shopify ให้แตะที่ปุ่ม ☰
ในส่วนช่องทางการขาย ให้แตะที่ร้านค้าออนไลน์
แตะจัดการธีมทั้งหมด
แตะ "ปรับแต่ง" สำหรับธีมที่คุณต้องการอัปโหลดรูปภาพ
ตัวเลือกเสริม: หากคุณต้องการเพิ่มรูปภาพไปยังหน้าอื่นในร้านค้าที่ไม่ใช่หน้าแรก ให้แตะเมนูดรอปดาวน์ "หน้าแรก" จากนั้นเลือกเทมเพลตที่คุณต้องการแก้ไข
แตะ "ส่วนต่างๆ" จากนั้นแตะส่วนหรือบล็อกที่คุณต้องการเพิ่มรูปภาพ
ในช่องรูปภาพ ให้เลือกอย่างใดอย่างหนึ่งต่อไปนี้:
หากต้องการอัปโหลดรูปภาพจากอุปกรณ์ของคุณ ให้ดำเนินการตามขั้นตอนต่อไปนี้:
- แตะ “เลือกรูปภาพ” > “เพิ่มรูปภาพ”
- ค้นหาและเปิดรูปภาพในอุปกรณ์ของคุณ
- แตะที่ เสร็จสิ้น
หากต้องการใช้รูปภาพสต็อกฟรีจาก Burst ให้ดำเนินการตามขั้นตอนต่อไปนี้
- แตะ "สำรวจรูปภาพฟรี"
- ค้นหารูปภาพที่คุณต้องการใช้
- แตะที่ เสร็จสิ้น
แล้วแตะที่ ✓
การเพิ่มรูปภาพโดยใช้เมตาฟิลด์
หากคุณได้ตั้งค่าเมตาฟิลด์ไว้ใช้กับรูปภาพของคุณแล้ว คุณจะสามารถใช้เครื่องมือเลือกแหล่งข้อมูลแบบไดนามิกเพื่อเพิ่มรูปภาพไปยังร้านค้าออนไลน์ของคุณได้ สำหรับข้อมูลเพิ่มเติมเกี่ยวกับเมตาฟิลด์และการรับรองรูปแบบของรูปภาพ โปรดดูที่การเพิ่มค่าลงในเมตาฟิลด์
การตั้งค่าจุดโฟกัสไปยังรูปภาพ
คุณสามารถใช้จุดโฟกัสในการกําหนดส่วนของรูปภาพที่สําคัญที่สุดในร้านค้าออนไลน์ของคุณ เมื่อคุณกำหนดจุดโฟกัสบนรูปภาพ คุณต้องทำให้เป็นจุดโฟกัส จุดโฟกัสจะแสดงในกรอบเสมอ แม้ว่าคุณจะมีธีมที่ครอบตัดรูปภาพของคุณให้พอดีกับเลย์เอาต์ก็ตาม จุดโฟกัสช่วยให้คุณควบคุมวิธีการแสดงภาพของคุณบนหน้าจอที่มีขนาดต่างกันได้ดีขึ้น โดยเฉพาะในกรณีที่ธีมใช้อัตราส่วนภาพต่างกัน
คุณมีจุดโฟกัสได้เพียงจุดเดียวต่อภาพเท่านั้น แต่คุณสามารถเปลี่ยนหรือลบจุดโฟกัสนั้นออกได้ตลอดเวลา
ความเข้ากันได้ของจุดโฟกัสกับธีมฟรีของ Shopify
คุณสามารถกำหนดจุดโฟกัสบนธีมฟรีของ Shopify เวอร์ชันต่อไปนี้ได้
- 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 ขึ้นไป
หากคุณใช้ธีมจากภายนอก ให้ตรวจสอบเอกสารประกอบของธีมเพื่อดูว่าธีมของคุณรองรับการใช้จุดโฟกัสหรือไม่
เพิ่มจุดโฟกัสให้กับรูปภาพ
หากคุณเพิ่มจุดโฟกัสลงในรูปภาพ แล้วใช้รูปภาพนั้นในหลายๆ ตำแหน่งในร้านค้าออนไลน์ของคุณ จุดโฟกัสเดียวกันจะนำไปใช้กับทุกตำแหน่งที่คุณใช้รูปภาพนั้น
จุดโฟกัสอาจไม่ได้อยู่กึ่งกลางของสายตาเสมอไป ทั้งนี้ขึ้นอยู่กับวิธีการครอบตัดธีมและปรับขนาดรูปภาพของคุณ
ขั้นตอนมีดังนี้
คลิกรูปภาพจากตำแหน่งใดๆ ต่อไปนี้ในส่วนผู้ดูแล Shopify ของคุณ
- ในส่วนเนื้อหา > ไฟล์
- ในตัวแก้ไขธีม
- ในส่วนสื่อของการทำรายการสินค้าของคุณในส่วนสินค้า
- ในเครื่องมือแก้ไขของ Shopify Email
- ในส่วนเมตาฟิลด์ของแหล่งข้อมูลใดๆ ที่มีเมตาฟิลด์ประเภทการอ้างอิงไฟล์สำหรับการเพิ่มรูปภาพ
หากต้องการเลือกส่วนของรูปภาพที่คุณต้องการตั้งจุดโฟกัส ให้คลิกที่รูปภาพหรือลากจุดสีน้ำเงิน
แล้วคลิกที่บันทึก
ลบจุดโฟกัสออกจากรูปภาพ
ขั้นตอนมีดังนี้
คลิกรูปภาพจากตำแหน่งใดๆ ต่อไปนี้ในส่วนผู้ดูแล Shopify ของคุณ
- ในส่วนเนื้อหา > ไฟล์
- ในตัวแก้ไขธีม
- ในส่วนสื่อของการทำรายการสินค้าของคุณในส่วนสินค้า
- ในเครื่องมือแก้ไขของ Shopify Email
- ในส่วนเมตาฟิลด์ของแหล่งข้อมูลใดๆ ที่มีเมตาฟิลด์ประเภทการอ้างอิงไฟล์สำหรับการเพิ่มรูปภาพ
คลิก “ลบ”
คลิก "บันทึกเป็นใหม่"
รูปแบบของรูปภาพ
รองรับรูปแบบรูปภาพต่อไปนี้
- JPEG
- Progressive JPEG
- PNG
- GIF
- HEIC
- WebP
การใช้รูปภาพ JPEG
รูปภาพ JPEG เหมาะสำหรับภาพถ่ายและภาพนิ่งอื่นๆ ที่มีสีซับซ้อน รูปแบบ JPEG มีแถบสีหลายล้านสี JPEG ยังมีการบีบอัดข้อมูลแบบสูญเสียบางส่วน ซึ่งสามารถช่วยให้การโหลดหน้าเว็บเป็นไปอย่างรวดเร็วโดยไม่สูญเสียคุณภาพของรูปภาพ ใช้รูปแบบ JPEG สำหรับรูปภาพประเภทต่อไปนี้:
- สินค้า
- แบนเนอร์หรือสไลด์โชว์
- หน้าเว็บและบล็อกโพสต์
การใช้รูปภาพ PNG
รูปภาพ PNG เหมาะสำหรับภาพกราฟิกและไอคอนที่มีสีเรียบและไม่มีการไล่ระดับสี รูปแบบ PNG ยังรองรับภาพโปร่งใสอีกด้วย ใช้รูปแบบ PNG สำหรับรูปภาพประเภทต่อไปนี้:
- โลโก้
- ไอคอน
- เส้นขอบและลวดลายตกแต่ง
การบีบอัดรูปภาพและการเลือกรูปแบบอัตโนมัติ
เพื่อรักษาระดับความเร็วในการโหลดหน้า Shopify จึงบีบอัดรูปภาพที่แสดงในร้านค้าออนไลน์ของคุณโดยอัตโนมัติ การบีบอัดรูปภาพเป็นการลดขนาดไฟล์เพื่อให้สามารถโหลดหน้าได้เร็วขึ้น
นอกจากนี้ Shopify จะระบุรูปแบบไฟล์ที่ดีที่สุดที่จะใช้ในการนำเสนอรูปภาพของคุณโดยอัตโนมัติ ตัวอย่างเช่น เมื่อเราตรวจพบว่าเว็บเบราว์เซอร์ของลูกค้ารองรับรูปแบบรูปภาพที่ทันสมัย เช่น WebP และ AV1 Image File Format (AVIF) รูปภาพของคุณจะได้รับการนำเสนอในรูปแบบเหล่านั้น
GIF จะถูกแปลงเป็นไฟล์รูปแบบ WebP แบบเคลื่อนไหวโดยอัตโนมัติเพื่อเพิ่มประสิทธิภาพด้วยการลดขนาดไฟล์
ขีดจำกัดการอัปโหลดรูปภาพ
การอัปโหลดรูปภาพไปยัง Shopify มีข้อจำกัดทั้งในแง่ของเมกะพิกเซล (MP) และขนาดไฟล์ซึ่งวัดเป็นเมกะไบต์ (MB) โดยเมกะพิกเซลเป็นหน่วยที่ใช้เพื่อระบุจำนวนพิกเซลที่มีอยู่ในภาพเป็นจำนวนล้านพิกเซล ส่วนเมกะไบต์เป็นหน่วยที่ใช้เพื่อระบุจำนวนหน่วยความจำหรือพื้นที่ดิสก์ที่ภาพหนึ่งภาพใช้เป็นจำนวนล้านไบต์
รูปภาพที่อัปโหลดลงใน Shopify ต้องไม่เกินขีดจำกัดต่อไปนี้:
- 20 เมกะพิกเซล
- 20 เมกะไบต์
คุณสามารถใช้สมการต่อไปนี้เพื่อค้นหาจำนวนเมกะพิกเซลของรูปภาพได้
(pixel width x pixel height)/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 จึงแสดงรูปภาพเพียงบางส่วน โดยขึ้นอยู่กับอุปกรณ์ที่คุณใช้ หากสไลด์โชว์รูปภาพของคุณมีรูปภาพขนาดใหญ่จำนวนมาก คุณอาจพบว่าไม่สามารถมองเห็นบางส่วนของรูปภาพนั้น
ข้อควรพิจารณาในการใช้รูปภาพสำหรับสไลด์โชว์หรือแบนเนอร์รูปภาพ
เพื่อให้แน่ใจว่ารูปภาพของคุณเข้ากับธีมของคุณได้ดี โปรดคำนึงถึงประเด็นต่อไปนี้
รูปภาพที่คุณใช้สำหรับสไลด์โชว์หรือพื้นหลังไม่ควรมีข้อความอยู่ หากข้อความเป็นส่วนหนึ่งของรูปภาพ คุณอาจย้าย ครอบตัด หรือปรับแต่งตามธีมของคุณ ใช้ตัวแก้ไขธีมเพื่อเพิ่มข้อความหรือลิงก์ไปยังสไลด์โชว์และพื้นหลังของคุณ
สำหรับรูปภาพที่คุณใช้ในสไลด์โชว์หรือเป็นพื้นหลัง ให้เลือกรูปภาพที่เรียบง่ายเพื่อให้ข้อความที่อยู่ด้านบนอ่านง่าย
รูปภาพที่กว้างในหน้าจอที่สูง
อาจมีการครอบตัดฝั่งซ้ายและขวาของรูปภาพที่กว้างออก เมื่ออุปกรณ์ที่ใช้ในการดูรูปภาพเหล่านั้นมีหน้าจอที่สูง เช่น โทรศัพท์มือถือ หรือแท็บเล็ตที่ดูในโหมดแนวตั้ง ในตัวอย่างด้านล่าง หากคนคือส่วนที่สําคัญที่สุดของรูปภาพ คุณสามารถวางจุดโฟกัสที่ด้านขวาของรูปภาพได้
รูปภาพที่สูงในหน้าจอที่กว้าง
อาจมีการครอบตัดด้านบนและล่างของรูปภาพที่มีขนาดสูง เมื่ออุปกรณ์ที่ใช้ในการดูรูปภาพเหล่านั้นมีหน้าจอที่กว้าง เช่น แล็ปท็อป หรือหน้าจอเดสก์ท็อป ในตัวอย่างด้านล่าง หากรองเท้าคือส่วนที่สําคัญที่สุดของรูปภาพ คุณสามารถวางจุดโฟกัสที่ด้านล่างของรูปภาพได้
