Skip to toolbar

ความน่าค้นหาของ (เสน่ห์ ) CSS sprites : เทคนิค,เครื่องมือ,ตัวอย่าง

CSS sprites อาจจะไม่ใช่เรื่องใหม่ ในความเป็นจริงแล้วมันเป็นเทคนิคที่ดีกลายมาเป็นเรื่องพื้นฐานของนักพัฒนาเว็บไซร์ ( Web developer ) ที่จะต้องเรียนรู้ แน่นอนแหละว่า CSS sprites ไม่ใช่สิ่งสำคัญ คุณจะไม่ใช่มันก็ได้ แต่บางเหตุการณ์นั้นมันก็มีประโยชน์เป็นข้อได้เปรียบในการปรับปรุงแก้ไข โดยเฉพาะอย่างยิ่งเรื่องการที่เราต้องการให้ server ของเรานั้นโหลดน้อยๆ และถ้าคุณผู้อ่านนั้นไม่เคยได้ยินมาก่อน เกี่ยวกับ CSS sprites เอาล่ะ ! ถึงเวลาที่เราจะไปทำความรู้จักกับ CSS sprites ซักทีว่ามันคืออะไร  ? มีความเจ๋งยังไงกับงานของเรา ? และมีเครื่องไม้เครื่องมืออะไรที่จะช่วยเราทำมัน  … !?

ทักทายกันหน่อย

เรื่องนี้อาจจะเป็นอีกเรื่องที่สำคัญและยังอยู่ใน slide ของคุณ @imenn ซึ่งเป็นอีกเรื่องที่ไม่ว่าคุณออกแบบเว็บยังไงก็ควรจะมีมันครับเพราะว่ามันจะอะไรหลายๆอย่างเดียวกับด้าน design ของเว็บ และเกี่ยวเนื่องกับการทำให้ server โหลดไม่หนักทำให้เว็บเร็วขึ้นอีกด้วย ผมจึงหยิบเรื่องนี้เป็นเรื่องต่อจากเรื่อง reset css พื้นฐานของการก้าวไปสู่ master ถ้าคุณผู้อ่านนั้นมาเจอเรื่องนี้เลยก็ลองกลับไปอ่านตัวนั้นก่อนนะครับเป็นซี่รีย์เดียวกัน โดยผมจะพยายามอธิบายให้เป็นคำพื้นบ้านเพื่อให้เข้าใจง่ายที่สุดเท่าที่ผมจะทำได้แล้วกัน อาจจะมีการหยอดมุขไปเรื่อยตามสันดา… นิสัยอ่ะครับ ก็แนะนำติชมได้

บทความนี้แปลมาจาก …

web : http://www.smashingmagazine.com/2009/04/27/the-mystery-of-css-sprites-techniques-tools-and-tutorials/

ผู้เขียน : Sven Lennartz

ผู้แปล ( แบบเกรียนๆ ) : นาย oxygenyoyo

CSS sprites มันคืออะไร ?

คำว่า “sprites” ( มีความหมายว่า ผีสาง , เทวดา ) มีต้นกำเนิดมาจาก computer graphic โดยตัวมันอธิบายไว้ว่าเป็นการเอาภาพ 2D หรือ 3D หรือฉากมารวมกันเป็นภาพเดียวแล้วทำการอ่านด้วย hardware เหตุผลที่นำมารวมเพราะว่า ในสมัยก่อนนั้นภาพยังถูกโหลดแบบธรรมดาแต่ว่าเกมสมัยใหม่นั้นยิ่งพัฒนามีความซับซ้อนมากขึ้น ทำให้ต้องการเทคนิคที่จะสามารถตอบสนองขณะที่เกมกำลังถูกเล่นอยู่  โดยหนึ่งในเทคนิคนั้นที่เหล่า developer เห็นคือ sprites แล้วไปรวมกับ grid ( เดี๋ยวดูรูปด้านล่าง ) โดยจะทำการเราจะทำการ โค้ดกำหนด ตำแหน่งจากรูปเราก็จะสามารถได้รูปเสมือนเราเจาะออกมาจากรูปที่รวมภาพต่างๆไว้อยู่ เป็นชิ้นๆที่เราต้องการได้

sprite image
sprite image

เห็นไหมครับท่านผู้อ่าน ภาพถูกรวมเป็นชิ้นเดียวเวลาจะเอาโต๊ะก็กำหนดค่า บน ล่าง ซ้าย ขวา ( A B select start ) เราก็จะได้ภาพโต๊ะมาแหละ วันเวลาผ่านไป … จนกระทั่งปี 2000 มีการพัฒนาโดย นักออกแบบเว็บไซร์ได้ค้นหาทางเลือกใหม่ๆ สำหรับการทำปุ่มที่ใช้การ rollover menu ( เอาเมาส์อยู่บนปุ่มหรือออกจากปุ่มแล้วรูปมันเปลี่ยนจะเห็นได้ทั่วไปตามเมนูเว็บไซร์ทั่วไปว่างั้น ) โดยตัว sprites ดูเหมือนจะเป็นสิ่งใหม่ๆสำหรับนักพัฒนาตอนนั้น โดยการใช้มันเข้ากับ CSS ทำให้ใช้งานง่ายและแก้ไขง่าย !! โค้ดสะอาดขึ้นและมันง่ายกว่าการใช้ javascript อีกด้วย โอ้วว … ดีขนาด beyond GOKLIKE !!

ต่อมาปี 2004 นาย Dave Shea ให้ คำแนะนำ (ไว้ว่างๆจะแปลต่อให้) เกี่ยวกับการใช้ CSS โดยทำเนื้อหาสอนการใช้ sprites ตัวอธิบายผ่านตัวเกมระดับตำนาน ( ลุงหนวดถล่มอาณาจักรเต่า ) ในกรณีนี้ ภาพทั้งหมดที่ใช้ในเว็บตลอดถูกรวมอยู่ในภาพ ภาพเดียวชื่อว่า “master image” ในการแสดงภาพหนึ่งอย่าง จากภาพ master image นั้นเขาได้ใช้คำสั่ง CSS background-position โดยขึ้นอยู่กับว่าจะเอาภาพ อะไร ใหญ่หรือเล็กก็ปรับตำแหน่งของภาพเอา โดยไม่ว่าจะทำให้ภาพสลับกันแบบว่าเวลาเราเอาเม้าส์ไปวางบนปุ่มแล้วเปลี่ยนภาพก็แค่กำหนดตำแหน่งใหม่ให้กับตอนที่ CSS hover ทำงานก็พอ

ในจุดนี้ท่านผู้อ่านบางคนจะเริ่มเข้าใจว่าทำไมมันถึงได้เร็ว !! เพราะว่าโดยปกติแล้วเราต้องทำภาพหลายๆภาพ โดยสมมติว่าเราทำปุ่ม แต่ก่อนมันจะมีสองขั้นตอนแบบง่ายๆ คือ ตอนที่ user นั้นยังไม่เอาเม้าส์มาวางบนปุ่ม ก็จะเป็นหนึ่งภาพที่ถูกโหลด และ เมื่อ user เอาเม้าส์มาวางบนปุ่ม ตัวปุ่มก็จะทำการ request ภาพจาก server ซึ่งวิธีนี้เราต้องเสียค่าการโหลดใหม่ และมันช้าอีกด้วย !! เพราะมันต้องไปโหลดภาพ ขณะที่ user เอาเม้าส์มาวางบนปุ่ม แล้วถ้าสมมติว่ารูปที่โหลดมาช้าหรือว่าเน็ตของ user ช้าละก็ เขาจะเห็นภาพปุ่มยังไม่เปลี่ยนเพราะว่าโหลดภาพมาไม่เสร็จซึ่งมันทำให้รู้สึกว่าห่วย ( ขั้นเทพ ) สำหรับนักออกแบบและพัฒนาเว็บไซร์ แต่วิธีการใช้ sprites นั้น ภาพจะถูกโหลดแค่ 1 ครั้ง แล้วเราก็ปรับตำแหน่งเอาซึ่งทำให้เราโหลดแค่ครั้งเดียว ได้ภาพที่รวมทุกอย่างจะใช้เมื่อไรก็ได้ในเว็บ แค่เปลี่ยนตำแหน่ง ( มันคล้ายๆกับการเจาะภาพ )

ผลพลอยได้ของการที่เราใช้ CSS sprites คือ ลดการโหลด HTTP request ถูกโหลดน้อยลง = รองรับคนเข้ามาได้มากขึ้น ซึ่งเว็บไซร์ที่ต้องรองรับการโหลดหนัก ตัวอย่างที่เห็นชัดเจนและอยู่ใกล้ตัวคุณคือ google ครับ ชัวร์ ! google เขาก็ใช้ และด้วยเหตุผลที่สำคัญของผลลัพธ์นี้จึงปฎิเสธไม่ได้เลยที่จะไม่ใช้เทคนิคตัวนี้ CSS sprites ตัวนี้จึงถูกใช้เป็นเหมือนพื้นฐานที่ต้องใช้กันเลยทีเดียวนะฮ๊าฟฟฟฟ

CSS sprites ถูกใช้ตรงไหน ?

ส่วนใหญ่แล้วตัว CSS sprites จะถูกใช้เกี่ยวกับภาพ icon ต่างๆ ภาพที่มีความเกี่ยวข้องกัน หรือแม้แต่ใช้รวมทุกภาพเข้าด้วยกัน  โดยการรวมมีวัตถุประสงค์ที่ว่ามัน จัดการและแก้ไขง่ายสำหรับ designer อีกด้วย ส่วนช่องว่าง ( ระหว่างเรา ) ในรูปนั้นจะถูกใช้ในการทำให้แน่ใจว่า ถ้าสมมติมีการเปลี่ยนขนาดของอักษรใน browser จะไม่มีผลกระทบการต่อใช้รูปหลายๆรูปที่เป็นพื้นหลัง ( background ) ซึ่งความจริงแล้ว ตัว sprites image ถูกใช้ในเรื่องภาพ pixel design หรือเรียกว่าภาพ dot pixel แต่ว่ามันอาจจะยากในการใช้สำหรับการดีไซร์ที่มันค่อยข้างยืดหยุ่นอย่างเว็บไซร์ ซึ่งมีการปรับเปลี่ยนตลอดเวลา โดยธรรมชาติแล้วตัวโครงสร้างของ sprites นั้นจะขึ้นอยู่ระหว่างเรื่องการบำรุงรักษากับ การจัดการการโหลดของ server แต่เชื่อเหอะว่า มันขึ้นอยู่กับโปรเจ็คที่เราทำ ( ฮา )

ด้านล่างจะเป็นตัวอย่างของเว็บที่ใช้ CSS sprites แต่ผมไม่ได้เอาภาพตัวเต็มมานะครับเพราะบางภาพนั้นใหญ่มากกกกกกกกกกกกกกกกกกกกกกก

Xing

xing นี้ใช้พวก icon กับปุ่มและ logo ทำเป็น sprites

xing css prites image
xing css prites image

Amazon

ไม่ต้องบอกก็รู้จักกันดีสำหรับเว็บนี้ไปดูกันเลยว่าเขาทำอะไรไว้บ้าง

Amazon css sprites
Amazon css sprites

Apple

สำหรับสาวกนั้น จะไม่ให้ดูหน่อยคงไม่ได้ สาวกเขาเยอะจริง

Apple css sprites
Apple css sprites

YouTube

ทาง youtube เก็บทุกอย่างจริงๆ ครับเขาบอกว่ารูป master ตัวนี้มีความสูงถึง 2800 pixels ผมคงไม่เอามาหมดหรอก

youtube css sprites
youtube css sprites

ก็เอามาให้ชมกันเป็นตัวอย่างว่า เว็บดังๆที่มีคนเข้าเยอะเยะเขาต้องทำกันเพราะมันจะช่วยเรื่องการโหลดให้น้อยลง เร็วขึ้น ส่วนเรื่องการ ทำภาพ master image หรือภาพรวมให้เป็นภาพเดียวนั้นผมขอยกยอดไปต่อเรื่องหน้าแล้วกันครับ เพราะทางเว็บที่ผมแปลมานั้นเขาใส่หัวข้อให้ไปศึกษาต่อเองเยอะมากกกกกกกมว๊ากกกกก แต่ถ้าคุณผู้อ่านยังอารมณ์ไฟลุกอยู่ก็ตามไปอ่านกันได้เลยครับ เดี้ยวเรื่องหน้าผมจะหาบทความที่จะสอนทั้งการทำแบบ ทำภาพด้วยตัวเองและการใช้ tool ต่างๆช่วยให้เราไม่ต้องเสียเวลาและข้อดีข้อเสียให้ฟังกันครับ


Deprecated: Theme without comments.php is deprecated since version 3.0.0 with no alternative available. Please include a comments.php template in your theme. in /home/zp1291/domains/oxygenyoyo.com/public_html/wp-includes/functions.php on line 4913

ฝากข้อคิดเห็น

This site uses Akismet to reduce spam. Learn how your comment data is processed.