Jpg กับ Png — Png Vs Jpg - ความแตกต่างและการเปรียบเทียบ - 2022 - บล็อก
1 ความเหมือนและความแตกต่าง 1. 2 JPEG และ PNG เวอร์ชันอื่น 2 ใช้ 2. 1 การถ่ายภาพ 2.
Png กับ jpg ต่างกันอย่างไร
JPG เป็นรูปแบบ lossy ขณะที่ PNG เป็นรูปแบบ lossless 2 JPG ดีกว่าสำหรับรูปถ่ายขณะที่ PNG ดีกว่าสำหรับภาพที่สร้างขึ้น 3 JPG สนับสนุนการฝังข้อมูล EXIF ในขณะที่ PNG ไม่รองรับ 4 PNG สนับสนุนความโปร่งใสในขณะที่ JPG ไม่รองรับ
สิ่งที่ควรรู้เกี่ยวกับเทคนิคนี้ มีคนทำ Tool สำหรับแปลงรูป JPG กับ PNG ให้กลายเป็น Data URI พร้อม Preview ให้ดูด้วยว่า Mask แล้วเป็นยังไง ไปลองใช้กันได้เลยคร้าบ JPG+PNG to SVG Mask ไม่รองรับ IE8 ไม่รองรับ Android เวอร์ชั่นเก่า ๆ เว็บ Apple iPad Pro ก็ใช้นะครับ เป็นเทคนิคคล้าย ๆ กัน ชื่อ CSS3 webkit-mask-image โดยใช้ SVG มา mask JPG อีกที เพราะถ้าใช้รูป PNG จะหนักเว็บมาก หรืออีกเทคนิคคือใช้ CSS3 clip-path ครับผม โดยสามารถ generate โค้ดจากเว็บ Clippy ได้เลย
วันนี้แอดมินไปเจออีกเทคนิคสำหรับแก้ปัญหานี้มา จากคุณ Peter Hrynkow ผู้ทำเว็บไซต์เบียร์ชื่อดังในญี่ปุ่น Sapporo Beer ครับ มาดูกันว่าเค้าทำยังไง ปัญหา: รูป PNG พื้นหลังใส ขนาดไฟล์ทะลุ 1000 kb! เว็บไซต์ Sapporo Beer ที่ใช้เทคนิคนี้ ส่วนที่เค้าต้องการทำให้ใส คือ กระป๋องเบียร์ใหญ่ ๆ ในหน้าเว็บไซต์ ซึ่งพื้นหลัง (ตรงสีดำ ๆ) เค้าใช้เป็นวีดิโอครับ เลยจำเป็นต้องทำพื้นหลังใส ซึ่งตอนแรกเค้าลองเซฟเป็น PNG พื้นหลังใสออกมา ได้ขนาด 1. 2 MB (1200 kb) ครับ เค้าจึงไปหาวิธีแก้ไข และได้เทคนิคใหม่ที่ทำให้รูปเหลือ 271 kb เท่านั้น!! วิธีแก้ปัญหา: ทำรูป JPEG พื้นหลังใสด้วย SVG เทคนิคนี้ทำได้ง่าย ๆ โดย เซฟกราฟฟิกออกเป็น 2 รูป: รูปกระป๋องเบียร์แบบ JPEG พื้นหลังติดสีดำ (ขนาด 260kb) รูป PNG 8-bit มีแค่สีขาวกับดำ โดยสีดำเป็นพื้นที่ที่ต้องการให้กระป๋องเบียร์ใส (ขนาด 11kb) จากนั้นเค้าก็ใช้ SVG ในการทำ Masking ให้กับรูป JPG โดยใช้รูป PNG มาเป็น Mask ด้วย HTML นี้: [html]