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

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

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

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

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

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

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

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

ขั้นตอน:

  1. ค้นหาธีมที่คุณต้องการแก้ไข จากนั้นคลิก ปรับแต่ง

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

    ส่วนของแถบเครื่องมือตัวแก้ไขธีมที่แสดงเครื่องมือเลือกรูปภาพ มีปุ่มที่ระบุว่า

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

  4. คลิก บันทึก

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

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

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

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

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

ควรใช้รูปภาพ 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 จำนวนมากมีรูปภาพขนาดใหญ่หรือสไลด์โชว์ที่ปรับขนาดตามความสูงของเบราว์เซอร์ของคุณ (Boundless และ Brooklyn) หรือปรับให้เข้ากับขนาดหน้าจอของคุณ (Venture)

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

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

ข้อเสนอแนะ

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

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

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

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

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

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

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

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

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

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

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

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