Về công cụ này
Một sprite sheet CSS gói cả một bộ ảnh nhỏ — biểu tượng, ký hiệu giao diện, emoji — vào một tệp ảnh lớn hơn duy nhất, rồi dùng background-position của CSS để hiển thị đúng phần cần thiết cho từng phần tử. Trước khi HTTP/2 có ghép kênh (multiplexing), đây là một mẹo tối ưu hiệu năng có ý nghĩa: trình duyệt mở hàng chục kết nối riêng cho hàng chục tệp biểu tượng nhỏ sẽ chậm hơn so với mở một kết nối duy nhất cho một ảnh gộp, và khoảng cách đó vẫn có thể quan trọng trên kết nối HTTP/1.1, giới hạn số lượng request nghiêm ngặt của CDN, hoặc đơn giản là giảm các request tài nguyên chặn hiển thị trên mạng chậm.
Công cụ này xây dựng cả hai phần cho bạn, hoàn toàn ngay trong trình duyệt: thả các tệp biểu tượng vào, chọn xếp chúng theo một hàng hay một cột và khoảng đệm trong suốt giữa chúng là bao nhiêu, rồi nó vẽ tất cả lên một canvas, mã hóa thành PNG (để giữ độ trong suốt), và tạo ra quy tắc CSS background-position chính xác cho từng ảnh — sao chép thẳng vào stylesheet của bạn. Tuy vậy, sprite là một kỹ thuật khá cũ: với hầu hết dự án mới, SVG nội tuyến hoặc font biểu tượng SVG thường dễ bảo trì hơn và co giãn đẹp hơn ở mọi kích thước, vì vậy hãy xem đây là một công cụ nữa trong bộ công cụ chứ không phải câu trả lời duy nhất đúng — hãy dùng nó khi bạn đã có sẵn một bộ biểu tượng dạng raster (PNG, không phải vector) và muốn giảm số lượng request.
Câu hỏi thường gặp
CSS sprite có còn phù hợp không, hay tôi nên dùng biểu tượng SVG thay thế?
Đối với hầu hết các dự án mới, SVG nội tuyến hoặc font/sprite biểu tượng SVG thường là lựa chọn hiện đại hơn (sắc nét ở bất kỳ mức thu phóng nào, dễ dàng đổi màu bằng CSS, không có vấn đề căn chỉnh lưới pixel cố định). CSS sprite vẫn thực sự hữu ích cho các bộ biểu tượng ảnh chụp/raster không thể biểu diễn dưới dạng hình vector, cho các cơ sở mã cũ đã được xây dựng xung quanh kỹ thuật này, hoặc đơn giản là một cách nhanh, không phụ thuộc để đóng gói một bộ biểu tượng nhỏ với số lượng yêu cầu HTTP tối thiểu. Hãy sử dụng bất cứ thứ gì phù hợp với ràng buộc thực tế của bạn — công cụ này ở đây cho khi một sprite sheet raster là công cụ phù hợp cho công việc, không phải là tuyên bố rằng nó luôn là lựa chọn tốt nhất.
Tại sao không thêm khoảng đệm cuối sau ảnh cuối cùng?
Điều này giữ cho tổng kích thước của sheet nhỏ nhất có thể — cài đặt đệm tồn tại để ngăn hiện tượng loang màu GIỮA các biểu tượng liền kề khi sheet được thu phóng, điều này chỉ là mối lo ngại đối với các cạnh được chia sẻ bởi hai biểu tượng; cạnh ngoài của chính sheet không có biểu tượng lân cận ở phía bên kia, vì vậy không gian thêm ở đó sẽ không phục vụ mục đích đó và chỉ lãng phí dung lượng tệp, đồng thời gây ra sự không nhất quán về khoảng cách của mỗi biểu tượng đến cạnh tuyệt đối của sheet tùy theo vị trí của nó.