Cài thiện tốc độ website với CSS Sprites như thế nào?

19/11/2024

CSS Sprites là kỹ thuật kết hợp nhiều hình ảnh nhỏ thành một hình ảnh lớn, giúp cải thiện tốc độ website bằng cách giảm số lượng yêu cầu HTTP. Dưới đây là cách sử dụng CSS Sprites:

Mục lục

1. CSS Sprites là gì?

CSS Sprites là kỹ thuật trong phát triển web, kết hợp nhiều hình ảnh nhỏ thành một tệp ảnh lớn duy nhất. Sau đó, sử dụng thuộc tính CSS background và background-position để hiển thị từng phần của hình ảnh lớn tại các vị trí cụ thể trên giao diện website.

Kỹ thuật này giúp giảm số lượng yêu cầu HTTP tới máy chủ (thay vì tải từng hình ảnh riêng lẻ), từ đó tăng tốc độ tải trang và tối ưu hiệu suất website. CSS Sprites thường được sử dụng cho các biểu tượng, nút hoặc hình ảnh nhỏ lặp lại.

2. Cài thiện tốc độ website với CSS Sprites như thế nào?

2.1 Tạo Sprite Image:

Sử dụng công cụ như Photoshop hoặc các trang web (Sprite generators) để kết hợp nhiều hình ảnh thành một.


.icon {
    background: url('sprite.png') no-repeat;
    width: 50px;
    height: 50px;
}
.icon-facebook {
    background-position: -10px -20px; /* Vị trí của icon Facebook */
}
.icon-twitter {
    background-position: -60px -20px; /* Vị trí của icon Twitter */
}