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

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!