การอัปโหลดรูปภาพ
คุณสามารถใช้รูปภาพประเภทต่างๆ ได้ เช่น โลโก้บริษัท รูปภาพสินค้า สไลด์โชว์ แบนเนอร์ และรูปภาพบล็อกโพสต์ คุณสามารถแปลงรูปภาพของคุณด้วยการดำเนินการครอบตัดและปรับขนาดได้ คุณสามารถปรับแต่งการตั้งค่าสื่อในธีมของคุณเพื่อเปลี่ยนเส้นขอบหรือเงาบนสื่อทั้งหมดที่แสดงในร้านค้าของคุณได้
หากต้องการแสดงรูปภาพในร้านค้าออนไลน์ของคุณให้ออกมาตรงตามต้องการ คุณต้องใช้อัตราส่วนภาพที่ถูกต้อง
ในหน้านี้
อัปโหลดรูปภาพในตัวแก้ไขธีม
คุณสามารถเพิ่มรูปภาพไปยังธีมของคุณได้ในตัวแก้ไขธีม อีกทั้งยังสามารถอัปโหลดรูปภาพในหน้าไฟล์ของส่วนผู้ดูแล Shopify ได้อีกด้วย หากต้องการดูข้อมูลเพิ่มเติม โปรดดูที่การอัปโหลดไฟล์ไปยังเว็บไซต์
ขั้นตอน:
- ในส่วนผู้ดูแล Shopify ให้ไปที่ร้านค้าออนไลน์ > ธีม
- คลิกปรับแต่งที่อยู่ถัดจากธีมที่คุณต้องการปรับแต่ง
- ใช้เมนูดรอปดาวน์เพื่อเลือกเทมเพลตที่คุณต้องการแก้ไข
- จากแถบด้านข้างของตัวแก้ไขธีม ให้คลิกที่ส่วนหรือบล็อกที่คุณต้องการเพิ่มรูปภาพ
-
คลิกที่ “เลือกรูปภาพ” แล้วเลือกดำเนินการอย่างใดอย่างหนึ่งต่อไปนี้:
- หากต้องการอัปโหลดรูปภาพจากคอมพิวเตอร์ของคุณ ให้คลิกที่ “อัปโหลด”
- หากต้องการใช้สต็อกรูปภาพฟรีจาก Burst ให้คลิกที่ “ค้นหารูปภาพฟรี”
คลิกที่รูปภาพเพื่อดูตัวอย่างในธีมของคุณ เมื่อคุณพบรูปภาพที่ต้องการใช้แล้ว ให้คลิกเลือก
คลิกที่ “บันทึก”
เพิ่มรูปภาพโดยใช้เมตาฟิลด์
หากคุณได้ตั้งค่าเมตาฟิลด์ไว้ใช้กับรูปภาพของคุณแล้ว คุณจะสามารถใช้เครื่องมือเลือกแหล่งข้อมูลแบบไดนามิกเพื่อเพิ่มรูปภาพได้ สำหรับข้อมูลเพิ่มเติมเกี่ยวกับเมตาฟิลด์และการรับรองรูปแบบของรูปภาพ โปรดดูที่ประเภทเนื้อหาและค่าของเมตาฟิลด์
แบนเนอร์รูปภาพ
คุณสามารถสร้างแบนเนอร์รูปภาพด้วยองค์ประกอบดังต่อไปนี้:
- รูปภาพหนึ่งหรือสองรูป
- ข้อความ
- ปุ่มการดำเนินการ
บนคอมพิวเตอร์เดสก์ท็อป รูปภาพแบนเนอร์จะแสดงอยู่เคียงข้างกัน เนื่องจากรูปแบบนี้ไม่เหมาะต่อการใช้งานบนอุปกรณ์มือถือ คุณสามารถซ้อนรูปภาพแบนเนอร์รูปภาพของคุณได้โดยการเลือกตัวเลือกซ้อนรูปภาพบนอุปกรณ์มือถือในการส่วนแบนเนอร์รูปภาพของการตั้งค่าธีม หากต้องการข้อมูลเพิ่มเติมเกี่ยวกับแบนเนอร์รูปภาพและสไลด์โชว์ โปรดดูที่หลักปฏิบัติที่ดีที่สุดสำหรับสไลด์โชว์และแบนเนอร์รูปภาพ
จุดโฟกัสบนรูปภาพธีม
คุณสามารถใช้จุดโฟกัสในการกําหนดส่วนของรูปภาพที่สําคัญที่สุดในธีมร้านค้าออนไลน์ของคุณ เมื่อคุณกำหนดจุดโฟกัสบนรูปภาพ คุณต้องทำให้เป็นจุดโฟกัส จุดโฟกัสจะปรากฏในกรอบเสมอ แม้ว่าคุณจะมีธีมที่ครอบตัดรูปภาพของคุณให้พอดีกับเลย์เอาต์ก็ตาม จุดโฟกัสช่วยให้คุณสามารถควบคุมการแสดงรูปภาพได้มากขึ้นเมื่อธีมใช้อัตราส่วนภาพที่แตกต่างกัน และในขนาดหน้าจอที่แตกต่างกัน
คุณมีจุดโฟกัสได้เพียงจุดเดียวต่อภาพเท่านั้น แต่คุณสามารถเปลี่ยนหรือลบจุดโฟกัสนั้นออกได้ตลอดเวลา
การตั้งค่าจุดโฟกัสมีให้ใช้งานในธีม Shopify ฟรีเวอร์ชันต่อไปนี้:
- Craftเวอร์ชัน 5.0.0 หรือสูงกว่า
- Craveเวอร์ชัน 5.0.0 หรือสูงกว่า
- Colorblock เวอร์ชัน 3.0.0หรือใหม่กว่า
- Dawn เวอร์ชัน 7.0.0 หรือใหม่กว่า
- Refresh เวอร์ชัน 2.0.0 หรือใหม่กว่า
- Ride เวอร์ชัน 3.0.0หรือใหม่กว่า
- Sense เวอร์ชัน 5.0.0 หรือใหม่กว่า
- Studio เวอร์ชัน 4.0.0 หรือใหม่กว่า
- Taste เวอร์ชัน 4.0.0 หรือใหม่กว่า
หากคุณใช้ธีมจากภายนอก ให้ตรวจสอบเอกสารประกอบของธีมเพื่อดูว่าธีมของคุณรองรับการใช้จุดโฟกัสหรือไม่
เพิ่มจุดโฟกัสให้กับรูปภาพ
คุณสามารถเพิ่มจุดโฟกัสให้กับรูปภาพจากส่วนไฟล์ และตัวแก้ไขธีมของคุณ หากคุณเพิ่มจุดโฟกัสบนรูปภาพ แล้วใช้รูปภาพนั้นในหลายๆ ตำแหน่ง รูปภาพทั้งหมดก็ใช้จุดโฟกัสเดียวกัน
คุณสามารถเพิ่มจุดโฟกัสไปยังรูปภาพธีมได้เท่านั้น คุณไม่สามารถเพิ่มจุดโฟกัสไปยังสินค้า บล็อก หรือรูปภาพคอลเลกชันได้
ขั้นตอน:
- จากตัวแก้ไขธีม ให้คลิกที่ส่วนหรือบล็อกที่มีรูปภาพ
- คลิกแก้ไข บนรูปภาพ
- คลิกเพิ่มจุดโฟกัส
- คลิกและลากวงกลมสีฟ้า หรือคลิกที่ส่วนที่สําคัญที่สุดของรูปภาพเพื่อตั้งจุดโฟกัสของคุณ
- คลิกที่เสร็จสิ้น
ขั้นตอน:
- จากตัวแก้ไขธีม ให้แตะที่ส่วนหรือบล็อกที่มีรูปภาพ
- แตะแก้ไข บนรูปภาพ
- แตะเพิ่มจุดโฟกัส
- แตะที่ส่วนที่สําคัญที่สุดของภาพเพื่อตั้งจุดโฟกัส
- แตะที่ เสร็จสิ้น
ขั้นตอน:
- จากตัวแก้ไขธีม ให้แตะที่ส่วนหรือบล็อกที่มีรูปภาพ
- แตะแก้ไข บนรูปภาพ
- แตะเพิ่มจุดโฟกัส
- แตะที่ส่วนที่สําคัญที่สุดของภาพเพื่อตั้งจุดโฟกัส
- แตะที่ เสร็จสิ้น
ลบจุดโฟกัส
ขั้นตอน:
- จากตัวแก้ไขธีม ให้คลิกที่ส่วนหรือบล็อกที่มีรูปภาพ
- แตะแก้ไข บนรูปภาพ
- คลิกลบจุดโฟกัส
- คลิกที่เสร็จสิ้น
ขั้นตอน:
- จากตัวแก้ไขธีม ให้แตะที่ส่วนหรือบล็อกที่มีรูปภาพ
- แตะแก้ไข บนรูปภาพ
- แตะลบจุดโฟกัส
- แตะที่ เสร็จสิ้น
ขั้นตอน:
- จากตัวแก้ไขธีม ให้แตะที่ส่วนหรือบล็อกที่มีรูปภาพ
- แตะแก้ไข บนรูปภาพ
- แตะลบจุดโฟกัส
- แตะที่ เสร็จสิ้น
รูปแบบของรูปภาพ
Shopify รองรับรูปแบบของรูปภาพต่อไปนี้:
- JPEG
- Progressive JPEG
- PNG
- GIF
- HEIC
- WebP
ควรใช้รูปภาพ JPEG เมื่อใด
รูปภาพ JPEG เหมาะสำหรับภาพถ่ายและภาพนิ่งอื่นๆ ที่มีสีซับซ้อน รูปแบบ JPEG มีแถบสีหลายล้านสี JPEG ยังมีการบีบอัดข้อมูลแบบสูญเสียบางส่วน ซึ่งสามารถช่วยให้การโหลดหน้าเว็บเป็นไปอย่างรวดเร็วโดยไม่สูญเสียคุณภาพของรูปภาพ
ใช้รูปแบบ JPEG สำหรับประเภทของรูปภาพต่อไปนี้
- สินค้า
- แบนเนอร์หรือสไลด์โชว์
- หน้าเว็บและบล็อกโพสต์
ควรใช้รูปภาพ PNG เมื่อใด
รูปภาพ PNG เหมาะสำหรับภาพกราฟิกและไอคอนที่มีสีเรียบและไม่มีการไล่ระดับสี รูปแบบ PNG ยังสามารถรองรับภาพโปร่งใสได้อีกด้วย
ใช้รูปแบบ PNG สำหรับประเภทของรูปภาพต่อไปนี้
- โลโก้
- ไอคอน
- เส้นขอบและลวดลายตกแต่ง
การบีบอัดรูปภาพและการเลือกรูปแบบอัตโนมัติ
เพื่อรักษาระดับความเร็วในการโหลด Shopify จึงบีบอัดรูปภาพที่แสดงในร้านค้าออนไลน์ของคุณโดยอัตโนมัติ การบีบอัดรูปภาพเป็นการลดขนาดไฟล์เพื่อให้สามารถโหลดหน้าได้เร็วขึ้น
นอกจากนี้ Shopify จะระบุรูปแบบไฟล์ที่ดีที่สุดที่สำหรับการส่งรูปภาพของคุณโดยอัตโนมัติ ตัวอย่างเช่น เมื่อเราตรวจพบว่าเว็บเบราว์เซอร์ของลูกค้ารองรับรูปแบบรูปภาพที่ทันสมัย เช่น WebP และ AV1 Image File Format (AVIF) Shopify จะนำเสนอรูปภาพของคุณในรูปแบบเหล่านั้น
GIF จะถูกแปลงเป็นไฟล์รูปแบบ WebP แบบเคลื่อนไหวโดยอัตโนมัติเพื่อเพิ่มประสิทธิภาพด้วยการลดขนาดไฟล์
ขีดจำกัดการอัปโหลด
การอัปโหลดรูปภาพลงใน Shopify มีข้อจำกัดทั้งในแง่ของจำนวนเมกะพิกเซลและขนาดไฟล์ (วัดเป็นเมกะไบต์) ใช้เมกะพิกเซลเพื่อระบุว่าใช้จำนวนกี่ล้านพิกเซลในการประกอบขึ้นเป็นรูปภาพ ใช้เมกะไบต์เพื่อระบุว่าใช้จำนวนพื้นที่หน่วยความจำหรือดิสก์กี่ล้านไบต์ในการจัดเก็บรูปภาพ
รูปภาพที่อัปโหลดลงใน Shopify ต้องไม่เกินขีดจำกัดต่อไปนี้:
- 25 เมกะพิกเซล
- 20 เมกะไบต์
คุณสามารถใช้สมการต่อไปนี้เพื่อค้นหาจำนวนเมกะพิกเซลของรูปภาพได้: (pixel width x pixel height)/1,000,000 ตัวอย่างเช่น รูปภาพที่มีความละเอียด 4900x6930 ก็จะมี 33.9 เมกะพิกเซลเมื่ออิงจากสมการ: (4900x6930)/1,000,000 = 33.9 MP
โปรไฟล์สี
เมื่อคุณดูรูปภาพในร้านค้าออนไลน์ของคุณ สีในรูปภาพอาจดูแตกต่างจากสีในต้นฉบับที่คุณได้อัปโหลดลงใน Shopify สิ่งนี้สามารถเกิดขึ้นได้เมื่อรูปภาพมีโปรไฟล์สีซึ่งเป็นชุดของข้อมูลที่เก็บไว้ในไฟล์ที่มี .ICC หรือส่วนขยาย .ICM โปรไฟล์สีมักจะฝังอยู่ในรูปภาพเพื่อช่วยกำหนดมาตรฐานวิธีการที่สีปรากฏในอุปกรณ์ต่างๆ เมื่อรูปภาพปรากฏในร้านค้าออนไลน์ของคุณ โปรไฟล์สีของรูปภาพเหล่านั้นจะถูกลบออก
ระบบจะลบโปรไฟล์สีออกด้วยเหตุผลบางประการ:
- อุปกรณ์บางส่วนไม่สามารถอ่านโปรไฟล์สี
.ICCหรือ.ICMได้ ดังนั้นการทำให้สียังคงเดิมอาจส่งผลให้เกิดความไม่สอดคล้องกันของสีในรูปภาพในอุปกรณ์ต่างๆ - เมื่อรูปภาพที่อัปโหลดไม่มีโปรไฟล์สี เว็บเบราว์เซอร์นั้นจะนำ sRGB (โปรไฟล์สีที่ใช้บ่อยที่สุดในการแสดงรูปภาพบนเว็บ) มาใช้ ซึ่งทำให้มั่นใจได้ว่ารูปภาพของคุณจะแสดงผลเหมือนกันในเว็บเบราว์เซอร์และอุปกรณ์หลักทั้งหมด
- โปรไฟล์สีอาจใช้พื้นที่ดิสก์จำนวนมาก ซึ่งอาจส่งผลให้ใช้เวลาในการโหลดนาน
ลบโปรไฟล์สีออกจากรูปภาพ
คุณสามารถลบโปรไฟล์สีออกจากรูปภาพของคุณได้โดยการบันทึกโดยไม่มีโปรไฟล์สีก่อนที่จะอัปโหลดลงใน Shopify กระบวนการนี้จะแตกต่างกันไป ขึ้นอยู่กับโปรแกรมแก้ไขรูปภาพของคุณ
ลบโปรไฟล์สีออกโดยใช้ Adobe Illustrator หรือ Adobe Photoshop
วิธีการลบโปรไฟล์สีออกโดยใช้ Adobe Illustrator หรือ Adobe Photoshop:
คลิก แก้ไข > กำหนดโปรไฟล์
เลือก ไม่ต้องจัดการสีเอกสารนี้
คลิก ตกลง
ลบโปรไฟล์สีออกโดยใช้ Adobe InDesign
วิธีการลบโปรไฟล์สีออกโดยใช้ Adobe InDesign:
คลิก แก้ไข > กำหนดโปรไฟล์
สำหรับโปรไฟล์ RGB และโปรไฟล์ CMYK ให้เลือก ละทิ้ง (ใช้พื้นที่การทำงานปัจจุบัน)
คลิก ตกลง
สำหรับรายละเอียดเพิ่มเติม คุณสามารถดูได้ที่เอกสารประกอบของ Adobe เกี่ยวกับโปรไฟล์สี
หลักปฏิบัติที่ดีที่สุดสำหรับสไลด์โชว์, แบนเนอร์รูปภาพ และรูปภาพแบบเต็มความกว้าง
ธีม Shopify จำนวนมากนั้นจะมีรูปภาพขนาดใหญ่หรือสไลด์โชว์ที่ปรับขนาดตามความสูงของเบราว์เซอร์คุณหรือปรับให้เข้ากับขนาดหน้าจอของคุณ
หากคุณใช้หนึ่งในธีมเหล่านี้หรือมีสไลด์โชว์หรือรูปภาพพื้นหลังขนาดใหญ่ คุณจำเป็นต้องทราบว่ารูปภาพประเภทใดแสดงผลได้ดีที่สุด
เนื่องจากรูปภาพขนาดใหญ่ไม่สามารถปรับให้พอดีกับอุปกรณ์ทั้งหมด บางครั้ง Shopify จึงแสดงรูปภาพเพียงบางส่วน โดยขึ้นอยู่กับอุปกรณ์ที่คุณใช้ หากสไลด์โชว์รูปภาพของคุณมีรูปภาพขนาดใหญ่จำนวนมาก คุณอาจพบว่าไม่สามารถมองเห็นบางส่วนของรูปภาพนั้น
ข้อเสนอแนะ
เพื่อให้แน่ใจว่ารูปภาพของคุณทำงานได้ดีกับธีมของคุณ คุณควรคำนึงถึงกรณีดังต่อไปนี้:
รูปภาพที่คุณใช้สำหรับสไลด์โชว์หรือพื้นหลังไม่ควรมีข้อความ หากข้อความเป็นส่วนหนึ่งของรูปภาพ คุณอาจย้าย ครอบตัด หรือปรับแต่งตามธีมของคุณ ใช้ตัวแก้ไขธีมเพื่อเพิ่มข้อความและลิงก์ไปยังสไลด์โชว์ของคุณ
สำหรับรูปภาพที่คุณใช้ในสไลด์โชว์หรือเป็นพื้นหลัง ให้เลือกรูปภาพที่เรียบง่ายเพื่อให้ข้อความที่อยู่ด้านบนอ่านง่าย
รูปภาพที่กว้างในหน้าจอที่สูง
อาจมีการครอบตัดรูปภาพที่กว้างออกไปทางด้านซ้ายและขวาเมื่ออุปกรณ์ที่ใช้ในการดูรูปภาพเหล่านั้นมีขนาดหน้าจอที่สูง (เช่น โทรศัพท์มือถือ หรือแท็บเล็ต)ในตัวอย่างด้านล่าง หากคนคือส่วนที่สําคัญที่สุดของรูปภาพ คุณสามารถวางจุดโฟกัสที่ด้านขวาของรูปภาพได้:
รูปภาพที่สูงในหน้าจอที่กว้าง
อาจมีการครอบตัดรูปภาพที่มีขนาดสูงไปทางด้านบนและล่างเมื่ออุปกรณ์ที่ใช้ในการดูรูปภาพเหล่านั้นมีหน้าจอที่กว้าง (เช่น แล็ปท็อป หรือเดสก์ท็อป)ในตัวอย่างด้านล่าง หากรองเท้าเป็นส่วนที่สําคัญที่สุดของรูปภาพ คุณสามารถวางจุดโฟกัสที่ด้านล่างของรูปภาพเพื่อป้องกันไม่ให้เกิดการครอบตัดออก:
