CalConverters

CSS Sprite Generator

Upload ảnh, gộp thành một sprite sheet duy nhất, và tạo mã CSS — tất cả ngay trên trình duyệt.

CSS Sprite Generator

Gộp nhiều ảnh thành một sprite sheet và sinh CSS — ngay trong trình duyệt.

1
Upload
Thêm ảnh nguồn

Kéo–thả ảnh vào ô bên dưới. Mọi xử lý chạy ngay trong trình duyệt.

Thả ảnh vào đây

PNGJPGWEBPGIFSVG

Tối đa 5MB mỗi ảnh · tối đa 100 ảnh

Chọn tệp
Sprite preview
Cập nhật theo từng thay đổi
pack · 4px
Thêm ảnh để xem preview.

CSS Sprites là gì?

CSS sprites là kỹ thuật giảm số lượng HTTP requests cho tài nguyên hình ảnh. Nhiều ảnh nhỏ — như icons, buttons, logos — được gộp thành một ảnh lớn gọi là sprite sheet. Sử dụng CSS background-position, mỗi ảnh riêng lẻ được hiển thị bằng cách dịch chuyển vùng nhìn đến tọa độ chính xác.

Kỹ thuật này đặc biệt hiệu quả khi trang web sử dụng nhiều ảnh nhỏ. Các trang web lớn như Yahoo!, Google, và Amazon đã sử dụng CSS sprites để tối ưu tốc độ tải trang.

Cách sử dụng công cụ này

  1. Upload ảnh — Kéo thả nhiều file ảnh vào vùng upload, hoặc nhấn "Chọn tệp" để chọn. Định dạng hỗ trợ: PNG, JPG, GIF, WebP, SVG.

  2. Chọn bố cục — Chọn từ 4 thuật toán sắp xếp:

    • Nén (Packed): Bin-packing cho sprite nhỏ nhất (khuyến nghị cho ảnh nhiều kích thước)
    • Ngang (Horizontal): Sắp xếp 1 hàng
    • Dọc (Vertical): Sắp xếp 1 cột
    • Lưới (Grid): Ô lưới đồng đều (tốt nhất cho icons cùng kích thước)

  3. Điều chỉnh cài đặt — Thiết lập padding giữa các ảnh, chọn định dạng xuất (PNG hoặc WebP), cấu hình tiền tố/hậu tố CSS class, và bật tạo retina @2x/@3x.

  4. Xem trước và tải — Panel bên phải hiển thị bản xem trước kèm mã CSS, SCSS và HTML được tạo. Tải tất cả dưới dạng file ZIP.

Hỗ trợ Retina / HiDPI

Màn hình hiện đại có mật độ điểm ảnh 2x hoặc 3x. Để sprite hiển thị sắc nét trên các màn hình này, hãy bật tùy chọn @2x và @3x. Công cụ sẽ:

  • Tạo thêm sprite sheet ở độ phân giải cao hơn
  • Xuất CSS @media queries phát hiện mật độ điểm ảnh thiết bị
  • Sử dụng background-size để thu nhỏ sprite độ phân giải cao về kích thước hiển thị chính xác

Lưu ý tương thích trình duyệt

  • Opera: Các phiên bản đến 9.0 có giới hạn 2042px cho giá trị background-position. Với sprite rất lớn, hãy cân nhắc dùng bố cục Nén hoặc Lưới để giảm kích thước.
  • Safari: Ảnh nền lặp lại có thể gây vấn đề. Đảm bảo đủ padding giữa các ảnh.

Lợi ích hiệu suất

Mỗi HTTP request đều có overhead — tra cứu DNS, kết nối, bắt tay TLS. Bằng cách gộp 20 file icon thành một sprite duy nhất, bạn loại bỏ 19 requests. Điều này đặc biệt quan trọng trên mạng di động nơi độ trễ cao.

Câu hỏi thường gặp

CSS sprites là gì?
CSS sprites gộp nhiều ảnh nhỏ thành một ảnh lớn (sprite sheet). Mỗi ảnh được hiển thị bằng CSS background-position, giảm số lượng HTTP requests và tăng tốc tải trang.
Tùy chọn retina @2x/@3x hoạt động như thế nào?
Khi bật, công cụ tạo thêm sprite sheet ở độ phân giải 2x và 3x, kèm CSS media queries tự động chọn độ phân giải phù hợp dựa trên mật độ điểm ảnh của thiết bị.
Dữ liệu của tôi có an toàn không?
Có. Toàn bộ quá trình xử lý diễn ra trong trình duyệt bằng Canvas API. Không có ảnh nào được upload lên server.
Hỗ trợ những định dạng ảnh nào?
Bạn có thể upload PNG, JPG, GIF, WebP và SVG. Ảnh SVG được rasterize qua canvas. Đầu ra có sẵn ở định dạng PNG hoặc WebP.
Bố cục Packed (Nén) là gì?
Bố cục Packed sử dụng thuật toán bin-packing (MaxRects) để sắp xếp ảnh hiệu quả nhất có thể, giảm thiểu kích thước sprite và dung lượng file.
Tính năng loại trùng (deduplicate) hoạt động ra sao?
Công cụ băm (hash) từng ảnh upload và phát hiện các ảnh giống nhau pixel-by-pixel. Khi tìm thấy, chỉ một bản được đặt vào sprite và các tên class tương ứng được gộp lại trong CSS, giúp giảm dung lượng file.
Tôi có thể sắp xếp lại thứ tự ảnh trong sprite không?
Có. Kéo bất kỳ ảnh nào trong danh sách bằng tay cầm ở bên trái để sắp xếp lại. Sprite preview, mã CSS và file tải xuống tự động tạo lại khi bạn thay đổi thứ tự.