Kỹ thuật CSS Image Sprites tối ưu tốc độ tải trang

CSS Image Sprites là cách gộp nhiều ảnh nền cần sử dụng vào một file hình duy nhất và sử dụng thuộc tính background-position trong CSS với 2 vị trí Left, Top để xác định vị trí thành phần ảnh cần làm nền, nhằm giảm tải request (yêu cầu) đến máy chủ, và giảm dung lượng file hình, tăng tốc độ tải trang, tiết kiệm tài nguyên hệ thống.

Kỹ thuật này vẫn đang được Facebook và rất nhiều website sử dụng, vậy tại sao chúng ta lại không sử dụng nó?

Bình thường

Khi thực hiện viết HTML, chúng ta thường lưu tất cả thành những hình ảnh riêng biệt, rồi sử dụng thẻ <img> để hiển thị chúng. Ví dụ:

<img src="img/icon-1.png" alt="Icon 1">
<img src="img/icon-2.png" alt="Icon 2">
<img src="img/icon-3.png" alt="Icon 3">

Cách này thuận tiện và đơn giản nhưng tốn đến 3 request gửi đến server, trong trường hợp nhiều hình hơn thì thời gian tải trang sẽ rất rất lâu.

CSS Image Sprites

Ta có thể ghép tất cả các hình ảnh, icon… vào 1 hình duy nhất, ví dụ:

Sau đó dùng các thuộc tính background của CSS để tạo ra các hình ảnh riêng biệt.

Xem demo Tải về

HTML

<div class="sprite icon-1"></div>
<div class="sprite icon-2"></div>
<div class="sprite icon-3"></div>

CSS

.sprite {
	background-image: url(sprite.png);
	background-size: auto;
	background-repeat: no-repeat;
	display: inline-block;
	height: 25px;
	width: 25px;
}

.icon-1 {
	background-position: 0 0;
}

.icon-2 {
	background-position: 0 -25px;
}

.icon-3 {
	background-position: 0 -50px;
}

Chúc các bạn thành công!

5/5 (1 bình chọn)

Bình Luận