การระบุขนาดรูปภาพเพื่อปรับปรุงประสิทธิภาพเบราว์เซอร์

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

ภายใต้การใช้เครือข่ายให้ระบุขนาดภาพฉันเห็นสิ่งต่อไปนี้

A width and height should be specified for all images in order to speed up 
page display. The following image(s) are missing a width and/or height:

ตอนนี้ฉันสับสน ฉันควรเพิ่มคุณสมบัติความกว้างและความสูงให้กับรูปภาพของฉันหรือไม่แม้ว่าจะมีขนาดที่เหมาะสมแล้ว ดูเหมือนซ้ำซ้อน

เบราว์เซอร์ดาวน์โหลดข้อมูลแบบขนานและพยายามเริ่มแสดงผลหน้าเว็บโดยเร็วที่สุด

หากคุณไม่ได้ระบุขนาดเบราว์เซอร์จะไม่ทราบว่ารูปภาพจะมีขนาดใหญ่เท่าใดจนกระทั่งหลังจากการดาวน์โหลดรูปภาพเสร็จสมบูรณ์

การหน่วงเวลานี้บังคับให้เบราว์เซอร์ทำการวาดใหม่หรือจัดเรียงเค้าโครงใหม่ - การหน่วงเวลาโหลดหน้าเว็บ

รูปภาพเพิ่มเติมที่มีปัญหานี้ - หน้าช้าลงจะโหลด

หากคุณระบุขนาดรูปภาพทั้งในรูปแบบ HTML หรือ CSS เบราว์เซอร์สามารถหลีกเลี่ยงการทำซ้ำและการเรียงลำดับเนื้อหาใหม่

ด้วยเหตุนี้คุณควรระบุขนาดภาพเสมอ Google มีเคล็ดลับเกี่ยวกับเรื่องนี้

https://developers.google.com/speed/docs/best-practices/rendering#SpecifyImageDimensions

สำหรับข้อมูลเพิ่มเติมเกี่ยวกับกระบวนการแสดงผลเบราว์เซอร์โปรดดูที่: http://taligarsiel.com/Projects/howbrowserswork1.htm

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

Responsive Design ไม่ได้ใช้คุณสมบัติความกว้างหรือความสูงใด ๆ

Google Development Tools เป็นแนวทางและคุณไม่ควรบังคับใช้ทุกสิ่งที่คุณอ่านบนเว็บไซต์ของพวกเขาอันที่จริงแล้วบางสิ่งนั้นล้าสมัยแล้ว เว็บไซต์ตอบสนองส่วนใหญ่ไม่ได้ใช้widthหรือheightต้องการให้รูปภาพปรับให้เข้ากับขนาดหน้าจอและโดยใช้ความกว้างและความสูง<img>คงที่ซึ่งจะทำให้ประสบการณ์การใช้งานของผู้ใช้ลดลงและ Google ได้ประกาศปัจจัยสำคัญอย่างหนึ่งนี้

วิธีแก้ปัญหา CSS

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

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

ฉันคิดว่าสิ่งนี้จะดูเหมือน:

การออกแบบคงที่ .ic {width:500px;height:500px;}

การออกแบบที่ตอบสนอง:

@media only screen and (max-width: 40em){.ic{width:1px;height:1px;}} Mobiles
@media only screen and (min-width: 40.063em){.ic{width:1px;height:1px;}} Tablets
@media only screen and (min-width: 40.063em) and (max-width: 64em){.ic{width:1px;height:1px;}} Small Screens
@media only screen and (min-width: 64.063em){.ic{width:1px;height:1px;}} Large Screens

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

ฉันเพิ่งตอบคำถามที่คล้ายกันใน Wordpress Stack Exchange โพสต์ใหม่ที่นี่ (ผู้ดูแลระบบ / ผู้ดูแล: หากไม่ได้รับอนุญาตโปรดแจ้งให้เราทราบถึงวิธีการที่เหมาะสมในการช่วยเหลือ)

ไม่ได้หมายความว่าคุณต้องระบุความกว้างและความสูงใน html หมายความว่าอะไรคือคุณต้องจองพื้นที่ที่เหมาะสมและเมื่อโหลดภาพเบราว์เซอร์ไม่จำเป็นต้องทำการ reflow และทาสีหน้าใหม่

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

เวลาส่วนใหญ่ใช้ทั้งความกว้างและmax-width:100ทำงาน แต่โพสต์นี้จากนิตยสาร Smashing มีเทคนิคที่น่าสนใจ: แทนที่จะใช้ความกว้างสูงสุด: 100% คุณสามารถใช้The Padding-Bottom Hack :

"ด้วยเทคนิคเรากำหนดความสูงเป็นหน่วยวัดเทียบกับความกว้างการแพ็ดดิ้งและระยะขอบมีคุณสมบัติที่แท้จริงและเราสามารถใช้พวกมันเพื่อสร้างอัตราส่วนภาพสำหรับองค์ประกอบที่ไม่มีเนื้อหาใด ๆ ในพวกเขาเพราะการแพ็ดดิ้งมีความสามารถนี้ เราสามารถตั้ง padding-bottom ให้สัมพันธ์กับความกว้างขององค์ประกอบถ้าเราตั้งความสูงเป็น 0 เราจะได้สิ่งที่เราต้องการ [... ]

ขั้นตอนต่อไปคือการวางภาพภายในภาชนะและตรวจสอบให้แน่ใจว่ามันเติมขึ้นภาชนะ ในการทำเช่นนี้เราจำเป็นต้องวางตำแหน่งภาพไว้ในคอนเทนเนอร์อย่างเช่น: "

.img-container {
    padding-bottom: 56.25%; /* 16:9 ratio */
    height: 0;
    background-color: black;
}

.img-container img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

กระบวนการดังกล่าวเป็นเช่นนี้:

1. อ่านไฟล์. html
2. จาก. html ไฟล์ส่วนหัว, อ่านไฟล์. css, .js (.js ควรเป็นหลัง. css ... )
3. อ่าน img และสคริปต์จากหน้า

ดังนั้นแท็กรูปภาพจะอ่านว่า "ล่าช้า" อย่างไรก็ตามในการคำนวณการจัดรูปแบบของหน้าของคุณการมีขนาดของภาพเป็นสิ่งที่ดี (มิฉะนั้นเบราว์เซอร์จะใช้ขนาด "สุ่ม" เช่น 1x1, 25x25, ... สิ่งที่เบราว์เซอร์ได้ตั้งโปรแกรมไว้)

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