ภาพคุณภาพสูง เป็นรากฐานสำคัญของความสวยงามบนพอร์ทัล ช่วยเพิ่มการมีส่วนร่วมของผู้ใช้งาน และสนับสนุนการ เปลี่ยนผู้เข้าชมเป็นการจองโดยตรง
เพื่อให้ง่ายต่อการติดตั้ง Website Builder จะซิงค์และดึงไฟล์ภาพของคุณจากโปรไฟล์ที่พักใน Cloudbeds PMS และการตั้งค่าห้อง มาไว้ในแกลเลอรีสื่อของพอร์ทัลโดยอัตโนมัติ
บทความนี้จะอธิบายข้อมูลจำเพาะหลัก เกณฑ์ขนาด และขั้นตอนการจัดการสื่อภาพใน Cloudbeds Websites
การเข้าถึง Media Manager
- จาก เมนูหลัก ของ Cloudbeds PMS ไปที่ Digital Marketing แล้วเลือก แท็บ Websites
- คลิก แก้ไขเว็บไซต์ของฉัน เพื่อเข้าสู่หน้าตัวแก้ไขพอร์ทัล
- ในแถบเครื่องมือด้านซ้ายของตัวแก้ไข เลือก CMS แล้วเลือก Media Manager เพื่อดูโฟลเดอร์ภาพที่พักที่ถูกดึงมาให้โดยอัตโนมัติ
จัดการภาพสำหรับ Cloudbeds Website ของคุณ
ขนาดภาพแต่ละประเภท
สามารถปิดการเพิ่มประสิทธิภาพสำหรับภาพพื้นหลัง, วิดเจ็ตภาพ และวิดเจ็ตแกลเลอรีภาพได้
- การปิดการเพิ่มประสิทธิภาพภาพอาจส่งผลต่อความเร็วหรือประสิทธิภาพของหน้าเว็บไซต์
- ความกว้างภาพพื้นหลัง: 2880px
- เดสก์ท็อป: 1920px
- แท็บเล็ต: 1280px
- มือถือ: 640px Thumbnail
-
Blog Thumbnail:
- 160px
- 300px
แนวทางการใช้ภาพ
ข้อกำหนดและประเภทไฟล์ภาพ
ทุกครั้งที่คุณอัปโหลดภาพ จะมีการสร้างสำเนาภาพขนาดเล็กลงสูงสุด 5 ขนาด Website Builder จะ แทรกภาพที่มีขนาดเหมาะสมโดยอัตโนมัติ ให้กับแต่ละอุปกรณ์ (เดสก์ท็อป แท็บเล็ต มือถือ) เพื่อให้ผู้เข้าชมเว็บไซต์ของคุณเห็นภาพที่เหมาะกับอุปกรณ์เสมอ
สามารถอัปโหลดไฟล์ (รวมภาพ วิดีโอ คลิปเสียง และไฟล์อื่น ๆ) ได้สูงสุด 15,000 ไฟล์ต่อเว็บไซต์ และแต่ละไฟล์ควรมีขนาดไม่เกิน 200 MB
ข้อกำหนดระบบสำหรับ Webp
เวอร์ชันที่รองรับ ภาพ Webp มีดังนี้:
- iPhone: v14 ขึ้นไป
- Mac/Safari: เวอร์ชันล่าสุด
- Chrome: ทุกเวอร์ชัน
- Android: ทุกเวอร์ชัน
ประเภท ไฟล์ภาพ ที่รองรับ:
- png
- jpg
- jpeg
- gif
- svg
- svg+xml
- ico
- x-icon
- webp
ขนาดภาพที่เหมาะสมต่ออุปกรณ์
- ขนาดของภาพที่อัปโหลดจะไม่ถูกขยายใหญ่ขึ้น และจะสร้างเฉพาะภาพที่มีขนาดเล็กกว่าต้นฉบับเท่านั้น
- ตัวอย่างเช่น หากอัปโหลดภาพขนาด 2000px จะมีการสร้างสำเนาภาพที่เหมาะสมอีก 5 ขนาด แต่ถ้าอัปโหลดภาพขนาด 100px จะไม่มีการสร้างภาพใหม่
ขนาดภาพสูงสุด
- พื้นที่รวมของภาพต้องไม่เกิน 3,145,728 พิกเซล ซึ่งโดยปกติภาพของคุณจะไม่เกินขีดจำกัดนี้ คุณสามารถตรวจสอบได้โดยคูณความกว้างกับความสูงของภาพ
- ขนาดไฟล์ภาพไม่ควรเกิน 200MB
- หากอัปโหลดภาพที่ใหญ่เกินขีดจำกัด อาจเกิดข้อผิดพลาดดังนี้:
- อัปโหลดภาพไม่สำเร็จ
- อัปโหลดภาพสำเร็จแต่ไม่แสดงภาพตัวอย่างในตัวเลือกภาพ
- ภาพไม่แสดงในตัวแก้ไข
- ภาพไม่แสดงบนเว็บไซต์จริง
แนวทางขนาดภาพสำหรับแต่ละวิดเจ็ต
Slider
วิดเจ็ต Slider มักใช้ภาพขนาดใหญ่เพื่อสร้างความโดดเด่น โดยปกติจะขยายเต็มความกว้างของหน้า ควรเลือกภาพที่มีความกว้างมากเพื่อให้เหมาะกับ Slider หากเป็น Slider แบบสี่เหลี่ยมจัตุรัส ให้ใช้สัดส่วนภาพที่เท่ากัน เช่น 1:1
ควรเลือกภาพที่มีพื้นที่ขอบ (padding) เพียงพอ เพื่อให้เนื้อหาหลักของภาพไม่ถูกตัดเมื่อปรับขนาด สัดส่วนภาพควรเหมือนกันใน Slider เพื่อความสวยงามของดีไซน์
- สัดส่วนภาพที่พบบ่อย: 16:9, 3:4
- ขนาดความละเอียดที่พบบ่อย (px): 1600x900, 1280x720, 1280x960
อุปกรณ์มือถือมักมีสัดส่วนภาพตรงข้ามกับเดสก์ท็อป คุณอาจต้องใช้ฟีเจอร์ ซ่อนบนอุปกรณ์ เพื่อแสดง Slider บนมือถือให้ถูกต้อง
Photo Gallery
วิดเจ็ต Photo Gallery เป็นวิดเจ็ตที่ยืดหยุ่นที่สุดสำหรับการใช้ภาพ เพราะมีตัวเลือกเลย์เอาต์หลากหลาย เช่น แกลเลอรีแบบตารางที่ภาพทุกภาพขนาดเท่ากัน หรือแบบโมเสกที่แต่ละภาพขนาดต่างกัน
สัดส่วนภาพใน Photo Gallery ควรสะท้อนลักษณะการแสดงผลที่คุณต้องการ
- ตัวอย่างเช่น แกลเลอรีแบบสี่เหลี่ยมจัตุรัสควรใช้สัดส่วน 1:1
- แกลเลอรีแบบภาพแนวตั้งควรใช้สัดส่วนสูง เช่น 2:5 หรือ 200px x 500px
สัดส่วนภาพควรเหมือนกันเพื่อความสวยงามของดีไซน์ ควรเว้นขอบภาพเพื่อใช้เอฟเฟกต์ hover จะได้ไม่ถูกตัดขอบ
- สัดส่วนภาพที่พบบ่อย: ใช้ได้ทุกสัดส่วน
- ขนาดความละเอียดที่พบบ่อย (px): ใช้ได้ทุกขนาด แต่ไม่ควรเกิน 1500px เพื่อความเร็วของหน้าเว็บ
ไอคอน
ไอคอนเป็นส่วนสำคัญของทุกเว็บไซต์ ช่วยเน้นข้อมูลและเพิ่มความทันสมัยให้กับเว็บไซต์ คุณสามารถใช้ PNG แบบโปร่งใส, JPEG หรือ SVG ได้
- สัดส่วนภาพที่พบบ่อย: โดยทั่วไป 1:1 แต่ใช้สัดส่วนอื่นก็ได้
- ขนาดความละเอียดที่พบบ่อย (px): 200x200, 80x80 หรือขนาดใดก็ได้ สำหรับ SVG ใช้ได้ทุกขนาด
SVG คือไฟล์ภาพที่มีโค้ด HTML อยู่ภายใน หมายความว่าเมื่อคุณเพิ่มไอคอน SVG ลงในเว็บไซต์ จะมีโค้ดเพิ่มเข้ามาด้วย
- หากใช้ SVG ที่ซับซ้อนหลายไฟล์ในหน้าเดียวกัน อาจทำให้เว็บไซต์โหลดช้า หากจำเป็นต้องใช้ไอคอน SVG หลายชิ้น แนะนำให้แปลงบางส่วนเป็นภาพปกติ (.png, .jpeg ฯลฯ) เพื่อหลีกเลี่ยงปัญหาการโหลดหรือการทำงาน
Favicon
Favicon จะไม่แสดงบนหน้าเว็บไซต์จริง แต่จะแสดงบนแท็บเมื่อผู้ใช้งานเปิดเว็บไซต์ แนะนำให้ใช้ไฟล์รูปแบบ ICO หากต้องการแปลงไฟล์ภาพเป็น ICO
- สัดส่วนที่ต้องการ: 1:1
- ขนาดความละเอียดที่รองรับ (px): 24x24, 36x36, 48x48
โลโก้
แนะนำให้ใช้ไฟล์ SVG สำหรับโลโก้ เพราะไฟล์ SVG จะไม่ถูกปรับขนาดเหมือนไฟล์ภาพอื่น ๆ แม้จะอัปโหลดโลโก้ขนาดเล็กก็ยังคงความคมชัด
ตัวอย่างการเปรียบเทียบสัดส่วนภาพที่พบบ่อย:
- สัดส่วนภาพเทียบกับความละเอียด: สัดส่วนภาพคืออัตราส่วนระหว่างความกว้างกับความสูง เช่น สัดส่วน 16:9 อาจเป็นภาพ 16x9 px หรือ 1600x900 px ก็ได้ หมายถึงภาพที่มีอัตราส่วนกว้าง:สูงเป็น 16:9
-
สัดส่วนภาพแต่ละอุปกรณ์: แม้ภาพจะถูกปรับให้เหมาะสมกับเว็บไซต์ แต่ไม่ได้เปลี่ยนดีไซน์ของภาพ หากใช้ภาพสัดส่วน 16:9 บนเดสก์ท็อปจะดูดีเพราะหน้าจอกว้าง แต่บนมือถือที่จอเล็ก ภาพ 16:9 อาจดูเล็ก
คุณสามารถใช้ฟีเจอร์ ซ่อนบนอุปกรณ์ เพื่อสร้างเวอร์ชันเฉพาะสำหรับแต่ละอุปกรณ์ หรือ ปรับขนาดภาพ ให้เหมาะสม การเปลี่ยนขนาดนี้ไม่ขึ้นกับอุปกรณ์
ข้อควรพิจารณาสำคัญ
การอัปโหลดภาพความละเอียดสูงสุดสำหรับเว็บไซต์ของคุณ จะช่วยให้ภาพบนเว็บไซต์คมชัดสำหรับลูกค้าและผู้เข้าชม
- แต่อย่าลืมว่าภาพขนาดใหญ่จะ ส่งผลต่อความเร็วในการโหลดหน้าเว็บอย่างมาก เนื่องจากภาพความละเอียดสูงจะถูกย่อขนาดลง ผู้ใช้งานส่วนใหญ่จะไม่สังเกตเห็นความแตกต่างของความละเอียด
- ควรอัปโหลดภาพที่ มีขนาดเท่ากับการใช้งานจริง เช่น หากภาพบนเว็บไซต์แสดงขนาด 300x300px ก็ไม่ควรอัปโหลดภาพขนาด 4000x4000px
ข้อคิดเห็น
โปรด ลงชื่อเข้าใช้ เพื่อแสดงข้อคิดเห็น