การปรับขนาดและมาตราส่วนรูปภาพในหน้าสมัยใหม่ของ SharePoint

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

รูปขนาดใดที่ทํางานได้ดีที่สุด

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

การค้นหาขนาดรูปที่ดีที่สุดสําหรับหน้าของคุณจะขึ้นอยู่กับปัจจัยเหล่านี้:

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

อัตราส่วน

อัตราส่วนกว้างยาวคือความสัมพันธ์ระหว่างความกว้างและความสูงของรูปภาพ ซึ่งโดยปกติจะแสดงเป็นตัวเลขสองจํานวน เช่น 3:2, 4:3 หรือ 16:9 ความกว้างจะเป็นตัวเลขแรกเสมอ ตัวอย่างเช่น อัตราส่วนกว้าง 16:9 อาจมีความกว้าง 1600 พิกเซล และความสูง 900 พิกเซล หรืออาจเป็น 1920 x 1080, 1280 x 720 หรือการผสมความกว้าง/ความสูงอื่นๆ ที่สามารถคํานวณได้เพื่อให้เท่ากับ 16:9 คุณสามารถค้นหาเครื่องคิดเลขอัตราส่วนทางออนไลน์และในเครื่องมือแก้ไขรูปภาพบางอย่างเพื่อช่วยคุณกําหนดอัตราส่วนกว้างยาวของรูปภาพของคุณ 

ในกรณีส่วนใหญ่ รูปใน Web Part สมัยใหม่จะทํางานได้ดีที่สุดในเค้าโครงและอุปกรณ์เมื่อมีอัตราส่วนกว้างยาว 16:9 หรือ 4:3 ทั้งนี้ขึ้นอยู่กับเค้าโครง

เค้าโครงคอลัมน์

หน้าสามารถถูกจัดวางเค้าโครงด้วยส่วนที่รวมชนิดคอลัมน์และเค้าโครงที่แตกต่างกัน เช่น คอลัมน์แบบเต็มความกว้าง หนึ่งคอลัมน์ สองคอลัมน์ สามคอลัมน์ คอลัมน์ซ้ายหนึ่งในสาม และคอลัมน์ขวาหนึ่งในสาม กฎทั่วไปสําหรับรูปภาพที่คาดว่าจะเติมความกว้างของคอลัมน์คือจะมีความกว้างอย่างน้อยเท่ากับคอลัมน์ที่วาง ตัวอย่างเช่น รูปใน Web Part สําหรับรูปในหนึ่งคอลัมน์ควรมีความกว้างอย่างน้อย 1204 พิกเซล

ต่อไปนี้เป็นแนวทางความกว้างสําหรับแต่ละเค้าโครงคอลัมน์:

เค้าโครง	ความกว้างเป็นพิกเซล
คอลัมน์แบบเต็มความกว้าง	1920
หนึ่งคอลัมน์	1204
สองคอลัมน์	586 ต่อคอลัมน์
สามคอลัมน์	380 ต่อคอลัมน์
คอลัมน์ซ้ายหนึ่งในสาม	380 สําหรับคอลัมน์ด้านซ้าย 792 สําหรับคอลัมน์ด้านขวา
คอลัมน์ขวาหนึ่งในสาม	792 สําหรับคอลัมน์ด้านซ้าย 380 สําหรับคอลัมน์ด้านขวา

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

ความสูงของรูปที่วางอยู่ในเค้าโครงคอลัมน์อื่นๆ จะขึ้นอยู่กับอัตราส่วนกว้างยาวของคุณ ต่อไปนี้เป็นแนวทางความสูง/ความกว้างสําหรับอัตราส่วนกว้างยาว 16:9 และ 4:3 (ปัดเศษขึ้น/ลงเป็นพิกเซลที่ใกล้ที่สุด) วิธีนี้มีประโยชน์ในการทําให้รูปภาพของคุณมีความกว้างและความสูงที่ปรับขนาดอย่างเหมาะสมสําหรับอุปกรณ์เคลื่อนที่ ตัวอย่างเช่น:

อัตรา เค้า โครง	16 x 9 ความกว้าง x ความสูงเป็นพิกเซล	4 x 3 ความกว้าง x ความสูงเป็นพิกเซล
หนึ่งคอลัมน์	1204 x 677	1204 x 903
สองคอลัมน์	586 x 330	586 x 439
สามคอลัมน์	380 x 214	380 x 285
คอลัมน์ซ้ายหนึ่งในสาม	380 x 446 สําหรับคอลัมน์ด้านซ้าย 792 x 446 สําหรับคอลัมน์ด้านขวา	380 x 594 สําหรับคอลัมน์ด้านซ้าย 792 x 594 สําหรับคอลัมน์ด้านขวา
คอลัมน์ขวาหนึ่งในสาม	792 x 446 สําหรับคอลัมน์ด้านซ้าย 380 x 446 สําหรับคอลัมน์ด้านขวา	792 x 594 สําหรับคอลัมน์ด้านซ้าย 380 x 594 สําหรับคอลัมน์ด้านขวา

เค้าโครง Web Part

เค้าโครงใน Web Part ที่คุณใช้จะมีผลต่อขนาดรูปของคุณด้วย ตัวอย่างต่อไปนี้แสดง Web Part ต่างๆ และตัวเลือกและอัตราส่วนกว้างยาวบางส่วนที่คุณสามารถใช้ได้

Web Part Hero	อัตราส่วนกว้างยาวต่อไปนี้สําหรับเค้าโครงไทล์และเลเยอร์คือ: ไทล์: ความสูงของ Web Part จะถูกปรับขนาดให้เป็นไปตามอัตราส่วนกว้างยาว 8:3 และรูปภายใน Web Part จะปรับมาตราส่วนตามอัตราส่วนกว้างยาว 4:3 เลเยอร์: เลเยอร์แต่ละชั้นจะปรับขนาดตามอัตราส่วนกว้างยาว 8:3 และรูปภาพภายในเลเยอร์แต่ละเลเยอร์จะปรับมาตราส่วนให้ใกล้เคียงกับ 16:9 บนอุปกรณ์เคลื่อนที่ มีการใช้รูปแบบวงล้อเวลา 16:9 ต่อไปนี้เป็นตัวอย่างของรูปภาพที่แสดงในเค้าโครงเลเยอร์ (ด้านบน) และเค้าโครงไทล์ (ด้านล่าง):
Web Part เนื้อหาที่เน้น	16:9 คืออัตราส่วนกว้างยาวสําหรับเค้าโครงวงล้อ แถบฟิล์ม และเส้นตาราง ต่อไปนี้เป็นตัวอย่างของอัตราส่วนกว้างยาว 16:9 รูปแรกแสดงเค้าโครง แถบฟิล์ม และรูปที่สองแสดงเค้าโครง เส้นตาราง:
Web Part รูป	รูปภาพจะขยายให้มีความกว้างของส่วนที่มี Web Part ต่อไปนี้เป็นตัวอย่างของรูปภาพใน Web Part รูปภาพที่ใช้อัตราส่วนกว้างยาว 16:9 คุณยังมีตัวเลือกในการเปลี่ยนอัตราส่วนกว้างยาวหรือการครอบตัดแบบใช้มืออิสระโดยใช้เครื่องมือแก้ไขรูปภาพ หรือใช้จุดจับสําหรับปรับขนาดเพื่อทําให้รูปภาพใหญ่ขึ้นหรือเล็กลง
Web Part แกลเลอรีรูปภาพ	อัตราส่วนกว้างยาวต่อไปนี้สามารถใช้ในเค้าโครงต่างๆ ได้: เค้าโครงอิฐและวงล้อเคารพอัตราส่วนกว้างยาวของรูปภาพทั้งหมด: 16:9, 1:1, 4:3 และอื่นๆ เค้าโครงเส้นตารางอนุญาตให้มีอัตราส่วนกว้างยาวสามแบบ: มาตรฐาน 1:1 ตาราง กว้าง 16:9 และ 4:3 รูปภาพแรกแสดงเค้าโครงอิฐใน Web Part แกลเลอรีรูปภาพ (รักษาอัตราส่วนกว้างยาว 16:9 และ 1:1) รูปที่สองแสดงเค้าโครงเส้นตาราง (โดยใช้อัตราส่วนกว้างยาว 1:1)
Web Part ข่าว	รูปภาพใน Web Part ข่าวอาจเป็น 4:3, 16:9 หรือ 21:9 ทั้งนี้ขึ้นอยู่กับเค้าโครง ต่อไปนี้เป็นตัวอย่างของรูปภาพในเรื่องราวยอดนิยมและเค้าโครงวงล้อ:
พื้นที่ชื่อเรื่องของหน้า	รูปภาพจะดูดีที่สุดเมื่อรูปภาพเป็นแนวนอนหรือ 16:9 หรือสูงกว่าในอัตราส่วนกว้างยาว และเมื่อรูปมีขนาดอย่างน้อย 1 MB นอกจากนี้ อย่าลืมตั้งค่าจุดโฟกัสเพื่อเก็บส่วนที่สําคัญที่สุดของรูปภาพในมุมมอง โดยเฉพาะอย่างยิ่งเมื่อใช้รูปภาพในรูปขนาดย่อ เค้าโครงข่าวสาร และผลลัพธ์การค้นหา ตัวอย่าง (รูปภาพต้นฉบับ 16:9) ที่มีจุดโฟกัสตั้งค่าอยู่บนลําโพง:
รูปขนาดย่อของหน้า	รูปขนาดย่อของหน้าจะแสดงในสถานที่ต่างๆ เช่น ผลลัพธ์การค้นหา ผลลัพธ์เนื้อหาที่เน้น โพสต์ข่าวสาร และอื่นๆ ตามค่าเริ่มต้น รูปขนาดย่อจะมาจากพื้นที่ชื่อเรื่องของหน้าหรือจาก Web Part ที่อยู่ในลําดับแรกบนหน้า (เช่น ด้านบนซ้ายของเค้าโครงหน้า) คุณสามารถแทนที่ค่าเริ่มต้นและเปลี่ยนรูปขนาดย่อของหน้าได้ เมื่อทําเช่นนั้น คุณควรใช้รูปภาพที่มีอัตราส่วนกว้างยาว 16:9 ตัวอย่าง (รูปต้นฉบับ 16:9):
Web Part ลิงค์ด่วน	Web Part ลิงก์ด่วนมีเค้าโครงที่แตกต่างกันหกแบบ นี่คืออัตราส่วนกว้างยาวที่กําหนดไว้ล่วงหน้า: ขนาดกะทัดรัด, รายการ, กระเบื้อง: 1:1, 4:3 แถบฟิล์ม, กริด, ปุ่ม: 16:9 รูปแรกแสดงเค้าโครง กระชับ ใน Web Part ลิงก์ด่วน รูปที่สองแสดง Web Part ลิงก์ด่วนเดียวกันโดยใช้เค้าโครง แถบฟิล์ม

คําแนะนําเกี่ยวกับรูปส่วนหัวของไซต์

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

องค์ประกอบ	คำอธิบาย	คำแนะนำ ความกว้าง x ความสูงเป็นพิกเซล
โลโก้ไซต์	โลโก้ขนาดใหญ่ที่สามารถไม่เป็นสี่เหลี่ยมจัตุรัสและโปร่งใสขึ้นอยู่กับการออกแบบที่อัปโหลด	192 x 64 รูปแบบ: PNG, JPEG, SVG (ไม่อนุญาตให้ใช้ SVG บนไซต์ที่เชื่อมต่อกับกลุ่ม)
รูปขนาดย่อของโลโก้ไซต์	รูปขนาดย่อของโลโก้สี่เหลี่ยมจัตุรัสที่ใช้ถ้าไม่มีการอัปโหลดโลโก้ของไซต์หรือในสถานที่ที่จําเป็นต้องมีรูปแบบสี่เหลี่ยมจัตุรัส องค์ประกอบนี้จําเป็น	64 x 64 รูปแบบ: PNG, JPEG, SVG (ไม่อนุญาตให้ใช้ SVG บนไซต์ที่เชื่อมต่อกับกลุ่ม)
โลโก้ไซต์เค้าโครงเพิ่มเติม	เค้าโครงส่วนหัวเพิ่มเติมมีความกว้างของโลโก้ไซต์เพิ่มเติม	300 x 64 รูปแบบ: JPEG, PNG, SVG
รูปพื้นหลังเค้าโครงแบบขยาย	รูปพื้นหลังใหม่ที่สามารถใช้กับส่วนหัวแบบขยายได้	2560 x 164 รูปแบบ: JPEG, PNG