แปลงรูปภาพ PNG เป็นโค้ด HTML base64

PNG เป็น HTML คืออะไร และทำไมคุณถึงต้องใช้มัน?

สวัสดีครับทุกคน! วันนี้ผมจะมาอธิบายเรื่อง PNG เป็น HTML ให้เข้าใจง่ายๆ เหมือนคุยกันสบายๆ ที่ร้านกาแฟเลยนะครับ หลายคนอาจจะสงสัยว่ามันคืออะไร และทำไมเราถึงต้องใช้มันด้วย

PNG คืออะไร? PNG ย่อมาจาก Portable Network Graphics เป็นรูปแบบไฟล์รูปภาพที่ได้รับความนิยม เพราะสามารถเก็บรายละเอียดของรูปภาพได้ดี โดยเฉพาะรูปภาพที่มีพื้นหลังโปร่งใส (Transparency) ทำให้เหมาะกับการนำไปใช้บนเว็บไซต์ต่างๆ

HTML คืออะไร? HTML ย่อมาจาก HyperText Markup Language เป็นภาษาที่ใช้ในการสร้างหน้าเว็บ เราใช้ HTML เพื่อบอก Browser ว่าจะแสดงข้อความ รูปภาพ หรือองค์ประกอบอื่นๆ บนหน้าเว็บอย่างไร

แล้ว PNG เป็น HTML คืออะไร? ทีนี้มาถึงคำถามสำคัญ PNG เป็น HTML คือการแปลงรูปภาพ PNG ของเราให้กลายเป็นโค้ด HTML ที่สามารถนำไปใส่ในหน้าเว็บได้โดยตรง โดยที่ไม่ต้องอ้างอิงไฟล์รูปภาพภายนอก (External File) อีกต่อไป

ทำไมต้องแปลง PNG เป็น HTML?

• ลดจำนวน HTTP Requests: เวลา Browser โหลดหน้าเว็บ มันจะต้อง Request ไฟล์ต่างๆ เช่น รูปภาพ, CSS, JavaScript ซึ่งแต่ละ Request จะใช้เวลา การแปลง PNG เป็น HTML จะช่วยลดจำนวน Request ทำให้หน้าเว็บโหลดเร็วขึ้น
• ง่ายต่อการจัดการ: ถ้าเราฝังรูปภาพ PNG ลงใน HTML เลย เราก็ไม่ต้องกังวลเรื่องการจัดการไฟล์รูปภาพแยกต่างหาก ทำให้ง่ายต่อการ Deploy และ Backup เว็บไซต์
• เหมาะกับรูปภาพขนาดเล็ก: การแปลง PNG เป็น HTML จะมีประสิทธิภาพมากที่สุดเมื่อใช้กับรูปภาพขนาดเล็ก เช่น ไอคอน หรือ Logo เพราะรูปภาพขนาดใหญ่จะทำให้โค้ด HTML ยาวและซับซ้อน

วิธีการแปลง PNG เป็น HTML

การแปลง PNG เป็น HTML สามารถทำได้หลายวิธี แต่วิธีที่ง่ายที่สุดคือการใช้เครื่องมือออนไลน์ (Online Tools) ซึ่งมีให้เลือกใช้มากมาย เพียงแค่ Upload รูปภาพ PNG ของเรา แล้วเครื่องมือก็จะแปลงเป็นโค้ด HTML ให้เรา Copy ไปใช้งานได้เลย

ตัวอย่างโค้ด HTML ที่ได้จากการแปลง PNG

      <img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w+r8XAIRjE1YtWB0KwgDAF8GAmPyY3dQAAAAAElFTkSuQmCC" alt="My Image">
    

ข้อควรระวังในการใช้ PNG เป็น HTML

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

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

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