สำหรับการทำภาพหรือการบีบอัดภาพสำหรับการใช้งานในเว็บไซต์ในปัจจุบันนั้นโดยส่วนใหญ่แล้วจะคำนึงถึงหลักการที่ทำอย่างไรแล้วให้ภาพนั้นๆ ออกมาดูดีแต่ว่ามีขนาดของไฟล์ภาพให้เล็กที่สุดเท่าที่จะเป็นไปได้ครับ เหตุผลนั้นก็มาจากหลายๆ อย่างไม่ว่าจะเป็นเรื่องของความเร็วในการโหลดหรือแม้แต่กระทั้งขนาดของข้อมูลที่ต้องโหลดเพราะต้องยอมรับกันจริงๆ ครับว่าในปัจจุบันนั้นการเข้าถึงเว็บไซต์ส่วนใหญ่ได้เปลี่ยนรูปแบบจากการเข้าถึงผ่านทาง PC คอมพิวเตอร์ไปเป็นสมาร์ทโฟนหรือแท็บเล็ตที่ใช้งานอินเทอร์เน็ตผ่านเครือข่ายโอเปอเรเตอร์กันแล้ว
จากเรื่องดังกล่าวนั้นมันก็เข้าสู่การแข่งขันทางธุรกิจครับ เพราะการที่สามารถทำให้ผู้ใช้เข้าถึงบริการของตัวเองได้เร็วกว่าคู่แข็งเพียงแค่เสี้ยววินาทีเดียวก็ถือว่าสำคุญมากพอแล้วที่ผู้ให้บริการต่างๆ โดยเฉพาะบริษัทยักษ์ใหญ่ทางด้านเทคโนโลยีอย่าง Google จะให้ความสนใจ ด้วยเหตุนี้ในการปรับโลโกของทางบริษัท Google เมื่อไม่นานที่ผ่านมานั้นทาง Google จึงได้เปลี่ยนรูปแบบการออกแบบโลโกซึ่งผลลัพธ์ที่ได้นั้นก็อยู่ในระดับที่เรียกว่าน่าพอใจมากทีเดียวครับเพราะขนาดไฟล์โลโกของ Google นั้นลดลงจาก 14,000 Bytes เหลือเพียง 305 Bytes เท่านั้นคิดเป็น 46 เท่าจากของเดิมเลยทีเดียวครับ
โลโกเก่าของ Google นั้นสร้างจากการใช้ตัวอักษร serif font ที่ซับซ้อนครับทว่าข้อเสียของมันก็คือการสร้างแบบเก่านั้นสามารถทำได้แค่เพียงการสร้างโค้งแบบ bezier ซึ่งเมื่อรวมเข้าด้วยกันแล้วต้องใช้จุดเชื่อมต่อกันถึง 100 จุดคิดเป็นขนาดไฟล์อยู่ที่ 6 KB (6,380 bytes) และเมื่อทำการบีบอัดขนาดไฟล์แล้วจะเหลืออยู่ที่ 2 KB (2,145 bytes) โดยที่ยังไม่รวมเรื่องของการใช้สีเข้ามาอีก
ในการออกแบบโลโกใหม่นั้น Google จึงใช้วิธีการใหม่ครับโดยทำการสร้างตัวอักษรมาจากการใช้ “วงกลม” และ “เหลี่ยมผืนผ้า” เข้าด้วยกัน(ยกเว้นในตัวอักษร g ตัวเล็กเท่านั้น) ซึ่งในทำให้ในโลโกใหม่นี้ประกอบไปด้วย
- วงกลมจำนวน 10 วง – 2 วงสำหรับตัวอักษร G ตัวใหญ่กับอีก 2 วงที่อักษร g ตัวเล็ก, 2 วงสำหรับ O และอีก 2 วงสำหรับตัว e ตัวเล็ก
- สี่เหลี่ยมผืนผ้า 5 รูป – 2 รูปสำหรับตัวอักษร G ตัวใหญ่, 1 รูปสำหรับตัวอักษร l ตัวเล็กและอีก 2 รูปสำหรับตัวอักษร e ตัวเล็ก
- 1 รูปใช้จุดเชื่อมต่อทั้งหมด 7 จุด(โดยเฉพาะที่ตัวอักษร g ตัวเล็กที่ใช้มากที่สุด)
ทว่าอย่างไรก็ตามแล้วทาง Google ก็มิได้ปล่อยโลโกรุ่นใหม่ของ Google ที่ขนาดเล็กลงเหลือแค่เพียง 305 Bytes ออกมาครับแถมคงจะเป็นการยากด้วยที่ Google เผยวิธีการออกมาผ่านช่องทางออนไลน์ครับว่าทำอย่างไร แต่เชื่อว่าระดับ Google นั้นคงจะไม่โม้ออกมาเฉยๆ ว่าโลโกใหม่ของพวกเขามีขนาดอยู่ที่ 305 Bytes ครับ(นี่ระดับ Google นะครับ คงไม่ทำอะไรให้เสียชื่อเสียงบริษัทแบบนั้นแน่)
ถึงแม้ว่า Google จะไม่บอกวิธีการทำอย่างแม้จริงออกมา แต่เพื่อเป็นการตรวจสอบว่าเรื่องนี้สามารถทำได้จริงๆ ทาง Gizmodo (โดยคุณ Ilya Yakubovich) จึงได้ทำการพิสูจน์ด้วยการรองสร้างตัวอักษร G ใหญ่ตัวแรกของโลโก Google ใน SVG format ซึ่งผลที่พบก็คือตัวอักษร G ตัวใหญ่ที่เขาสร้างขึ้นมานั้นมีขนาดไฟล์อยู่ที่ 302 bytes เมื่อผ่านการบีบอัดแล้วจะลดลงเหลือที่ 195 bytes วิธีการสร้างนั้นอาจจะต้องใช้ความรู้เรื่องการทำกราฟิก SVG format เล็กน้อยครับ ส่วนจะเป็นอย่างไรนั้นไปดูส่วนของโค้ดกันได้เลยครับ
โค้ด SVG format ของตัวอักษร G ใหญ่ที่ไม่ผ่านการบีบอัดโดยใช้วงกลม 2 วงและสี่เหลี่ยมผืนผ้า 2 รูป
<svg xmlns=”http://www.w3.org/2000/svg”>
<circle r=”100″ cy=”100″ cx=”100″ fill=”#4885ed”/>
<circle r="70" cy="100" cx="100" fill="#ffffff"/> <rect transform="rotate(-40 166,67)" height="78" width="99" y="27" x="117" fill="#ffffff"/> <rect height="30" width="88" y="87" x="111" fill="#4885ed"/> </svg>
จากโค้ดดังกล่าวจะได้เป็นตัวอักษร G ตัวใหญ่ออกมาดังรูปครับ
นอกจากจะใช้วิธีดังกล่าวข้างต้นแล้วยังมีอีกวิธีหนึ่งในการสร้างโลโกใหม่นี้ซึ่งก็คือการใช้ strokes แทน fills ครับวิธีการทำนั้นก็ไม่ได้ใช้โค้ดที่แตกต่างไปจากวิธีข้างบนสักเท่าไรนักแต่ทว่าผลลัพธ์ไฟล์หลังจากใช้โค้ดใหม่นี้จะได้ขนาดไฟล์ที่ยังไม่ได้บีบอัดอยู่ที่ 290 bytes จะเป็นอย่างไรนั้นไปดูโค้ดกันเลยครับ
หมายเหตุ – โค้ดนี้เป็นของคุณ Jaume Sanchez Elias ครับ ท่านใดสนใจคลิ๊กเข้าไปดูที่ชื่อของท่านนี้ได้เลยครับ
<svg xmlns=”SVG namespace” width=”600″ height=”250″>
<g stroke-width="16" fill="none"> <path d="M173 102a51 51 0 1 1-13-30m20 37h-53" stroke="#4a87ee"/> <circle cx="227" cy="128" r="32" stroke="#d83038"/> <circle cx="313" cy="128" r="32" stroke="#f4c022"/> <path d="M401 160a31 31 0 1 1 0-61m-4 0a24 29 0 1 1 0 61m26-67v79m-1-12a20 20 0 1 1-52 17" stroke="#4a87ee"/> <path stroke="#4ab95a" d="M449 51v115"/> <path d="M529 118a30 30 0 1 0-2 24m5-32l-62 28" stroke="#d83038"/></g></svg>
จากการใช้แนวคิดทางด้านบนนี้ตัวโลโกจะใช้การวาดรูปวงกลมเพียง 2 วง สำหรับตัว o ทั้งคู่และใช้เส้นอีก 4 เส้นสำหรับตัวอักษร G, g, l และ e โดยผลลัพธ์ที่ได้จะออกมาเป็นดังต่อไปนี้ครับ
ดังนั้นแล้วความเป็นไปได้ที่โลโกใหม่ของ Google จะมีขนาดอยู่ที่ 305 Bytes นั้นจึงไม่น่าผิดพลาดแต่อย่างใดครับ ทั้งนี้หากท่านใดมีวิธีการที่ดีกว่านี้ก็ลองเสนอไปทาง Google ดูนะครับ ไม่แน่ในอนาคตคุณอาจจะได้ร่วมงานกับ Google โดยไม่รู้ตัวกลายเป็นอีกหนึ่งความภาคภูมิใจของคนไทยที่สามารถร่วมงานกับบริษัทระดับโลกก็เป็นได้ครับ
ที่มา : gizmodo
