หน้าและ Web Part สมัยใหม่ได้รับการออกแบบมาเพื่อตอบสนองอย่างสมบูรณ์บนอุปกรณ์ต่างๆ ซึ่งหมายความว่ารูปภาพที่ใช้ใน Web Part จะปรับขนาดแตกต่างกันโดยขึ้นอยู่กับว่าแสดงเค้าโครงใดและอุปกรณ์ที่ใช้ดูเค้าโครงใด ตัวอย่างเช่น หน้าที่ทันสมัยได้รับการออกแบบมาเพื่อให้ดูดีบนอุปกรณ์เคลื่อนที่ และการปรับขนาดรูปภาพอัตโนมัติช่วยสร้างประสบการณ์ที่ดึงดูดใจ
ขนาดของรูปใดดีที่สุด
เนื่องจากการออกแบบหน้าที่ตอบสนองแล้ว ไม่มีความสูงหรือความกว้างที่ระบุเป็นพิกเซลที่จะรับรองว่ารูปภาพจะรักษารูปร่างตามที่ระบุระหว่างอุปกรณ์และเค้าโครง รูปภาพจะถูกปรับขนาดและครอบตัดโดยอัตโนมัติเพื่อแสดงผลลัพธ์ที่ดีที่สุดที่เป็นไปได้บนอุปกรณ์และเค้าโครงที่หลากหลาย อย่างไรก็ตาม มีแนวทางบางอย่างที่สามารถช่วยคุณตรวจสอบให้แน่ใจว่ารูปภาพของคุณดูดีบนหน้าของคุณ
การค้นหาขนาดรูปภาพที่ดีที่สุดในเพจของคุณจะขึ้นอยู่กับปัจจัยเหล่านี้:
-
อัตราส่วนกว้างยาว : ความสัมพันธ์ระหว่างความสูงและความกว้างของรูป
-
เค้าโครงคอลัมน์: ชนิดและจํานวนคอลัมน์บนหน้าของคุณ
-
เค้าโครง WebPart : เค้าโครงที่คุณเลือกจะใช้ 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 (ปัดเศษขึ้น/ลงเป็นพิกเซลที่ใกล้ที่สุด) ซึ่งจะเป็นประโยชน์ในการเก็บรูปภาพของคุณที่ความกว้างและความสูงที่ปรับมาตราส่วนอย่างเหมาะสมบนอุปกรณ์เคลื่อนที่ ตัวอย่างเช่น
|
อัตราส่วนกว้างยาว LAYOUT |
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 for left column; 380 x 446 คอลัมน์ขวา |
792 x 594 for left column; 380 x 594 คอลัมน์ขวา |
เค้าโครง Web Part
เค้าโครงใน Web Part ที่คุณใช้จะมีผลกับมาตราส่วนรูปของคุณ ตัวอย่างต่อไปนี้แสดง Web Part ต่างๆ และเค้าโครงของ Web Part ภายในหนึ่งคอลัมน์ และอัตราส่วนกว้างยาวที่ใช้ในแต่ละส่วน
พิจารณารูปนี้ซึ่งมีอัตราส่วนกว้างยาวดั้งเดิมเป็น 16:9
ต่อไปนี้คือตัวอย่างของรูปนี้ที่แสดงในเค้าโครงหน้าหนึ่งคอลัมน์ใน Web Part และเค้าโครงต่างๆ
|
อัตราส่วนกว้างยาวต่อไปนี้ของเค้าโครงไทล์และชั้น คือ
ต่อไปนี้คือตัวอย่างของรูปที่แสดงในเค้าโครงชั้น (ด้านบน) และเค้าโครงไทล์ (ด้านล่าง)
|
|
|
16:9 คืออัตราส่วนกว้างยาวของวงล้อ แถบฟิล์ม และเค้าโครงของการ์ด นี่คือตัวอย่างของภาพที่แสดงในเค้าโครงแถบฟิล์ม (ด้านบน) และเค้าโครงของการ์ด (ด้านล่าง)
|
|
|
รูปภาพจะขยายไปที่ความกว้างของส่วนที่มี Web Part คุณมีตัวเลือกในการเปลี่ยนอัตราส่วนกว้างยาวหรือครอบตัดด้วยมือโดยใช้แถบเครื่องมือรูปภาพ หรือใช้จุดจับปรับขนาดเพื่อขยายรูปภาพให้ใหญ่ขึ้นหรือเล็กลง นี่คือตัวอย่างที่แสดงเครื่องหมายครอบตัดรูปภาพ (เส้นสีน้าเงิน) ที่เวลา 4:3
|
|
|
อัตราส่วนกว้างยาวต่อไปนี้ถูกใช้ในเค้าโครงอื่น:
ต่อไปนี้คือตัวอย่างของรูปที่แสดงในเค้าโครงไทล์ (ด้านบน) และเค้าโครงรูปก้อนก้อน (ด้านล่าง)
|
|
|
รูปใน Web Part ข่าวสารสามารถเป็น 4:3, 16:9 หรือ 21:9 ได้ ทั้งนี้ขึ้นอยู่กับเค้าโครง ต่อไปนี้คือตัวอย่างของรูปภาพในเรื่องราวด้านบนและเค้าโครงวงล้อ
|
|
|
รูปภาพจะดูดีที่สุดเมื่อเป็นแนวนอน หรืออัตราส่วนกว้างยาว 16:9 หรือใหม่กว่า และเมื่อมีขนาดอย่างน้อย 1 MB และอย่าลืมตั้งค่าจุดศูนย์รวมให้ส่วนที่สําคัญที่สุดของรูปภาพอยู่ในมุมมอง โดยเฉพาะเมื่อใช้รูปภาพในรูปขนาดย่อ เค้าโครงข่าวสาร และผลลัพธ์การค้นหา ตัวอย่าง (ภาพต้นฉบับ 16:9) ที่มีชุดจุดโฟกัสบนลําโพง
|
|
|
รูปขนาดย่อของหน้าจะแสดงในที่ต่างๆ เช่น ผลลัพธ์การค้นหา ผลลัพธ์เนื้อหาที่ถูกเน้น โพสต์ข่าวสาร และอื่นๆ ตามค่าเริ่มต้น รูปขนาดย่อจะมาจากพื้นที่ชื่อเรื่องของหน้า หรือจาก Web Part ที่เรียงตามล>บแรกบนหน้า (เช่น ด้านบนซ้ายของเค้าโครงหน้า) คุณสามารถแทนที่ค่าเริ่มต้นและเปลี่ยนรูปขนาดย่อของหน้าได้ เมื่อคุณบันทึก คุณควรใช้รูปภาพที่มีอัตราส่วนกว้างยาว 16:9 ตัวอย่าง (รูปภาพต้นฉบับ 16:9)
|
|
|
Web Part ลิงก์ด่วนมีเค้าโครงที่แตกต่างกันหกเค้าโครง ต่อไปนี้คืออัตราส่วนกว้างยาวที่แนะนา:
ต่อไปนี้คือตัวอย่างของรูปภาพที่แสดงในเค้าโครงแบบกะทัดรัด (ด้านบน) และเค้าโครงแถบฟิล์ม (ด้านล่าง)
|
เคล็ดลับ:
-
เมื่อคุณเพิ่มรูปภาพลงในพื้นที่ชื่อหน้าหรือ Web Part Hero คุณควรตั้งค่าจุดโฟกัสในพื้นที่ของรูปที่คุณต้องการแสดงเสมอ เมื่อต้องการเรียนรู้เพิ่มเติมเกี่ยวกับการตั้งค่าจุดศูนย์รวมของสถานการณ์สมมติสองสถานการณ์นี้ ให้ดู เปลี่ยนจุดโฟกัสของรูปภาพในWeb Part Hero และปรับแต่งพื้นที่ชื่อเรื่องในหน้า
-
ข้อเสนอแนะรูปส่วนหัวของไซต์
นอกจากหน้าแล้ว คุณอาจต้องการเพิ่มโลโก้หรือรูปแบบปรับแต่งเองในเค้าโครงแบบขยาย ต่อไปนี้เป็นข้อแนะนเกี่ยวกับขนาดและองค์ประกอบเหล่านั้น
|
องค์ประกอบ |
คำอธิบาย |
คำแนะนำ ความกว้าง x ความสูงเป็นพิกเซล |
|---|---|---|
|
โลโก้ไซต์ |
โลโก้ขนาดใหญ่ที่สามารถไม่สี่เหลี่ยมจัตุรัสและโปร่งใสทั้งนี้ขึ้นอยู่กับการออกแบบที่อัปโหลด |
192 x 64 รูปแบบ: PNG, JPEG, SVG (ไม่อนุญาตให้ใช้ SVG บนไซต์ที่เชื่อมต่อกลุ่ม) |
|
รูปขนาดย่อโลโก้ไซต์ |
รูปขนาดย่อโลโก้สี่เหลี่ยมจัตุรัสที่จะใช้ถ้าไม่มีการอัปโหลดโลโก้ไซต์หรืออยู่ในที่ที่ต้องใช้รูปแบบสี่เหลี่ยมจัตุรัส องค์ประกอบนี้ต้องระบุ |
64 x 64 รูปแบบ: PNG, JPEG, SVG (ไม่อนุญาตให้ใช้ SVG บนไซต์ที่เชื่อมต่อกลุ่ม) |
|
โลโก้ไซต์เค้าโครงเพิ่มเติม |
เค้าโครงส่วนหัวที่ขยายจะมีความกว้างของโลโก้ไซต์ที่ขยายออก |
300 x 64p รูปแบบ: JPEG, PNG, SVG |
|
รูปพื้นหลังเค้าโครงเพิ่มเติม |
รูปพื้นหลังใหม่ที่สามารถใช้งานร่วมกับส่วนหัวแบบขยายได้ |
2560 x 164 รูปแบบ: JPEG, PNG |
