designil jpeg transparent png

[Tips] ทำกราฟฟิก JPEG พื้นหลังใสไว้ใช้แทน PNG ด้วย SVG !!

6 minutes read
designil jpeg transparent png
Share on facebook
Share on twitter
Share on telegram
Share on linkedin
Share on email
กราฟฟิกนามสกุล PNG กับ JPEG เป็นนามสกุลที่ได้รับความนิยมในเว็บไซต์ PNG จะเหมาะกับกราฟฟิกที่ต้องมีการทำพื้นหลังใส ส่วน JPEG, JPG จะเหมาะกับรูปถ่ายที่สีเยอะ ๆ

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

ส่วน JPEG, JPG จะเหมาะกับรูปถ่ายที่สีเยอะ ๆ ขนาดจะเบากว่า PNG หลายเท่า แต่ไม่สามารถทำพื้นหลังใสได้

อย่างไรก็ตาม บางครั้งเราต้องการรูปที่สีเยอะ ๆ ด้วย และพื้นหลังใสด้วย การใช้ PNG บางครั้งอาจจะทำให้รูปขนาดใหญ่ระดับ 1 Mb ขึ้นไปก็มีครับ (แอดมินเคยทำเว็บที่ต้องใช้กราฟฟิก PNG ใสขนาด 3 MB เพราะหลีกเลี่ยงไม่ได้ T___T)

วิธีเคยที่ใช้ก่อนหน้านี้ คือ พาไฟล์รูปพวกนี้ไปลดน้ำหนักก่อนครับ ซึ่งก็ช่วยได้ 50 – 70% เลยทีเดียว

ท่านใดยังไม่เคยอ่าน แนะนำเลยครับ: เทคนิคที่ทำให้เว็บโหลดเร็ว ลดน้ำหนักรูป แบบได้ผลกว่า T25 !!

วันนี้แอดมินไปเจออีกเทคนิคสำหรับแก้ปัญหานี้มา จากคุณ Peter Hrynkow ผู้ทำเว็บไซต์เบียร์ชื่อดังในญี่ปุ่น Sapporo Beer ครับ มาดูกันว่าเค้าทำยังไง

ปัญหา: รูป PNG พื้นหลังใส ขนาดไฟล์ทะลุ 1000 kb !

Sapporo Beer Website
เว็บไซต์ Sapporo Beer ที่ใช้เทคนิคนี้

ส่วนที่เค้าต้องการทำให้ใส คือ กระป๋องเบียร์ใหญ่ ๆ ในหน้าเว็บไซต์ ซึ่งพื้นหลัง (ตรงสีดำ ๆ) เค้าใช้เป็นวีดิโอครับ เลยจำเป็นต้องทำพื้นหลังใส ซึ่งตอนแรกเค้าลองเซฟเป็น PNG พื้นหลังใสออกมา ได้ขนาด 1.2 MB (1200 kb) ครับ เค้าจึงไปหาวิธีแก้ไข และได้เทคนิคใหม่ที่ทำให้รูปเหลือ 271 kb เท่านั้น !!

วิธีแก้ปัญหา : ทำรูป JPEG พื้นหลังใสด้วย SVG

เทคนิคนี้ทำได้ง่าย ๆ โดย เซฟกราฟฟิกออกเป็น 2 รูป:

  1. รูปกระป๋องเบียร์แบบ JPEG พื้นหลังติดสีดำ (ขนาด 260kb)
  2. รูป PNG 8-bit มีแค่สีขาวกับดำ โดยสีดำเป็นพื้นที่ที่ต้องการให้กระป๋องเบียร์ใส (ขนาด 11kb)

JPG Transparent PNGจากนั้นเค้าก็ใช้ SVG ในการทำ Masking ให้กับรูป JPG โดยใช้รูป PNG มาเป็น Mask ด้วย HTML นี้:
[html]
<svg preserveAspectRatio=”xMinYMin” version=”1.1″ xmlns=”https://www.w3.org/2000/svg” xmlns:xlink=”https://www.w3.org/1999/xlink”
viewBox=”0 0 560 1388″>
<defs>
<mask id=”canTopMask”>
<image width=”560″ height=”1388″ xlink:href=”img/can-top-alpha.png”></image>
</mask>
</defs>
<image mask=”url(#canTopMask)” id=”canTop” width=”560″ height=”1388″ xlink:href=”can-top.jpg”></image>
</svg>
[/html]
โดยเราสามารถนำโค้ดก้อนนี้ไปวางในตำแหน่งที่ต้องการใช้รูปได้เลยครับ ทำงานเหมือนเอา <img> ไปวางนั่นเอง

อธิบายโค้ดแบบสั้น ๆ คือ ใช้แท็ก <image> ในการใส่รูป JPG (จากข้อ 1) เข้าไป และกำหนด Mask ให้กับรูปนั้นด้วยรูป PNG (จากข้อ 2) ครับ การทำ Masking คือการจำกัดกรอบให้กับรูป ส่วนที่อยู่นอกกรอบก็จะกลายเป็นใสไปครับ

เท่านี้เราก็จะได้กราฟฟิก JPEG ที่มีพื้นหลังใส และขนาดไฟล์ลดลงไปมากกว่า 75% !!

สิ่งที่ควรรู้เกี่ยวกับเทคนิคนี้

  • มีคนทำ 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 ได้เลย



Share on facebook
Share on twitter
Share on telegram
Share on linkedin
Share on email

Leave a Reply

Your email address will not be published. Required fields are marked *