แปลงภาพหน้าจอเป็นรูปภาพ: บันทึก จัดรูปแบบ และปรับปรุงคุณภาพ

อัปเดตล่าสุด: 13 กันยายน 2026

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

คำตอบสั้น ๆ: ควรบันทึกภาพหน้าจอในรูปแบบใด?

ให้บันทึกภาพหน้าจอเป็น PNG สำหรับการแก้ไขและจัดเก็บ จากนั้นแปลงเป็น WebP แบบไม่มีการสูญเสียข้อมูล (lossless) สำหรับใช้งานบนเว็บ PNG ช่วยรักษาขอบที่คมชัดของข้อความและองค์ประกอบ UI ในขณะที่ WebP ให้คุณภาพแบบไม่มีการสูญเสียข้อมูลเช่นเดียวกัน แต่มีขนาดไฟล์เพียงครึ่งเดียวโดยประมาณ ควรหลีกเลี่ยง JPEG สำหรับภาพหน้าจอ เนื่องจากกระบวนการบีบอัดจะเปลี่ยนข้อความที่คมชัดให้กลายเป็นสิ่งแปลกปลอมที่เบลอ (smudged artifacts) สำหรับภาพหน้าจอที่จะนำไปใช้บนเว็บไซต์ ให้ปรับขนาดให้เท่ากับมิติการแสดงผลก่อนด้วย เครื่องมือปรับขนาดภาพ จากนั้นจึงบีบอัดเป็น WebP แบบไม่มีการสูญเสียข้อมูลด้วย เครื่องมือบีบอัดภาพ

วิธีการจับภาพหน้าจอในแต่ละแพลตฟอร์มทำอย่างไร?

ขั้นตอนการจับภาพจะแตกต่างกันไปตามอุปกรณ์ แต่ทุกแพลตฟอร์มมีปุ่มลัดในตัว

• บน Windows, Win + Print Screen จะบันทึกโดยตรงเป็นไฟล์ในโฟลเดอร์ Screenshots
• บน macOS, ให้เพิ่ม Ctrl เข้าไปในปุ่มลัดใด ๆ เพื่อคัดลอกไปยังคลิปบอร์ดแทนการบันทึกเป็นไฟล์
• บนจอแสดงผลความละเอียดสูง (high-DPI), ให้จับภาพที่ 2x และลดขนาดลงเพื่อผลลัพธ์ที่คมชัดยิ่งขึ้นบนหน้าจอมาตรฐาน

ทำไม PNG ถึงเป็นรูปแบบที่เหมาะสมสำหรับภาพหน้าจอ?

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

PNG เป็นแบบ lossless จึงบันทึกแต่ละพิกเซลได้อย่างแม่นยำ ข้อแลกเปลี่ยนคือขนาดไฟล์—PNG แบบเต็มหน้าจออาจมีขนาดหลายเมกะไบต์ Lossless WebP แก้ปัญหานี้ โดยให้คุณภาพที่สมบูรณ์แบบระดับพิกเซลด้วยขนาดที่เล็กกว่ามาก WebP vs JPEG comparison จะแยกรายละเอียดว่ารูปแบบใดชนะในด้านใด และ WebAIM guide to image formats อธิบายมุมมองด้านการเข้าถึง (accessibility angle)—ภาพหน้าจอที่อ่านได้มีความสำคัญสำหรับผู้ใช้ที่ต้องพึ่งพาเอกสารเหล่านั้น

การปรับภาพหน้าจอให้เหมาะสมสำหรับเว็บ

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

1. ตัดส่วนของแถบเครื่องมือเบราว์เซอร์ แถบงาน และสิ่งที่ไม่เกี่ยวข้องออกด้วย เครื่องมือครอบตัดภาพ
2. ปรับขนาดให้ตรงกับมิติการแสดงผลที่แน่นอนด้วย เครื่องมือปรับขนาดภาพ — การนำภาพ 2560px ไปใส่ในช่อง 640px จะทำให้สิ้นเปลืองแบนด์วิดท์
3. แปลง PNG เป็น WebP แบบไม่สูญเสียข้อมูลสำหรับเว็บ หากภาพหน้าจอเป็น UI ที่มีรูปถ่ายจำนวนมาก WebP คุณภาพ 85 อาจมีขนาดเล็กกว่าแม้จะมีการสูญเสียคุณภาพที่ยอมรับได้
4. ตรวจสอบผลลัพธ์ที่การซูม 100% เพื่อยืนยันว่าข้อความยังคงคมชัด

ต้องจับภาพหน้าจอแบบเต็มหน้าได้อย่างไร?

Full-page screenshot จะจับภาพหน้าจอทั้งหมดที่เลื่อนได้ ไม่ใช่แค่ส่วนที่มองเห็น (viewport) เท่านั้น เบราว์เซอร์หลักทุกตัวสามารถทำสิ่งนี้ได้แล้วโดยไม่ต้องใช้เครื่องมือเพิ่มเติม

• Chrome / Edge: เปิด DevTools (F12), เปิดเมนูคำสั่ง (Ctrl+Shift+P), พิมพ์ "screenshot", และเลือก "Capture full size screenshot"
• Firefox: คลิกขวา เลือกถ่ายภาพหน้าจอ แล้วบันทึกทั้งหน้า
• Safari: เปิดใช้งานเมนู Develop จากนั้น Develop > Show Web Inspector > ถ่ายภาพหน้าจอของหน้าเว็บ
• Extensions: GoFullPage และเครื่องมือที่คล้ายกัน สามารถจับภาพหน้ายาวและส่งออกเป็นไฟล์ PNG หรือ PDF ไฟล์เดียว
• ออนไลน์: วางลิงก์หน้าสาธารณะใน แปลง HTML เป็นรูปภาพ เพื่อแคปตามความกว้างอุปกรณ์ ใช้กับหน้าที่ต้องล็อกอินไม่ได้

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

การประมวลผลภาพหน้าจอแบบชุด

หากคุณดูแลเว็บไซต์เอกสารหรือศูนย์ช่วยเหลือ คุณจะสะสมภาพหน้าจอหลายร้อยภาพที่ทั้งหมดต้องการการจัดการแบบเดียวกัน ไม่ว่าจะเป็นการครอป (crop), การปรับขนาด (resize) หรือการบีบอัด (compress) การทำทีละภาพนั้นไม่สามารถขยายผลได้

แนวทางปฏิบัติคือการใช้การตั้งค่าเดียวกันกับทุกไฟล์ในโฟลเดอร์ ปรับขนาดให้ตรงตามความกว้างที่แสดงผลของเอกสาร แปลง PNG เป็น WebP แบบไม่สูญเสียคุณภาพ (lossless) และบันทึกเอาต์พุตไปยังโฟลเดอร์ใหม่เพื่อให้ภาพต้นฉบับยังคงอยู่ วิธีนี้จะทำให้ภาพหน้าจอทุกภาพในบทความช่วยเหลือมีขนาดและรูปแบบที่สม่ำเสมอ ทำให้ทั้งเว็บไซต์ดูเป็นเนื้อเดียวกัน ไม่ใช่การนำส่วนต่างๆ มาปะติดปะต่อกัน

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

สำหรับกลไกเบื้องหลังว่าทำไม WebP แบบไม่สูญเสียคุณภาพจึงสามารถสร้างไฟล์ที่เล็กกว่า PNG ได้ Google WebP compression documentation อธิบายถึงการเข้ารหัสเชิงคาดการณ์ (predictive coding) ที่ทำให้รูปแบบนี้มีประสิทธิภาพในพื้นที่ UI ที่เรียบ

ปัญหาและวิธีแก้ไขภาพหน้าจอที่พบบ่อย

• ข้อความดูเบลอในไฟล์ที่ส่งออก — คุณบันทึกเป็น JPEG ให้เปลี่ยนไปใช้ PNG หรือ WebP แบบไม่สูญเสียคุณภาพ (lossless)
• ไฟล์มีขนาดใหญ่เกินกว่าจะอัปโหลด — ปรับขนาดให้เป็นตามมิติที่แสดงผล และแปลงเป็น WebP ก่อนอัปโหลด
• ภาพหน้าจอมีความละเอียดผิดพลาดบนหน้าจอ DPI สูง — จับภาพที่ 2x และลดขนาดลง หรือตรวจสอบการตั้งค่า DPI ของเครื่องมือ
• พื้นหลังเป็นสีขาว ทั้งที่ควรจะเป็นแบบโปร่งใส — เครื่องมือจับภาพส่วนใหญ่ไม่รองรับความโปร่งใส; ใช้เครื่องมือที่ส่งออก PNG พร้อมช่องสัญญาณ alpha
• ภาพหน้าจอแสดงมอนิเตอร์ผิด — ในการตั้งค่าหลายมอนิเตอร์ ทางลัดจะจับภาพจากจอหลัก; ใช้เครื่องมือ Snipping เพื่อเลือกพื้นที่ที่ถูกต้อง

เมื่อไหร่ที่คุณควรใช้ภาพหน้าจอเลย?

ภาพหน้าจอเป็นเครื่องมือในการจัดทำเอกสาร พวกมันเป็นทางเลือกที่ถูกต้องเมื่อคุณต้องการแสดงให้เห็นว่าหน้าจอมีลักษณะอย่างไรอย่างชัดเจน เช่น รายงานบั๊ก ขั้นตอนในบทเรียนสอน หรือการรีวิวแอปพลิเคชัน แต่จะเป็นทางเลือกที่ไม่เหมาะสมเมื่อภาพประกอบที่สะอาดตาหรือรูปถ่ายที่ถูกตัดมาจะสื่อสารได้ดีกว่า เพราะภาพหน้าจอมักจะมี UI clutter ที่ทำให้เสียสมาธิจากประเด็นหลัก ควรครอปให้กระชับเฉพาะส่วนที่เกี่ยวข้อง บันทึกเป็น PNG หรือ WebP แบบไม่สูญเสียข้อมูล และปรับขนาดสำหรับปลายทาง หากทำอย่างถูกต้อง ภาพหน้าจอจะดูเหมือนหลักฐาน แต่หากทำผิด จะดูเหมือนสัญญาณรบกวน

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

ฉันควรบันทึกภาพหน้าจอในรูปแบบใด?

PNG สำหรับข้อความและขอบที่คมชัดและคุณภาพแบบ lossless — การบีบอัด JPEG ทำให้ข้อความดูเลอะเทอะ สำหรับการใช้งานบนเว็บ ให้แปลง PNG เป็น WebP เพื่อลดขนาด ภาพหน้าจอเป็นกราฟิก ดังนั้นให้ปฏิบัติต่อมันเหมือนกราฟิก ไม่ใช่ภาพถ่าย

ฉันจะจับภาพหน้าจอในแต่ละแพลตฟอร์มได้อย่างไร?

macOS: Cmd+Shift+3 (เต็มหน้าจอ) หรือ Cmd+Shift+4 (พื้นที่ที่เลือก). Windows: Win+Shift+S (Snipping Tool) หรือ Print Screen. Linux: ใช้เครื่องมือจับภาพหน้าจอ หรือ gnome-screenshot. แต่ละแพลตฟอร์มยังมีตัวเลือกการจับภาพทั้งหน้าในเบราว์เซอร์

ทำไม PNG ถึงเป็นรูปแบบที่เหมาะสมสำหรับภาพหน้าจอ?

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

ฉันจะจับภาพหน้าจอแบบเต็มหน้าได้อย่างไร?

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

ฉันสามารถแก้ไขภาพหน้าจอได้หรือไม่?

ได้ — เปิดมันในโปรแกรมแก้ไขเพื่อครอบตัด ใส่คำอธิบายประกอบ หรือปกปิดข้อมูลส่วนตัว ให้รักษาการแก้ไขแบบ lossless (PNG) จนกว่าจะส่งออกครั้งสุดท้าย จากนั้นจึงแปลงเป็น WebP สำหรับเว็บ ภาพหน้าจอคือกราฟิก; ปฏิบัติต่อมันเหมือนกราฟิก ไม่ใช่ภาพถ่าย

ฉันจะปรับปรุงภาพหน้าจอสำหรับเว็บได้อย่างไร?

ให้เก็บไว้ในรูปแบบ PNG สำหรับการแก้ไข จากนั้นจึงแปลงเป็น WebP สำหรับการส่งมอบเพื่อลดขนาด ปรับขนาดให้เท่ากับความกว้างของหน้าจอ ภาพหน้าจอคือข้อความที่คมชัดและสีเรียบ ดังนั้น PNG จึงรักษาพวกมันแบบ lossless และ WebP ก็จะย่อขนาดพวกมัน — JPEG จะทำให้ขอบข้อความเสียหาย ดูคู่มือ compress guide

ฉันจะจับภาพหน้าจอแบบเต็มหน้าได้อย่างไร?

ใน Chrome DevTools ให้เรียก "Capture full size screenshot" ใน Firefox ให้คลิกขวาแล้วเลือกบันทึกทั้งหน้า เหมาะกับบทความยาวที่ไม่พอดีจอเดียว