Logo WordMarkWordMark Tools
Miễn phí là trên hếtRiêng tư theo mặc định
Công cụ ảnh · Miễn phí 100%

Tạo Sprite Sheet

Gộp nhiều ảnh vào một sprite sheet duy nhất và nhận kèm bản đồ tọa độ JSON. Một yêu cầu HTTP thay vì năm mươi vẫn là một trong những cách tăng hiệu năng front-end hiệu quả nhất. Công cụ miễn phí, không cần tài khoản và không thêm watermark vào kết quả của bạn.

Tạo Sprite Sheet

Thêm file của bạn. Thiết lập đề xuất đã sẵn sàng, bạn có thể xử lý chỉ với một cú nhấp.

Thả file vào đây

PDF, Word, ảnh, âm thanh, video, file nén và hơn nữa

Tối đa 100 file · 250 MB · Không cần tài khoản
  1. 1Thêm file
  2. 2Chọn một thao tác
  3. 3Tải về hoặc làm tiếp
Riêng tư theo mặc định. File đã chọn chỉ được tải lên cho các thao tác trên máy chủ.Chi tiết về quyền riêng tư

Khi nào bạn cần

Gộp biểu tượng giao diện vào một tấm để giảm số yêu cầu tải trang
Tạo texture atlas cho game engine hoặc hoạt ảnh canvas
Gói các khung hình hoạt ảnh vào một tài nguyên duy nhất

Cách hoạt động

Các ảnh được xếp lên một tấm trong suốt theo dạng lưới, có khoảng đệm tùy chọn giữa chúng để khi tấm ảnh được phóng to, hoặc khi engine game lọc texture, mép của sprite này không lem sang sprite kế bên. Kèm theo PNG là một bản đồ JSON ghi tệp, vị trí và kích thước của từng sprite, và một tệp CSS với mỗi sprite một class đặt kích thước và vị trí nền, dùng ngay cho trang web.

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

Bản đồ JSON dùng để làm gì?

Nó cho biết x, y, chiều rộng và chiều cao của từng ảnh đã xếp, chính là dữ liệu bạn đưa vào background-position trong CSS hoặc trình tải atlas của game engine.

Nền trong suốt có được giữ không?

Có. Tấm sprite được xuất dạng PNG và độ trong suốt của ảnh gốc được giữ nguyên.

Với HTTP/2 thì cách này còn quan trọng không?

Không bằng trước, nhưng vẫn giảm chi phí yêu cầu và là cách làm chuẩn cho texture atlas trong game.

Có CSS dùng được ngay không?

Có. Tệp tải về gồm sprite-sheet.css, với class .sprite cho cả tấm và class .sprite-tên cho từng ảnh, đặt chiều rộng, chiều cao và vị trí nền.

Khoảng đệm để làm gì?

Khi tấm ảnh được phóng to, hoặc engine game lọc texture, điểm ảnh từ sprite bên cạnh có thể lem vào mép sprite đang hiển thị. Vài điểm ảnh đệm trong suốt giữa các sprite giúp tránh điều đó.

Công cụ miễn phí liên quan

212
Cắt Ảnh Thành Nhiều Phần

Cắt ảnh thành các hàng và cột bằng nhau ở độ phân giải đầy đủ, tải từng phần hoặc cả gói ZIP. Phù hợp cho bài carousel Instagram. Miễn phí.

104
Tạo Favicon

Tạo mọi kích thước favicon và tệp ICO từ một ảnh nguồn cho website và ứng dụng web.

108
Tạo Bảng Ảnh Xem Trước

Tạo contact sheet gồm ảnh thu nhỏ và tên file, dưới dạng một ảnh JPG hoặc các trang A4 PDF sẵn sàng để in. Miễn phí, không cần tài khoản.

086
PNG sang WebP

Chuyển ảnh PNG sang WebP để web nhẹ hơn mà không mất nền trong suốt. Chuyển được nhiều ảnh một lúc. Miễn phí, không cần tài khoản.