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

อัปเดตล่าสุด: June 28, 2026

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

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

ให้บันทึกภาพหน้าจอเป็น PNG สำหรับการแก้ไขและจัดเก็บ จากนั้นแปลงเป็น WebP แบบไม่มีการสูญเสียข้อมูล (lossless) สำหรับใช้งานบนเว็บ PNG ช่วยรักษาขอบที่คมชัดของข้อความและองค์ประกอบ UI ในขณะที่ WebP ให้คุณภาพแบบไม่มีการสูญเสียข้อมูลเช่นเดียวกัน แต่มีขนาดไฟล์เพียงครึ่งเดียวโดยประมาณ ควรหลีกเลี่ยง JPEG สำหรับภาพหน้าจอ เนื่องจากกระบวนการบีบอัดจะเปลี่ยนข้อความที่คมชัดให้กลายเป็นสิ่งแปลกปลอมที่เบลอ (smudged artifacts) สำหรับภาพหน้าจอที่จะนำไปใช้บนเว็บไซต์ ให้ resize ให้มีขนาดเท่ากับมิติการแสดงผลก่อน จากนั้นจึง compress เป็น 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. ตัดส่วนของแถบเครื่องมือเบราว์เซอร์ แถบงาน และสิ่งที่ไม่เกี่ยวข้องออกด้วย image cropper
2. Resize ให้มีขนาดตรงตามมิติการแสดงผลที่แน่นอน — การนำภาพ 2560px ไปใส่ในช่อง 640px จะทำให้สิ้นเปลืองแบนด์วิดท์
3. แปลง PNG เป็น WebP แบบไม่สูญเสียข้อมูลสำหรับเว็บ หากภาพหน้าจอเป็น UI ที่มีรูปถ่ายจำนวนมาก WebP คุณภาพ 85 อาจมีขนาดเล็กกว่าแม้จะมีการสูญเสียคุณภาพที่ยอมรับได้
4. ตรวจสอบผลลัพธ์ที่การซูม 100% เพื่อยืนยันว่าข้อความยังคงคมชัด

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

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

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

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

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

หากคุณดูแลเว็บไซต์เอกสารหรือศูนย์ช่วยเหลือ คุณจะสะสมภาพหน้าจอหลายร้อยภาพที่ทั้งหมดต้องการการจัดการแบบเดียวกัน ไม่ว่าจะเป็นการครอป (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 เพื่อลดขนาดไฟล์

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

ใช้ฟังก์ชันการจับภาพทั้งหน้าที่มาพร้อมกับเบราว์เซอร์ (DevTools หรือส่วนขยายของเบราว์เซอร์) มันจะเลื่อนและเย็บหน้าทั้งหมดให้เป็นรูปภาพสูงเพียงภาพเดียว มีประโยชน์สำหรับการบันทึกเค้าโครงทั้งหมดหรือบทความยาวๆ

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

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

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

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

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

ใช้ฟังก์ชันการจับภาพทั้งหน้าที่มาพร้อมกับเบราว์เซอร์: ใน Chrome DevTools ให้รันคำสั่ง-screenshot ของมุมมองทั้งหมด หรือใช้ส่วนขยายของเบราว์เซอร์ที่เลื่อนและเย็บหน้าทั้งหมดให้เป็นรูปภาพสูงเพียงภาพเดียว นี่คือวิธีที่เชื่อถือได้ในการจับภาพบทความยาวๆ หรือเค้าโครงทั้งหมดที่ไม่พอดีในหน้าจอเดียว