Sử dụng một ảnh duy nhất cho toàn bộ icon trên blog/website - tăng tốc độ tải trang

Giới thiệu về Sprite Sheet

Sử dụng sprite sheet (Gộp nhiều hình ảnh nhỏ lại thành một ảnh duy nhất) để tạo các icon cho website có thể giúp tăng tốc độ load trang. Khi sử dụng sprite sheet, một ảnh lớn được tải xuống và sau đó các phần khác nhau của ảnh đó được sử dụng như các hình ảnh riêng lẻ thông qua cách chỉ định vị trí và kích thước của từng phần.

Việc sử dụng sprite sheet giúp giảm số lượng yêu cầu tải ảnh từ máy chủ, vì chỉ cần tải một ảnh duy nhất thay vì nhiều ảnh riêng lẻ. Điều này giúp giảm thời gian tải trang và cải thiện trải nghiệm người dùng.

Ví dụ

Với 2 biểu tượng và
Chắc không ít bạn nghĩ rằng chỉ là 2 ảnh riêng biệt đúng không? Nhưng thực tế 2 hình ảnh bên trên này được lấy ra từ 1 ảnh bên dưới Và cách làm như sau

Hướng dẫn

Bước 1:

Tạo một ảnh duy nhất chứa tất cả các phần hình ảnh nhỏ (icon, hình ảnh...) mà bạn muốn sử dụng trên website. Và sử dụng đoạn CSS sau, mình lấy luôn ảnh từ ví dụ trên

.sprites {background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgPhyQTz3sJE4v9rbGaK_M3ZyCekVO9RtMc1eEUn_wZ1bde7Mjl62MVk_TXZHlHQhn6_-Z_cKv1ZUGn2RDdNre23_xyN6Mln39aFtCqTA4FD18A4SiFXf0UDLgerqQ1Q2zS9rROxwMPQ849/s0/bieu-tuong-icons.png);}

• Sử dụng thuộc tính background-image để chỉ định sprite sheet cho các phần tử HTML cần sử dụng.

Bước 2:

Xác định vị trí và kích thước của các phần hình ảnh

• Sử dụng CSS để xác định vị trí và kích thước của từng phần hình ảnh trong sprite sheet.
• Để làm điều này, bạn cần biết vị trí (tọa độ x, y) và kích thước (chiều rộng, chiều cao) của từng phần hình ảnh trong sprite sheet.
• Để tiện cho việc quản lý và sử dụng, đặt các lớp (class) cho các phần tử HTML mà bạn muốn áp dụng sprite sheet.

Ví dụ, với icon để định vị nó chúng ta có CSS

.meu {
    display: inline-block;
    background-position: 215px -35px;
    width: 25px;
    height: 25px;
}

• Sử dụng thuộc tính background-position để xác định vị trí của phần hình ảnh cụ thể mà bạn muốn hiển thị.
• Sử dụng thuộc tính width và height để xác định kích thước của phần tử.

Bước 3:

Sử dụng HTML với class đã được đặt cho từng icon để , với ví dụ trên ta đã đặt tên class cho icon là cuoi. Vậy ta có đoạn mã sau để hiển thị

<span class='sprites cuoi'></span>

Tóm lại phải thực hành mới hiểu rõ được bản chấp của thủ thuật này, vì thế mình có làm 1 tool để cho mọi người test bên dưới. Cũng có thể áp dụng để làm luôn vào blog/website của mình

Sprite Sheet Preview Tool