ภาพเป็นส่วนสำคัญที่ไม่อาจหายไปจากเว็บไซต์ใด ๆ การรวมภาพเข้าไป เพิ่มประสบการณ์การใช้งานของผู้ใช้ และช่วยให้การนำทางของแขกของคุณเป็นไปอย่างราบรื่นมากขึ้น
บทความนี้รวม แนวทางพื้นฐาน สำหรับการจัดการภาพบน เว็บไซต์ Cloudbeds
จัดการภาพสำหรับเว็บไซต์ Cloudbeds ของคุณ
- การปรับปรุงสามารถถูก ปิดใช้งาน สำหรับภาพพื้นหลัง วิดเจ็ตภาพ และวิดเจ็ตแกลเลอรีภาพ
- การปิดใช้งานการปรับปรุงภาพอาจมีผลต่อความเร็วหน้าเว็บและประสิทธิภาพ
- ความกว้างของภาพพื้นหลัง: 2880px
- คอมพิวเตอร์: 1920px
- แท็บเล็ต: 1280px
- โทรศัพท์มือถือ: 640px รูปขนาดย่อ
-
รูปขนาดย่อบล็อก:
- 160px
- 300px
- Image Picker ช่วยให้คุณสามารถ แก้ไขด่วน ภาพในเว็บไซต์ของคุณ:
- ครอบตัดหรือหมุน ภาพในเว็บไซต์ของคุณโดยตรงจาก Image Picker
- คลิกที่ภาพบนเว็บไซต์ของคุณเพื่อเปิด ตัวแก้ไขเนื้อหา และคลิกแก้ไข
- ใช้ เมนูด้านล่าง ของภาพเพื่อเฟรม, เพิ่มข้อความ, ปรับ, ครอบตัด, และโฟกัสภาพ
- เมื่อคุณพอใจกับภาพที่คุณสร้างแล้ว คลิก บันทึกและปิด และภาพจะถูกบันทึกในคลังข้อมูลของคุณและบนหน้าเว็บ
หมายเหตุ:
- เมื่อคุณแก้ไขภาพด้วยตัวแก้ไขภาพ มันจะถูกบันทึกภายใต้ ภาพของเว็บไซต์
- ภาพจะไม่แทนที่ภาพก่อนหน้าเมื่อทำการแก้ไข, มันจะสร้างรุ่นใหม่
- โปรดทราบว่าบางวิดเจ็ตช่วยให้คุณสามารถ เพิ่มการปรับแต่งเพิ่มเติม เช่น เงาลอย, เส้นขอบ, และโอเวอร์เลย์ โปรดดูคำแนะนำที่เกี่ยวข้องกับวิดเจ็ตที่คุณกำลังใช้เพื่อข้อมูลเพิ่มเติม
คำแนะนำเกี่ยวกับภาพ
ทุกครั้งที่คุณอัปโหลดภาพ จะมีการสร้างสำเนาขนาดเล็กของภาพสูงสุด 5 รูป แอป Website Builder จากนั้น แทรกโดยอัตโนมัติ ภาพที่มีขนาดเหมาะสมเข้าไปในเว็บไซต์บนเดสก์ท็อป แท็บเล็ต และมือถือ เพื่อให้แน่ใจว่าผู้เยี่ยมชมเว็บไซต์ของคุณเห็นภาพที่มีขนาดเหมาะสมสำหรับอุปกรณ์ของพวกเขาเสมอ
สูงสุด 15K ไฟล์ (รวมถึงภาพ วิดีโอ คลิปเสียง และไฟล์) สามารถอัปโหลดต่อเว็บไซต์ได้ และแต่ละไฟล์ควรมีขนาด ไม่เกิน 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
- การอัปโหลดภาพที่ใหญ่กว่าขีดจำกัดอาจทำให้เกิด ข้อผิดพลาด ต่อไปนี้:
- ภาพไม่สามารถอัปโหลดได้
- ภาพอัปโหลดแล้ว แต่รูปตัวอย่างในตัวเลือกภาพไม่แสดง
- ภาพไม่โหลดในตัวแก้ไข
- ภาพไม่โหลดบนเว็บไซต์สด
สไลเดอร์
วิดเจ็ตสไลเดอร์มักถูกใช้งานร่วมกับภาพขนาดใหญ่เพื่อผลลัพธ์ที่น่าตื่นเต้น สไลเดอร์มักยืดจากขอบไปยังขอบอีกด้วย ดังนั้นควรใช้ภาพที่มีความกว้างมากขึ้นเพื่อให้พอดีกับสไลเดอร์ สำหรับสไลเดอร์ที่เป็นสี่เหลี่ยมจตุรัส ให้ใช้อัตราส่วนเท่ากัน เช่น 1:1
ควรเลือกใช้ภาพที่มีพื้นที่เพียงพอเพื่อไม่ให้เนื้อหาหลักของภาพถูกตัดออกเมื่อปรับขนาด อัตราส่วนของภาพควรเหมือนกันในสไลเดอร์เพื่อความสม่ำเสมอในการออกแบบ
- อัตราส่วนที่ใช้บ่อย: 16:9, 3:4
- ขนาดความละเอียดที่ใช้บ่อย (px): 1600x900, 1280x720, 1280x960
อุปกรณ์มือถือมักมีอัตราส่วนที่ต่างกันจากอุปกรณ์เดสก์ท็อป คุณอาจต้อง ใช้คุณสมบัติซ่อนบนอุปกรณ์ เพื่อแสดงสไลเดอร์บนมือถืออย่างถูกต้อง
แกลเลอรีภาพ
วิดเจ็ตแกลเลอรีภาพเป็นวิดเจ็ตที่มีความยืดหยุ่นมากที่สุดในการใช้กับภาพ เนื่องจากมีตัวเลือกเลย์เอาต์มากมาย เช่น คุณสามารถมีแกลเลอรีแบบกระเบื้องที่มีขนาดเท่ากันสำหรับภาพทั้งหมด หรือโมเสกที่มีขนาดต่างกันต่อภาพ
อัตราส่วนของภาพในแกลเลอรีภาพควรสะท้อนถึงวิธีการแสดงของคุณ
- ตัวอย่างเช่น แกลเลอรีสไตล์สี่เหลี่ยมจตุรัสควรมี อัตราส่วน 1:1 ของภาพ
- แกลเลอรีสไตล์ภาพสูงควรมีอัตราส่วนความสูงยาวมากขึ้น, เช่น 2:5 หรือ 200px กว้าง 500px ยาว
อัตราส่วนของภาพควรเหมือนกันเพื่อความสม่ำเสมอในการออกแบบ ปล่อยพื้นที่บางในภาพเพื่อใช้เอฟเฟกต์ hover เพื่อไม่ให้ภาพของคุณถูกตัดออก
- อัตราส่วนที่ใช้บ่อย: อันไหนก็ได้
- ขนาดความละเอียดที่ใช้บ่อย (px): อันไหนก็ได้ แต่ไม่ควรใหญ่กว่า 1500px เพื่อความเร็วในการโหลดหน้า
ไอคอน
ไอคอนเป็นส่วนสำคัญมากของเว็บไซต์ มันเป็นตัวชี้วัดที่มองเห็นสำหรับข้อมูลและสามารถเพิ่มลุคสมัยให้กับเว็บไซต์ของคุณ คุณสามารถใช้ PNGs โปร่งใส, JPEGs หรือ SVGs
- อัตราส่วนที่ใช้บ่อย: โดยทั่วไป 1:1, แต่อัตราส่วนใดก็ได้
- ขนาดความละเอียดที่ใช้บ่อย (px): 200x200, 80x80 หรืออันไหนก็ได้ SVGs สามารถเป็นอัตราส่วนใดก็ได้
- SVGs เป็นไฟล์ภาพที่มีโค้ด HTML ซึ่งหมายความว่าเมื่อคุณเพิ่มไอคอน SVG เข้าไปในเว็บไซต์ของคุณ คุณก็กำลังเพิ่มบรรทัดโค้ดด้วย
- SVGs ที่ซับซ้อนหลายรูปแบบอาจเพิ่มบรรทัดโค้ดหลายพันบรรทัดและทำให้เว็บไซต์ของคุณโหลดช้าลง หากคุณต้องการใช้ไอคอน SVG หลายรูปแบบบนหน้าเดียวกัน เราขอแนะนำให้เปลี่ยนบางส่วนของมันเป็นภาพปกติ (.png, .jpeg, เป็นต้น) เพื่อหลีกเลี่ยงปัญหาในการโหลดหรือปัญหาในการใช้งาน
ไอคอนโปรไฟล์
ไอคอนโปรไฟล์ไม่ได้ใช้บนเว็บไซต์จริง แต่จะแสดงบนแท็บเมื่อผู้ใช้เปิดเว็บไซต์ของคุณ แนะนำให้ใช้รูปแบบ ICO เพื่อแปลงไฟล์ภาพเป็น ICO
- อัตราส่วนที่ต้องการ: 1:1
- ขนาดความละเอียดที่อนุญาต (px): 24x24, 36x36, 48x48
โลโก้
แนะนำให้ใช้รูปแบบ SVG สำหรับภาพโลโก้ เนื่องจากไฟล์ SVG ไม่ได้ถูกปรับแต่งในลักษณะเดียวกับไฟล์ภาพอื่น ๆ ดังนั้น แม้ว่าโลโก้ที่คุณอัปโหลดจะมีขนาดเล็ก คุณก็จะไม่สูญเสียคุณภาพ
การแสดงอัตราส่วนสองแบบที่พบบ่อยที่สุด:
-
อัตราส่วน ต่อ ความละเอียด: อัตราส่วนคืออัตราส่วนของความกว้างและความสูงของภาพ อัตราส่วน 16:9 สามารถเป็นภาพขนาด 16x9 px หรือ 1600x900 px ซึ่งเป็นอัตราส่วนของภาพใด ๆ ที่มีอัตราส่วน 16:9
-
อัตราส่วนต่ออุปกรณ์: ขณะที่ภาพถูกปรับแต่งบนเว็บไซต์ของคุณ มันจะไม่ปรับขนาดการออกแบบของภาพบนเว็บไซต์ของคุณจริง ๆ หากคุณใช้ภาพบนเดสก์ท็อปที่มีอัตราส่วน 16:9 มันจะดูสมบูรณ์บนเดสก์ท็อปเนื่องจากอุปกรณ์เดสก์ท็อปมีความกว้าง แต่อุปกรณ์มือถือมีขนาดเล็กมาก ดังนั้น อัตราส่วน 16:9 อาจดูเล็กบางครั้ง
เพื่อชดเชย คุณสามารถใช้คุณสมบัติ ซ่อนบนอุปกรณ์ เพื่อสร้างเวอร์ชันที่เฉพาะเจาะจงสำหรับอุปกรณ์เหล่านั้น หรือคุณสามารถ ปรับขนาดของภาพ เพื่อให้พอดีกับขนาด การเปลี่ยนแปลงขนาดเป็นอิสระจากอุปกรณ์
ข้อคิดที่สำคัญ
- การอัปโหลดความละเอียดสูงสุดสำหรับเว็บไซต์ของคุณ จะทำให้ ภาพของเว็บไซต์ของคุณมีความละเอียดสูงสำหรับลูกค้าและผู้ใช้งาน
- อย่างไรก็ตาม จำไว้ว่า ภาพขนาดใหญ่ยังมี ผลกระทบอย่างมากต่อความเร็วของหน้าเว็บ เนื่องจากภาพที่มีความละเอียดสูงถูกย่อลง ผู้ใช้งานมักจะไม่สังเกตความแตกต่างในความละเอียด
- ควรอัปโหลดภาพที่มีขนาด ใหญ่ตามที่ต้องการใช้ เช่น หากคุณมีรูปภาพขนาด 300px กว้าง x 300px สูงบนเว็บไซต์ของคุณ คุณไม่ควรอัปโหลดเป็นภาพขนาด 4000px กว้าง x 4000px
ข้อคิดเห็น
โปรด ลงชื่อเข้าใช้ เพื่อแสดงข้อคิดเห็น