Tối ưu tốc độ trang web với CSS Sprite
Mở đầu bài viết cho series Tối ưu trang web , Vietrick xin giới thiệu đến các bạn kỹ thuật CSS Sprite. Rất nhiều website lớn hiện nay như Google, Facebook, TheGioiDiDong, Zing,.. đều áp dụng kỹ thuật này để tăng tốc độ tải trang web. Ở bài viết này chúng ta sẽ tìm hiểu kỹ hơn về kỹ thuật CSS sprite, ưu nhược điểm và cách áp dụng sao cho đúng nhé. CSS Sprite là gì ? Định nghĩa CSS Sprite (hay CSS Image Sprites) là một kỹ thuật gộp nhiều hình ảnh nhỏ vào 1 ảnh lớn duy nhất. Các hình ảnh nhỏ sẽ được sử dụng làm background cho phần tử bằng cách trích xuất từ ảnh lớn qua CSS background-position . Vi dụ trang web của bạn cần sử dụng 5 hình ảnh biểu tượng cho laptop, desktop, mobile, tablet, camera. Bạn có thể sử dụng kỹ thuật CSS sprite để gộp 5 biểu tượng này vào 1 ảnh lớn duy nhất. Các hình ảnh khi được gộp vào ảnh lớn có thể được sắp xếp theo chiều ngang hoặc dọc, miễn là không chồng lấn với nhau. Các định dạng được hỗ trợ bởi kỹ thuật CSS Sprite là các định dạng …
