Hướng dẫn sử dụng kỹ thuật CSS Sprites

CSS sprites là một chiến thuật cũ mà thực sự vẫn hoạt động cho một số trường hợp sử dụng, trước khi http/2 ra đời thì kỹ thuật sử dụng CSS sprites là một kỹ thuật vua ( Giới tăng tốc độ load website ngày ấy kiểu website mà không biết sử dụng tuyệt kỹ này thì một website gà bỏ đi – tâm quan trọng nó ghê gớm đến như thế đấy)

CSS sprites là kỹ thuật được sử dụng để kết hợp nhiều hình ảnh nhỏ vào một file hình ảnh và sau đó gọi chỉ là một phần của nó trong CSS. nhờ thuộc tính css là {background-image: url(.png); background-repeat: no-repeat; width: px; height: px; background-position: px px} Đó là một cách thông minh để giảm các yêu cầu HTTP.

Ngày nay năm 2020 chiến thuật này là không còn hiệu quả nhiều như trước lắm vì HTTP/2 cho phép bạn có nhiều yêu cầu HTTP.

Nếu trong trường hợp bạn chưa có giao thức http/2 trở lên thì bạn càng phải tìm hiểu kỹ thuật CSS sprites, nếu trong trường hợp bạn đã có thức http/2 trở lên thì bạn cũng lên sử dụng vì vẫn cải thiện được một chút tốc độ load website, khoảng cách không nhiều như không có giao thức http/2

Hiện tại mình thấy điện máy xanh sử dụng kỹ thuật CSS sprites rất hiệu quả và tuyệt vời.

Hôm nay mình sẽ hướng dẫn cách sử dụng kỹ thuật CSS Sprites cho dù bạn không biết nhiều về css thì vẫn có thể sử dụng kỹ thuật này.

CSS sprites để làm gì

CSS sprites giúp website của bạn giảm yêu cầu http xuống mức thấp hơn, ví dụ website của bạn sử dụng 10 icon hình ảnh, website bạn phải tải 10 yêu cầu hình ảnh về máy chủ.

CSS sprites thường chỉ sử dụng thật sự tối ưu cho những icon có dung lượng file nhỏ mới cần gộp dùng CSS sprites.

Khi bạn sử dụng CSS sprites 10 icon này gộp vào 1 file hình ảnh, website chỉ cần tải 1 hình ảnh mà vẫn sử dụng được 10 icon.

Ngắn ngọn khái niệm dễ nhớ là gộp tất cả hình ảnh nhỏ vào một file duy nhất để cho website của bạn tối ưu hơn, tăng tốc website của bạn như mình đã nói bên trên tùy vào giao thức của bạn nữa, càng cũ thì càng hiệu quả, giao thức mới vẫn hiệu quả nhưng không nhiều.

Nhưng với mình thì vẫn nên đáng để nỗ lực.

Hướng dẫn CSS sprites

Điểm mẫu chốt của để thực hiện thành công kỹ thuật này sử dụng 5 thuộc tính của css:

1. 1. background-image: url(.png);
   2. background-position: -10px -20px;
   3. background-repeat: no-repeat;
   4. width: px;
   5. height: px;

Thứ cần lưu ý quan trọng nhất là thuộc tính
background-position: -10px -20px;
background-position hiểu đơn giản là xác định tọa độ vị trí icon bạn chọn, một bức ảnh bạn gộp có 10 icon thì background-position bạn chọn đúng 1 icon bạn muốn sử dụng.

cái này mình lấy ví dụ cho dễ hiệu thuộc tính này có có là: background-position: -10px -20px giá trị là -10px -20px đó là những thứ rất quan trọng.

-10px là trục hoành ( trục hoành là từ trái qua phải) hay hiểu đơn giản là chiều rộng của bức ảnh
-20px là trục tung. (trục tung là từ trên xuống dưới) hay hiểu đơn giản là chiều cao của bức ảnh

tọa độ bắt đầu từ điểm 0

Hơi xoắn não tý nhưng không sao bao nhiêu lăm ăn học cấp 3 bạn còn làm được chứ mấy cái áp dụng kiến thức cũ từ thời cấp 3 bạn học thôi.

Đây là nguyên lý để xóa định cài này mình thường sử dụng photoshop để xác định rất nhanh và chuẩn.

Bước 1: Tạo file ảnh gộp các icon của bạn vào một bức hình

Mình sẽ sử dụng photoshop vì đây là công cụ chỉnh sửa hình ảnh yêu thích nhất của mình, nó giúp mình xác định tọa độ cực chuẩn.

Bước 2: Tạo css

mình có kỹ thuật tạo này cực kì tối css, mình học được từ Điện Máy xanh.

Dòng css đầu tiên bạn gom tất cả các rules css vào để nhận thuộc tính background-image và background-repeat
Các rules khác thì bạn tùy biến theo ý muốn của mình.

.icon-1 ,.icon-2 ,.icon-3{background-image: url(.png);background-repeat: no-repeat;}
.icon-1 {width: 10px;height:10px;background-position: 0px 0px;}
.icon-2 {width: 20px;height:20px;background-position: -20px 0px;}
.icon-3 {width: 10px;height:10px;background-position: -30px 0px;}

Cách gọi icon hình ảnh đó ra

<i class="icon-1"></i>bạn có thể dùng span, nhưng mình thích dùng thuộc tính i html hơn. icon-1 bạn có thể thay bằng icon bạn thích.

Mấy đoạn này là ví dụ mẫu nhé, mình sẽ sớm ra video hướng dẫn chi tiết.
Tóm tắt:

Đây làm một kỹ thuật rất hay để tăng tốc độ load website và rất nhiều các website lớn vẫn đang sử dụng và cực kì tuyệt vời.