แปลง HTML เป็น PNG

Q: PNG มีพื้นหลังโปร่งใสแทนพื้นขาวได้หรือไม่

ได้ เปิด **พื้นหลังโปร่งใส** พื้นหลังจะโปร่งเฉพาะส่วนที่หน้าเว็บไม่ได้กำหนดสีพื้นหลังไว้ ดังนั้นเว็บไซต์ที่ตั้งสี body เป็นสีขาวก็ยังออกมาเป็นสีขาว วิธีนี้เหมาะที่สุดกับคอมโพเนนต์หรือป้ายเดี่ยวที่ทำเป็นไฟล์ HTML แยกต่างหาก

Q: จะทำรูปเฉพาะส่วนบนของหน้าเว็บที่ยาวได้อย่างไร

เปลี่ยน **รูปภาพ** เป็นหนึ่งภาพต่อหน้า และตั้ง **หน้า** เป็นหน้าแรก คุณจะได้ส่วนแรกขนาดเท่าหนึ่งหน้า แทนที่จะเป็นภาพทั้งความยาว หากต้องการตัดให้ได้กรอบที่แน่นอนภายหลัง ให้ใช้เครื่องมือ[ครอปรูป](/crop-image)

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

หรือลากไฟล์ DOC, DOCX, DOCM … มาวางที่นี่ ·

สูงสุด 95 MB ต่อไฟล์· ได้สูงสุด 20 ไฟล์· ลบหลังจาก 30 นาที

ผลลัพธ์

แปลงเป็น

ความละเอียด

รูปภาพ

ไฟล์จะถูกประมวลผลบนเซิร์ฟเวอร์ของเราและถูกลบหลังจาก 30 นาที

วิธีใช้เครื่องมือนี้

1
เพิ่มไฟล์ HTML
อัปโหลดไฟล์ .html, .htm หรือ .mhtml ได้สูงสุด 20 ไฟล์ต่อครั้ง ไฟล์ละไม่เกิน 95 MB หน้าเว็บที่บันทึกเป็นไฟล์ MHTML ไฟล์เดียวจะมีรูปภาพและสไตล์รวมอยู่ในไฟล์นั้น
2
กำหนดความกว้างหน้าต่าง
ความกว้างหน้า HTML เริ่มต้นที่ 1280 px ใช้ 390 px สำหรับเลย์เอาต์บนมือถือ หรือ 1920 px สำหรับแดชบอร์ดแบบกว้าง แปลงเป็น ตั้งเป็น PNG อยู่แล้ว และ รูปภาพ เป็นภาพยาวภาพเดียว
3
แปลงเป็น PNG
กด แปลงเป็น PNG เปิด พื้นหลังโปร่งใส ใน การตั้งค่าขั้นสูง หากหน้าเว็บไม่มีสีพื้นหลังของตัวเอง และจะนำภาพไปวางทับบนงานอื่น

คำตอบ

แปลง HTML เป็น PNG ทำอย่างไร

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

แปลง HTML เป็น PNG เมื่อต้องการให้ตัวอักษรและเส้นคมชัด

PNG เป็นมาตรฐานแนะนำของ W3C ตั้งแต่ปี 1996 และใช้การบีบอัดแบบไม่สูญเสียข้อมูล ขอบที่ทำ anti-aliasing ของตัวอักษร 14 px เส้นขอบตารางหนา 1 พิกเซล และโค้ดที่ไฮไลต์สีจึงคงอยู่ครบ นี่คือเหตุผลที่นักพัฒนาแนบภาพ PNG ในรายงานบั๊ก และนักออกแบบแชร์ในการรีวิว เพราะไม่ต้องสงสัยว่าขอบที่พร่าเป็นปัญหา CSS หรือเกิดจากการบีบอัด

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

ความกว้างเป็นตัวกำหนดเลย์เอาต์ HTML ไม่มีขนาดหน้าตายตัว ไฟล์เดียวกันแสดงดีไซน์เดสก์ท็อปสามคอลัมน์ที่ 1280 px และคอลัมน์เดียวเรียงซ้อนที่ 390 px ตัวแปลงจะจัดเลย์เอาต์ตาม ความกว้างหน้า HTML ที่คุณกรอก ตั้งแต่ 320 ถึง 3840 px แล้วแคปตั้งแต่บรรทัดแรกจนถึงส่วนท้าย

ความกว้างสำหรับแปลง HTML เป็น PNG ตามหน้าจอที่ใช้บ่อย

195:422

390 × 844 px

มือถือ

CSS viewport ของ iPhone รุ่นใหม่หลายรุ่น แสดงเลย์เอาต์มือถือ

41:59

820 × 1180 px

แท็บเล็ต

iPad Air แนวตั้ง หลายเว็บไซต์เปลี่ยน breakpoint ใกล้ค่านี้

8:5

1280 × 800 px

แล็ปท็อป

ความกว้างเริ่มต้นของตัวแปลงนี้

16:9

1920 × 1080 px

จอ Full HD

แดชบอร์ดและหน้าผู้ดูแลระบบแบบกว้าง

HTML

HyperText Markup Language

HTML คือภาษามาร์กอัปของเว็บ อธิบายครั้งแรกโดย Tim Berners-Lee ในช่วงต้นทศวรรษ 1990 และปัจจุบัน WHATWG ดูแลในฐานะมาตรฐานที่ปรับปรุงต่อเนื่อง (living standard) ไฟล์ HTML อธิบายหัวข้อ ย่อหน้า ลิงก์ ตาราง รูปภาพ และแบบฟอร์ม ส่วนการจัดรูปแบบมักมาจาก CSS เบราว์เซอร์ทุกตัวแสดงผล HTML ได้ และยังใช้กับเทมเพลตอีเมลและหน้าเว็บที่บันทึกไว้ ไฟล์ HTML ไฟล์เดียวมักอาศัยรูปภาพและสไตล์ชีตภายนอก จึงอาจแสดงผลผิดเพี้ยนเมื่อย้ายไปเพียงไฟล์เดียว

การบีบอัด: –
พื้นหลังโปร่งใส: –
ภาพเคลื่อนไหว: –
เปิดตัว: 1993 · Tim Berners-Lee; maintained by WHATWG

ตัวแปลงไฟล์ HTML

PNG

Portable Network Graphics

PNG เป็นรูปแบบภาพแรสเตอร์แบบไม่สูญเสียข้อมูล (lossless) ที่ PNG Development Group เผยแพร่ในปี 1996 และต่อมาได้รับการกำหนดเป็นมาตรฐานโดย W3C และ ISO รักษาทุกพิกเซลไว้อย่างแม่นยำ รองรับพื้นหลังโปร่งใสแบบ alpha เต็มรูปแบบ และแสดงข้อความ ขอบคม และสีพื้นเรียบได้โดยไม่มีสิ่งแปลกปลอมในภาพ (artefact) ความแม่นยำนี้ทำให้เหมาะกับภาพหน้าจอ โลโก้ ไอคอน และกราฟิกส่วนติดต่อผู้ใช้ ข้อแลกเปลี่ยนคือขนาด ภาพถ่ายที่บันทึกเป็น PNG มักใหญ่กว่าภาพเดียวกันในรูปแบบ JPEG หรือ WebP หลายเท่า เบราว์เซอร์ ระบบปฏิบัติการ และโปรแกรมแต่งภาพทุกตัวเปิดไฟล์ PNG ได้

การบีบอัด: แบบไม่สูญเสียข้อมูล
พื้นหลังโปร่งใส: ได้
ภาพเคลื่อนไหว: ไม่ได้
เปิดตัว: 1996 · PNG Development Group

ตัวแปลงไฟล์ PNG

คนเลือก PNG เมื่อหน้าเว็บเป็นข้อความ โค้ด ตาราง หรือส่วนประกอบของอินเทอร์เฟซเป็นหลัก เพราะพิกเซลที่ไม่สูญเสียข้อมูลช่วยให้เส้นบางและตัวอักษรเล็กคมชัดในเอกสาร รายงานบั๊ก และการรีวิวดีไซน์ ที่ JPG จะเห็นร่องรอยการบีบอัด

แปลง HTML เป็น PNG โดยไม่สูญเสียสไตล์หรือฟอนต์

ไฟล์ .html ธรรมดามักพึ่งสิ่งที่เก็บไว้ที่อื่น เช่น สไตล์ชีตในโฟลเดอร์ css รูปภาพบนเซิร์ฟเวอร์ต้นทาง และฟอนต์จากบริการฟอนต์ หากสิ่งเหล่านี้หายไป หน้าจะกลับไปเป็นข้อความไม่มีสไตล์ในฟอนต์เริ่มต้น การบันทึกหน้าใน Chrome หรือ Edge แบบ Webpage, Single File จะได้ไฟล์ .mhtml ที่รวมสไตล์และรูปภาพไว้ด้วยกัน ซึ่งเป็นไฟล์ที่เชื่อถือได้ที่สุดสำหรับอัปโหลด

เว็บฟอนต์ก็เป็นไปตามกฎเดียวกัน ฟอนต์ที่ประกาศด้วย @font-face จะโหลดได้เมื่อเข้าถึงไฟล์ได้เท่านั้น ฟอนต์ที่มีอยู่เฉพาะในคอมพิวเตอร์ของคุณจะถูกแทนด้วยฟอนต์ใกล้เคียง หากตัวอักษรต้องตรงเป๊ะ ให้ฝังฟอนต์ไว้หรือตรวจผลลัพธ์ก่อนส่งต่อ

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

คำถามเกี่ยวกับการแปลง HTML เป็น PNG

แปลง HTML เป็น PNG ดีกว่าแคปหน้าจอจากเบราว์เซอร์ของตัวเองหรือไม่

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

ทำไม PNG จึงมีขนาดไฟล์ใหญ่กว่าหน้าเดียวกันที่เป็น JPG หลายเท่า

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

PNG มีพื้นหลังโปร่งใสแทนพื้นขาวได้หรือไม่

ได้ เปิด พื้นหลังโปร่งใส พื้นหลังจะโปร่งเฉพาะส่วนที่หน้าเว็บไม่ได้กำหนดสีพื้นหลังไว้ ดังนั้นเว็บไซต์ที่ตั้งสี body เป็นสีขาวก็ยังออกมาเป็นสีขาว วิธีนี้เหมาะที่สุดกับคอมโพเนนต์หรือป้ายเดี่ยวที่ทำเป็นไฟล์ HTML แยกต่างหาก

ตัวแปลงรัน JavaScript บนหน้าเว็บด้วยหรือไม่

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

จะทำรูปเฉพาะส่วนบนของหน้าเว็บที่ยาวได้อย่างไร

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