เพิ่มความเร็วให้กับเว็บด้วยเทคนิก CSS Image Sprites

เว็บเพจที่มีรูปเยอะใช้เวลาโหลดนานเพราะเกิด server request หลายครั้ง Image Sprite เป็นรูปเดี่ยวๆ แต่ประกอบไปด้วยหลายรูป

เราสามารถใช้ Image Sprite เพื่อลดจำนวน request เป็นการลดแบนวิท และลดเวลาในการโหลดเว็บได้อย่างมีประสิทธิภาพ

 

การทำ Image Sprite เราต้องเขียน css เพื่อควบคุมการแสดงผล ซึ่งเขียนเองไม่ยาก แต่มีเว็บแนะนำซึ่งเว็บนี้จะสร้าง Image Sprite และเขียน CSS มาให้โดยอัตโนมัติ โดยมีวิธีการดังต่อไปนี้

1. เข้าไปที่เว็บ https://css.spritegen.com  จากนั้นให้อัพโหลดรูปแล้วกดปุ่ม "Create Sprite" 

2. เว็บจะสร้าง Image Sprite จากรูปที่เราอัพโหลด ให้เราคลิกขวาแล้วกด save จากนั้นให้อัพโหลดขึ้น server เพื่อนำไปใช้งาน

3. ให้เราคัดลอก html และ css ไปใช้กับเว็บเพจ โดยต้องใส่ url ของ image sprite ให้ถูกต้องด้วย

นอกจากการทำ css sprite แล้วเราควรหา host คุณภาพเพื่อให้เว็บของเราโหลดไวขึ้น

  • 6 ผู้ใช้งานชอบบทความนี้
ชอบบทความนี้?

บทความที่เกี่ยวข้อง

 เพิ่มความเร็วเว็บไซต์ด้วยการ minify css, js, และ html

เราสามารถย่อไฟล์ style sheet (css), javascript (js), และ html ได้...

 เพิ่มความเร็วเว็บไซต์ด้วยการใช้ WebP : next gen image format

เว็บสมัยนี้มีรูปค่อนข้างเยอะ โดย format ที่เราเห็นทั่วๆ ไปจะมี jpg, png, และ gif ซึ่ง jpg...

 ลดขนาด mp4 เพื่อให้เว็บโหลดเร็วขึ้น

สมัยนี้เว็บต่างๆ นอกจากการใช้รูป ยังมีการใช้ video กันมากขึ้น อาจจะเพื่อแสดง video ประกอบ ข้อมูล...

 เพิ่มความเร็วเว็บไซต์ด้วย Lazy Loading

Lazy Loading เว็บไซต์บางเว็บค่อนข้างยาว บางส่วนของเว็บไซต์ไม่จำเป็นต้องโหลด ถ้าผู้ใช้งานยัง...

 เทคนิกปรับแต่ง Wordpress ให้ทำงานเร็วขึ้น

ความเร็วในการโหลดเว็บมีผลต่อ user experience ของผู้ใช้งานเว็บไซต์ และมีผลต่อ SEO ด้วย เพราะ...