CSS sprites อาจจะไม่ใช่เรื่องใหม่ ในความเป็นจริงแล้วมันเป็นเทคนิคที่ดีกลายมาเป็นเรื่องพื้นฐานของนักพัฒนาเว็บไซร์ ( Web developer ) ที่จะต้องเรียนรู้ แน่นอนแหละว่า CSS sprites ไม่ใช่สิ่งสำคัญ คุณจะไม่ใช่มันก็ได้ แต่บางเหตุการณ์นั้นมันก็มีประโยชน์เป็นข้อได้เปรียบในการปรับปรุงแก้ไข โดยเฉพาะอย่างยิ่งเรื่องการที่เราต้องการให้ server ของเรานั้นโหลดน้อยๆ และถ้าคุณผู้อ่านนั้นไม่เคยได้ยินมาก่อน เกี่ยวกับ CSS sprites เอาล่ะ ! ถึงเวลาที่เราจะไปทำความรู้จักกับ CSS sprites ซักทีว่ามันคืออะไร ? มีความเจ๋งยังไงกับงานของเรา ? และมีเครื่องไม้เครื่องมืออะไรที่จะช่วยเราทำมัน … !?
ทักทายกันหน่อย
เรื่องนี้อาจจะเป็นอีกเรื่องที่สำคัญและยังอยู่ใน slide ของคุณ @imenn ซึ่งเป็นอีกเรื่องที่ไม่ว่าคุณออกแบบเว็บยังไงก็ควรจะมีมันครับเพราะว่ามันจะอะไรหลายๆอย่างเดียวกับด้าน design ของเว็บ และเกี่ยวเนื่องกับการทำให้ server โหลดไม่หนักทำให้เว็บเร็วขึ้นอีกด้วย ผมจึงหยิบเรื่องนี้เป็นเรื่องต่อจากเรื่อง reset css พื้นฐานของการก้าวไปสู่ master ถ้าคุณผู้อ่านนั้นมาเจอเรื่องนี้เลยก็ลองกลับไปอ่านตัวนั้นก่อนนะครับเป็นซี่รีย์เดียวกัน โดยผมจะพยายามอธิบายให้เป็นคำพื้นบ้านเพื่อให้เข้าใจง่ายที่สุดเท่าที่ผมจะทำได้แล้วกัน อาจจะมีการหยอดมุขไปเรื่อยตามสันดา… นิสัยอ่ะครับ ก็แนะนำติชมได้
บทความนี้แปลมาจาก …
ผู้เขียน : Sven Lennartz
ผู้แปล ( แบบเกรียนๆ ) : นาย oxygenyoyo
CSS sprites มันคืออะไร ?
คำว่า “sprites” ( มีความหมายว่า ผีสาง , เทวดา ) มีต้นกำเนิดมาจาก computer graphic โดยตัวมันอธิบายไว้ว่าเป็นการเอาภาพ 2D หรือ 3D หรือฉากมารวมกันเป็นภาพเดียวแล้วทำการอ่านด้วย hardware เหตุผลที่นำมารวมเพราะว่า ในสมัยก่อนนั้นภาพยังถูกโหลดแบบธรรมดาแต่ว่าเกมสมัยใหม่นั้นยิ่งพัฒนามีความซับซ้อนมากขึ้น ทำให้ต้องการเทคนิคที่จะสามารถตอบสนองขณะที่เกมกำลังถูกเล่นอยู่ โดยหนึ่งในเทคนิคนั้นที่เหล่า developer เห็นคือ sprites แล้วไปรวมกับ grid ( เดี๋ยวดูรูปด้านล่าง ) โดยจะทำการเราจะทำการ โค้ดกำหนด ตำแหน่งจากรูปเราก็จะสามารถได้รูปเสมือนเราเจาะออกมาจากรูปที่รวมภาพต่างๆไว้อยู่ เป็นชิ้นๆที่เราต้องการได้
เห็นไหมครับท่านผู้อ่าน ภาพถูกรวมเป็นชิ้นเดียวเวลาจะเอาโต๊ะก็กำหนดค่า บน ล่าง ซ้าย ขวา ( 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 นี้ใช้พวก icon กับปุ่มและ logo ทำเป็น sprites
ไม่ต้องบอกก็รู้จักกันดีสำหรับเว็บนี้ไปดูกันเลยว่าเขาทำอะไรไว้บ้าง
สำหรับสาวกนั้น จะไม่ให้ดูหน่อยคงไม่ได้ สาวกเขาเยอะจริง
ทาง youtube เก็บทุกอย่างจริงๆ ครับเขาบอกว่ารูป master ตัวนี้มีความสูงถึง 2800 pixels ผมคงไม่เอามาหมดหรอก
ก็เอามาให้ชมกันเป็นตัวอย่างว่า เว็บดังๆที่มีคนเข้าเยอะเยะเขาต้องทำกันเพราะมันจะช่วยเรื่องการโหลดให้น้อยลง เร็วขึ้น ส่วนเรื่องการ ทำภาพ master image หรือภาพรวมให้เป็นภาพเดียวนั้นผมขอยกยอดไปต่อเรื่องหน้าแล้วกันครับ เพราะทางเว็บที่ผมแปลมานั้นเขาใส่หัวข้อให้ไปศึกษาต่อเองเยอะมากกกกกกกมว๊ากกกกก แต่ถ้าคุณผู้อ่านยังอารมณ์ไฟลุกอยู่ก็ตามไปอ่านกันได้เลยครับ เดี้ยวเรื่องหน้าผมจะหาบทความที่จะสอนทั้งการทำแบบ ทำภาพด้วยตัวเองและการใช้ tool ต่างๆช่วยให้เราไม่ต้องเสียเวลาและข้อดีข้อเสียให้ฟังกันครับ
ถ้าคุณชอบบทความในเว็บนี้ และอยากสนับสนุนเรา เพียงแค่คุณสมัครรับข่าวสารด้านล่างจะได้รับสิทธิ์พิเศษก่อนใคร เราสัญญาว่าจะส่งบทความที่เป็นประโยชน์ต่อคุณอย่างแน่นอนครับ
