ปรับขนาดรูปภาพและมาตราส่วนใน SharePoint Modern pages

หน้าและ 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	อัตราส่วนกว้างยาว
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 แกลเลอรีรูปภาพ	อัตราส่วนต่อไปนี้สามารถใช้ในเค้าโครงที่แตกต่างกัน: เค้าโครง Brick และ Carousel คํานึงถึงอัตราส่วนกว้างยาวของรูปภาพทั้งหมด: 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