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

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

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

คุณสามารถอัปโหลดรูปภาพสำหรับร้านค้าออนไลน์ของคุณได้บนสองตำแหน่ง:

อัปโหลดรูปภาพในหน้าไฟล์

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

อัปโหลดรูปภาพในเครื่องมือแก้ไขธีม

คุณสามารถเพิ่มรูปภาพในธีมของคุณได้ในเครื่องมือแก้ไขธีม

ขั้นตอน:

  1. ใช้เมนูดรอปดาวน์เพื่อเลือกเทมเพลตที่คุณต้องการแก้ไข

  2. จากแถบด้านข้างของตัวแก้ไขธีม ให้คลิกที่ส่วนหรือบล็อกที่คุณต้องการเพิ่มรูปภาพ

  3. คลิกที่ "เลือกรูปภาพ" แล้วเลือกดำเนินการอย่างใดอย่างหนึ่งต่อไปนี้:

- หากต้องการอัปโหลดรูปภาพจากคอมพิวเตอร์ของคุณ ให้คลิกที่ "อัปโหลด" - หากต้องการใช้สต็อกรูปภาพฟรีจาก Burst ให้คลิกที่ "ค้นหารูปภาพฟรี"

  1. คลิกที่รูปภาพเพื่อดูตัวอย่างในธีมของคุณ เมื่อคุณพบรูปภาพที่ต้องการใช้แล้ว ให้คลิกเลือก

  2. คลิกที่บันทึก

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

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

แบนเนอร์รูปภาพ

คุณสามารถสร้างแบนเนอร์รูปภาพด้วยองค์ประกอบดังต่อไปนี้:

  • รูปภาพหนึ่งหรือสองรูป
  • ข้อความ
  • ปุ่มการดำเนินการ

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

รูปแบบของรูปภาพ

Shopify รองรับรูปแบบของรูปภาพต่อไปนี้:

  • JPEG หรือ JPG
  • Progressive JPEG
  • PNG
  • GIF

Shopify ให้บริการรูปภาพในรูปแบบ WebP บนเบราว์เซอร์ที่รองรับ

ควรใช้รูปภาพ JPEG เมื่อใด

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

ใช้รูปแบบ JPEG สำหรับประเภทของรูปภาพต่อไปนี้

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

ควรใช้รูปภาพ PNG เมื่อใด

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

ใช้รูปแบบ PNG สำหรับประเภทของรูปภาพต่อไปนี้

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

อัตราการบีบอัด

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

ระดับคุณภาพรูปภาพของ Shopify หลังจากการบีบอัดมีดังนี้:

  • JPEG: ระหว่าง 65 - 90 เปอร์เซ็นต์
  • PNG: 90 เปอร์เซ็นต์
  • GIF: ไม่มีการเปลี่ยนแปลงคุณภาพ

สำหรับรูปภาพ JPEG ระดับคุณภาพรูปภาพที่บีบอัดขึ้นอยู่กับคุณภาพรูปภาพ JPEG ดั้งเดิม รวมถึงขนาดของของรูปภาพที่ออกมา:

อัตราการบีบอัด
คุณภาพดั้งเดิม ขนาดรูปภาพที่แสดง คุณภาพรูปภาพที่แสดง
86% ขึ้นไป ความสูงหรือความกว้างตั้งแต่ 1024 พิกเซลขึ้นไป 85%
65 - 85% ความสูงหรือความกว้างตั้งแต่ 1024 พิกเซลขึ้นไป คุณภาพดั้งเดิม
64% ลงไป ความสูงหรือความกว้างตั้งแต่ 1024 พิกเซลขึ้นไป 65%
76% ขึ้นไป ทั้งความสูงและความกว้างน้อยกว่า 1024 พิกเซล 75%
65 - 75% ทั้งความสูงและความกว้างน้อยกว่า 1024 พิกเซล คุณภาพดั้งเดิม
64% ลงไป ทั้งความสูงและความกว้างน้อยกว่า 1024 พิกเซล 65%

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

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

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

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

โปรไฟล์สี

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

ระบบจะลบโปรไฟล์สีออกด้วยเหตุผลบางประการ:

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

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

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

ลบโปรไฟล์สีออกโดยใช้ Adobe Illustrator หรือ Adobe Photoshop

วิธีการลบโปรไฟล์สีออกโดยใช้ Adobe Illustrator หรือ Adobe Photoshop:

  1. คลิก แก้ไข > กำหนดโปรไฟล์

  2. เลือก ไม่ต้องจัดการสีเอกสารนี้

  3. คลิก ตกลง

ลบโปรไฟล์สีออกโดยใช้ Adobe InDesign

วิธีการลบโปรไฟล์สีออกโดยใช้ Adobe InDesign:

  1. คลิก แก้ไข > กำหนดโปรไฟล์

  2. สำหรับโปรไฟล์ RGB และโปรไฟล์ CMYK ให้เลือก ละทิ้ง (ใช้พื้นที่การทำงานปัจจุบัน)

  3. คลิก ตกลง

สำหรับรายละเอียดเพิ่มเติม คุณสามารถดูได้ที่เอกสารประกอบของ Adobe เกี่ยวกับโปรไฟล์สี

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

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

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

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

ข้อเสนอแนะ

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

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

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

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

รูปภาพที่กว้างในหน้าจอที่สูง

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

รูปภาพที่กว้างในหน้าจอที่สูง

รูปภาพที่สูงในหน้าจอที่กว้าง

อาจมีการครอบตัดรูปภาพที่สูงออกไปด้านบนและล่างเมื่ออุปกรณ์ที่ใช้ในการดูรูปภาพเหล่านั้นมีหน้าจอที่กว้าง (เช่น แล็ปท็อป หรือเดสก์ท็อป):

รูปภาพที่สูงในหน้าจอที่กว้าง

พร้อมเริ่มต้นการขายด้วย Shopify แล้วหรือยัง

ทดลองใช้งานฟรี