แคปหน้าเว็บทั้งหน้า: บันทึกทุกหน้าเว็บเป็นรูปภาพ

อัปเดตล่าสุด: 13 กันยายน 2026 ตัวเลขด้านล่างวัดด้วย Chromium 151 แบบไม่มีหน้าจอ บนบทความ Wikipedia สาธารณะ

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

คำตอบด่วน: แคปหน้าเว็บทั้งหน้าได้อย่างไร?

ใช้ฟีเจอร์แคปทั้งหน้าที่มีในเบราว์เซอร์สำหรับหน้าที่ต้องล็อกอิน และใช้เครื่องมือ HTML เป็นรูปภาพออนไลน์สำหรับหน้าสาธารณะที่ต้องการความกว้างของอุปกรณ์ที่แน่นอน ใน Firefox ให้คลิกขวาที่หน้าเว็บ เลือกถ่ายภาพหน้าจอ แล้วเลือกบันทึกทั้งหน้า ใน Chrome ให้เปิด DevTools เปิดเมนูคำสั่ง แล้วเลือก Capture full size screenshot

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

วิธีแคปแบบไหนเหมาะกับงานของคุณ?

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

คู่มือของ Chrome เรื่อง การแคปหน้าจอด้วย DevTools ยังครอบคลุมการแคปเฉพาะพื้นที่หรือเฉพาะองค์ประกอบ เหมาะเมื่อต้องการแค่ส่วนประกอบเดียวของหน้า ส่วน Mozilla ก็มีเอกสาร ตัวเลือกการถ่ายภาพหน้าจอของ Firefox รวมถึงการบันทึกทั้งหน้า

"หน้าจอแรก" กับ "ทั้งหน้า" แคปอะไรได้จริง?

ภาพหน้าจอแรกคือหนึ่ง viewport พอดี คือ 1280 × 800 พิกเซลในการตั้งค่าเดสก์ท็อปทั่วไป ภาพทั้งหน้าจะเรนเดอร์เอกสารที่เลื่อนได้ทั้งหมดเป็นภาพยาวภาพเดียว ความต่างนี้มากกว่าที่คนส่วนใหญ่คาดไว้

เราวัดบทความ "Cat" ของ Wikipedia ที่ความกว้าง 1280 พิกเซล ได้ความสูงที่เลื่อนได้ 42,077 พิกเซล มากกว่าหน้าจอแรก 52 หน้าต่อกัน เครื่องมือของเราจำกัดภาพทั้งหน้าไว้ที่ 12,000 พิกเซล เพราะภาพยาวขนาดนั้นดูและแชร์ยากแล้ว และหน้าที่เลื่อนได้ไม่สิ้นสุดก็จะแคปไม่มีวันเสร็จ ถ้าต้องการหน้าที่ยาวกว่านั้น ให้แคปทีละส่วน

ความสูงยังมีผลต่อฟอร์แมตด้วย WebP เก็บภาพที่สูงหรือกว้างเกิน 16,383 พิกเซลไม่ได้ ภาพที่ยาวมากจึงอาจบันทึกเป็น WebP ไม่สำเร็จ ทั้งที่บันทึกเป็น PNG และ JPG ได้

ควรใช้ฟอร์แมตไหนกับภาพแคปหน้าเว็บ?

เลือก PNG สำหรับหน้าที่มีแต่ข้อความและอินเทอร์เฟซ เลือก WebP สำหรับแชร์บนเว็บ และใช้ JPG เฉพาะเมื่อปลายทางไม่รับทั้งสองแบบ เราบันทึกภาพเดียวกันของบทความ "Cat" ที่มีรูปเยอะ ขนาด 1280 × 12,000 พิกเซล ด้วยสามวิธี

หน้าที่เป็นข้อความและอินเทอร์เฟซสีเรียบมักบีบอัดเป็น PNG ได้เล็กกว่าหน้าที่เต็มไปด้วยรูปถ่ายนี้มาก PNG จึงยังเป็นค่าเริ่มต้นสำหรับภาพแคปอินเทอร์เฟซ คู่มือฟอร์แมตภาพหน้าจอ ของเราอธิบายว่าทำไม JPEG ทำให้ตัวอักษรเล็กเบลอ ส่วน การเปรียบเทียบ WebP, JPEG และ PNG ลงรายละเอียดข้อดีข้อเสียมากขึ้น ถ้าต้องการลดขนาดภาพโดยไม่เปลี่ยนฟอร์แมต ให้ใช้ เครื่องมือบีบอัดรูปภาพ

ทำไมภาพแคปทั้งหน้าจึงมีรูปหายไป?

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

การทดสอบของเราแสดงผลกระทบนี้ชัดเจน ในบทความ "Cat" มีรูป 55 จาก 58 รูปที่ใช้ lazy loading เมื่อแคปทันที รูป 44 จาก 45 รูปที่อยู่ใต้สองหน้าจอแรกยังว่างอยู่ หลังเลื่อนหน้าไปจนสุดแล้วกลับขึ้นด้านบน ไม่มีรูปไหนว่างเลย

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

เครื่องมือแปลง HTML เป็นรูปภาพของเราเลื่อนหน้าให้อัตโนมัติแล้วเมื่อแคปทั้งหน้า เราเพิ่มขั้นตอนนี้หลังวัดตัวเลขข้างต้น

ทำไมภาพแคปแบบมือถือจึงแสดงเว็บเวอร์ชันเดสก์ท็อป?

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

เราโหลดบทความ "Screenshot" ของ Wikipedia สองครั้งใน viewport กว้าง 390 พิกเซล เมื่อใช้ user agent เดสก์ท็อป เว็บส่งเลย์เอาต์เดสก์ท็อปที่ถูกบีบลงหน้าต่างแคบ สูง 7,544 พิกเซล เมื่อใช้ user agent มือถือ เว็บส่งเวอร์ชันมือถือจริง สูง 2,299 พิกเซล

ดังนั้นการย่อหน้าต่างเบราว์เซอร์เดสก์ท็อปแทบไม่ได้บอกว่าผู้ใช้มือถือเห็นอะไร โหมดอุปกรณ์ของ Chrome เปลี่ยนทั้ง user agent และความกว้างพร้อมกัน ตัวเลือกมือถือและแท็บเล็ตในเครื่องมือของเราก็เช่นกัน

ทำไมเครื่องมือออนไลน์จึงแคป localhost อินทราเน็ต หรือหน้าที่ต้องล็อกอินไม่ได้?

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

มันยังปฏิเสธที่อยู่เครือข่ายส่วนตัว เช่น localhost, 192.168.x.x หรืออินทราเน็ตของบริษัท การปล่อยให้ผู้เข้าชมนิรนามสั่งเซิร์ฟเวอร์ให้ดึงที่อยู่ใดก็ได้เป็นช่องโหว่ที่รู้จักกันในชื่อ server-side request forgery (SSRF) ตามที่อธิบายไว้ใน ภาพรวม SSRF ของ OWASP เครื่องมือที่รอบคอบจะตรวจทุกการเชื่อมต่อที่หน้าเว็บสร้าง รวมถึงการเปลี่ยนเส้นทาง ไม่ใช่แค่ที่อยู่ที่คุณพิมพ์

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

แก้ปัญหาการแคปหน้าเว็บ

แบนเนอร์หรือส่วนหัวแบบติดหน้าจอที่บังเนื้อหา ลบทิ้งหลังแคปได้ง่ายที่สุด ครอบตัดด้วย เครื่องมือครอบตัดภาพ แทนการแคปใหม่

เช็กลิสต์ก่อนแชร์ภาพแคป

1. ความกว้างตรงกับอุปกรณ์ที่ต้องการ
2. ส่วนล่างของภาพไม่มีรูปว่าง
3. หน้าเว็บจบในจุดที่ถูกต้อง
4. ไม่มีแบนเนอร์บังเนื้อหาสำคัญ
5. ลบข้อมูลส่วนตัวที่ผู้เข้าชมไม่ควรเห็น
6. ใช้ PNG กับหน้าที่มีข้อความเยอะ
7. จดวันที่แคปไว้

หน้าเว็บเปลี่ยนแปลงอยู่ตลอด เมื่อภาพแคปใช้เป็นหลักฐาน อ้างอิงงานออกแบบ หรือรายงานบั๊ก วันที่แคปก็เป็นส่วนหนึ่งของสิ่งที่ภาพบันทึกไว้

คำถามที่พบบ่อย

แคปหน้าที่ต้องล็อกอินได้ไหม?

เครื่องมือออนไลน์ที่เข้าบัญชีของคุณไม่ได้จะแคปไม่ได้ ให้ใช้ฟีเจอร์แคปทั้งหน้าในเบราว์เซอร์ของคุณขณะล็อกอินอยู่

ทำไมภาพแคปทั้งหน้าจึงถูกตัด?

หลายเครื่องมือจำกัดความสูง เครื่องมือของเราหยุดที่ 12,000 พิกเซล และหน้าที่โหลดเนื้อหาเพิ่มเมื่อเลื่อนก็ไม่มีจุดจบตามธรรมชาติ

HTML เป็นรูปภาพเหมือนกับการแคปหน้าเว็บไหม?

ในการใช้งานทั่วไปเหมือนกัน ทั้งสองแบบเรนเดอร์หน้าในเบราว์เซอร์แล้วบันทึกผลเป็นไฟล์รูปภาพ

ควรใช้ความกว้างเท่าไรสำหรับภาพแคปมือถือ?

ใช้ 390 พิกเซล ซึ่งเป็นความกว้าง CSS ของ iPhone รุ่นใหม่หลายรุ่น พร้อม user agent มือถือเพื่อให้เว็บส่งเลย์เอาต์มือถือจริง

ทำไมรูปบางรูปแสดงเป็นกล่องว่าง?

รูปเหล่านั้นโหลดแบบ lazy และยังไม่ถูกดึงมา ให้เลื่อนหน้าก่อนแคป หรือใช้เครื่องมือที่เลื่อนให้

แคปเฉพาะบางส่วนของหน้าได้ไหม?

ได้ Chrome DevTools แคปองค์ประกอบเดียวได้ หรือแคปทั้งหน้าแล้วครอบตัดส่วนที่ต้องการ

เครื่องมือออนไลน์เก็บสำเนาหน้าเว็บไว้ไหม?

เครื่องมือจะโหลดหน้าในเบราว์เซอร์ชั่วคราวเพื่อสร้างภาพ ให้ตรวจประกาศความเป็นส่วนตัวของแต่ละเครื่องมือว่าเก็บผลลัพธ์ไว้นานเท่าไร