ภาพใหญ่ที่บีบอัดแล้วยังเป็นตัวเลือกขนาดใหญ่
พื้นที่แสดงภาพเล็กไม่ได้ทำให้ไฟล์ดาวน์โหลดเล็กลง หากผู้ชมทุกคนได้ภาพเต็มขนาดเดียวกัน โทรศัพท์ก็ยังอาจดาวน์โหลดพิกเซลที่หน้าจอไม่ได้ใช้ การบีบอัดและการเลือกภาพตามหน้าจอแก้ปัญหาคนละส่วน
ขั้นตอนสำหรับเว็บไซต์ อธิบายการเตรียม ส่วน คู่มือการส่งภาพ เชื่อมกับการวินิจฉัยประสิทธิภาพ การทดลองนี้ติดตามภาพตั้งแต่ไฟล์ที่เตรียมจนถึงตัวเลือกจริงของเบราว์เซอร์ โดยไม่ถือคะแนนเป็นผลลัพธ์
เตรียมตัวเลือกแล้วสังเกตเบราว์เซอร์
เราสร้างสำเนาโดยรักษาสัดส่วนในโปรแกรมแก้ไขภาพภายนอกก่อนบีบอัด Bitinz ไม่ได้เปลี่ยนขนาด เมื่อ 2026-10-29 แต่ละสำเนาถูกประมวลผลระดับสมดุลในระบบภายในเครื่อง ขนาดภาพ ไบต์ และแฮชที่บันทึกระบุไฟล์ที่ใช้ในการทดลองเบราว์เซอร์
หน้าทดลองภายในเครื่องเสนอไฟล์ผ่าน srcset พร้อมกฎ sizes ที่ตรงกัน บันทึกความกว้างหน้าต่าง ความหนาแน่นพิกเซล และทรัพยากรที่เลือก เป็นการวัดข้อมูลภาพ ไม่ใช่การโหลดทั้งหน้าหรือจำลองเครือข่ายมือถือ นโยบายบรรณาธิการ อธิบายหลักฐานนี้
ไฟล์ที่เตรียมไว้ให้เบราว์เซอร์เลือก
เทียบขนาดไฟล์ตัวเลือกตรงนี้ แล้วตรวจบันทึกการเลือกของเบราว์เซอร์ในลิงก์แหล่งที่มา เบราว์เซอร์เลือกได้เฉพาะไฟล์ที่หน้าเว็บเสนอจริง
| ภาพ | พิกเซล | รูปแบบผลลัพธ์ | ระดับ | ก่อน | หลัง | ลดลง |
|---|---|---|---|---|---|---|
photo-4000.jpg | 4000 × 2667 px | JPG | สมดุล | 2032.6 KB | 595.9 KB | 70.7% |
photo-1600.jpg | 1600 × 1067 px | JPG | สมดุล | 393.1 KB | 129.0 KB | 67.2% |
photo-800.jpg | 800 × 533 px | JPG | สมดุล | 116.0 KB | 40.0 KB | 65.5% |
photo-400.jpg | 400 × 267 px | JPG | สมดุล | 34.2 KB | 12.4 KB | 63.7% |
Bitinz · 1 KB เท่ากับ 1000 ไบต์
ไฟล์ที่เบราว์เซอร์ดาวน์โหลดจริง
| ความกว้างหน้าต่าง (CSS px) | ความหนาแน่นพิกเซล | ความกว้างที่แสดง (CSS px) | ความกว้างที่เลือก (px) | ข้อมูลภาพ |
|---|---|---|---|---|
| 390 | 1× | 358 | 400 | 12.4 KB |
| 390 | 2× | 358 | 800 | 40.0 KB |
| 768 | 1× | 736 | 800 | 40.0 KB |
| 768 | 2× | 736 | 1600 | 129.0 KB |
| 1280 | 1× | 960 | 1600 | 129.0 KB |
| 1280 | 2× | 960 | 4000 | 595.9 KB |
แต่ละแถวใช้บริบทเบราว์เซอร์ใหม่และปิดแคช กรณีหน้าต่างกว้างที่สุดที่มีความหนาแน่นสูงเลือกไฟล์ใหญ่สุด เพราะชุดตัวเลือกมีช่วงขนาดห่างกันมาก ควรทดสอบไฟล์ขนาดกลางเพิ่มเติม เบราว์เซอร์เลือกได้เฉพาะไฟล์ที่มีอยู่ในรายการเท่านั้น
ตรวจภาพที่เลือกในขนาดที่ใช้งานได้จริง
รายละเอียดภาพต้นฉบับ
รายละเอียดภาพที่บีบอัด
ตรวจภาพที่แสดงบนจอเล็กและจอความหนาแน่นสูง ตัวเลือกที่เล็กสุดไม่ได้ดีที่สุดเสมอหากภาพดูเบลอ ในทางเดียวกัน ไฟล์ใหญ่ก็ไม่จำเป็นเพียงเพราะตัวเลขการบีบอัดดูน่าประทับใจ
บันทึกการเลือกเป็นภาพรวมของสภาพแวดล้อมที่ระบุ แคชและการตัดสินใจของเบราว์เซอร์อาจกระทบการเข้าชมครั้งต่อไป หากต้องการทำซ้ำ ให้ใช้บริบทเบราว์เซอร์ใหม่และดูภาพที่ร้องขอ แทนการเดาจากขนาดที่เห็น
เชื่อมการเตรียมภาพกับการส่งจริง
ใช้ เครื่องมือบีบอัดภาพ กับสำเนาที่เตรียมไว้ แล้วให้เว็บหรือระบบจัดการเนื้อหาเสนอรุ่นที่เหมาะสม หากโค้ดที่สร้างชี้ทุกจอไปยังไฟล์ใหญ่ไฟล์เดียว การบีบอัดอย่างเดียวไม่เปลี่ยนการเลือกนั้น
ให้ sizes ตรงกับการจัดวาง CSS เบราว์เซอร์ใช้คำใบ้นี้ร่วมกับไฟล์ตัวเลือกและความหนาแน่นจอ ไม่สามารถอ่านเจตนาจากชื่อไฟล์ได้ ควรตรวจไฟล์ที่เลือกหลังเปลี่ยนการจัดวาง
สำหรับขั้นตอนการเผยแพร่ที่ทำซ้ำเป็นประจำ API สำหรับนักพัฒนา สามารถบีบอัดไฟล์ที่เตรียมไว้เป็นส่วนหนึ่งของกระบวนการเผยแพร่ได้ การลดขนาดภาพยังเป็นขั้นตอนเตรียมงานแยกต่างหาก คู่มือคุณภาพภาพอธิบายวิธีเปรียบเทียบรายละเอียดก่อนแทนที่ภาพเดิม
ตรวจพื้นที่แสดงภาพของหน้าเว็บ
- วัดพื้นที่ภาพและกำหนดความกว้างตามสัดส่วนที่งานออกแบบต้องการ
- เตรียมและบีบอัดสำเนา โดยเก็บต้นฉบับที่แก้ไขได้ไว้
- เสนอไฟล์ตัวเลือกพร้อมกฎ
sizesที่ตรงกับหน้าจอ - ตรวจทรัพยากรที่เลือกและภาพที่เห็นบนจอหลายแบบ
คำถามที่พบบ่อย
- การกำหนดความกว้างที่แสดงทำให้ไฟล์ดาวน์โหลดเล็กลงหรือไม่
- ความกว้าง CSS เปลี่ยนการจัดวาง ไม่ใช่จำนวนไบต์ของไฟล์ภาพเดี่ยว ควรเสนอไฟล์ที่เหมาะสมแล้วดูว่าเบราว์เซอร์เลือกไฟล์ใด
- ทำไมโทรศัพท์ความหนาแน่นสูงจึงเลือกภาพกว้างกว่า
- จอความหนาแน่นสูงใช้พิกเซลภาพได้มากกว่าในพื้นที่ที่เห็นเท่ากัน ขนาดไฟล์ตัวเลือกและคำใบ้ขนาดของหน้าเว็บต่างมีผลต่อการเลือก
- การทดลองนี้วัดความเร็วหน้าเว็บหรือไม่
- บันทึกผลการบีบอัดและการเลือกทรัพยากรภาพ ประสบการณ์โหลดทั้งหน้ายังขึ้นกับทรัพยากรอื่น เครือข่าย และการเรนเดอร์ด้วย