Hi 🤓 Cảm ơn bạn đã ghé thăm blog này, nếu những bài viết trên blog giúp ích cho bạn. Bạn có thể giúp blog hiển thị quảng cáo bằng cách tạm ngừng ad blocker 😫 và để giúp blog duy trì hoạt động nếu bạn muốn.
Cảm ơn bạn!

Một trang web có nhiều hình ảnh, đặc biệt là nhiều hình ảnh nhỏ, chẳng hạn như các icon, button,... có thể mất nhiều thời gian để tải và tạo ra nhiều request lên server.

Để giải quyết vấn đề trên, chúng ta sẽ sử dụng kỹ thuật CSS sprites. Sử dụng CSS sprites tức là chúng ta sẽ gộp các hình ảnh riêng biệt vào một file duy nhất, bằng cách này nó sẽ làm giảm đáng kể số lượng HTTP request mà trình duyệt gửi đến server và giúp tốc độ tải trang của chúng ta sẽ được cải thiện 🚀.

Sử dụng CSS Image Sprites

Để sử dụng kỹ thuật này, chúng ta cần gom các hình ảnh riêng biệt vào một file duy nhất. Bạn có thể sử dụng công cụ CSS Sprites Generator để làm việc này. Trong ví dụ này, mình sẽ sử dụng một image sprite có sẵn nhé ^^.

Image Sprite - emotion

Để đơn giản, chúng ta nên sử dụng tất cả các icon có cùng kích thước và đặt chúng gần nhau để dễ dàng tính toán nhé.

Để hiển thị được một icon từ hình trên, chúng ta cần biết vị trí của icon đó. Trong CSS, chúng ta sử dụng background-position để chọn vị trí hiển thị icon và thuộc tính background-image hoặc background để load file hình trên.

Đầu tiên chúng ta cần tạo ra một class chứa style cho icon, giả sử mình cho icon có kích thước 40x40, trong hình theo chiều ngang có 16 icon, như vậy chúng ta có thể đặt background-size là 40 * 16 = 640px là phù hợp (chiều cao CSS sẽ auto tính toán):

.sprite {
  display: inline-block;
  margin: 0;
  padding: 0;
  width: 40px;
  height: 40px;
  background-repeat: no-repeat;
  background-image: url("./smileys-emotion.png");
  background-size: 640px;
}

Bây giờ chúng ta thử hiển thị icon đầu tiên thử, tính từ trên xuống, và từ trái qua thì icon đầu tiền có tọa độ x: 0px và y: 0px, mình sẽ đặt class tương ứng với tọa độ của nó nhé. Bản chất của CSS Image Sprites là chúng ta sẽ chọn icon dựa theo tọa độ XY.

.icon-X0Y0 {
  background-position: 0px 0px; /* x y */
} 
<div class="sprite icon-X0Y0"></div>

Kết quả chúng ta được:

Bây giờ chúng ta thử lấy icon nhìn giống thế này 🥶.

Các bạn lưu ý, vì điểm gốc tọa độ nằm ở góc trên cùng bên trái của hình, nên chúng ta sử dụng số âm ví dụ -40px -0px thì icon ở hàng đầu tiên, thứ 2 sẽ hiện ra.

Nhìn vào hình chúng ta sẽ thấy vị trí của icon 🥶. Nó nằm ở hàng thứ 4, nên y = -3 * 40px = -120px, cột thứ 7 nên x = -6 * 40px = -240px.

.icon-X7Y4 {
   background-position: -240px -120px;
}
<div class="sprite icon-X7Y4"></div>

Kết quả chúng ta được như sau:


Như vậy là mình đã giới thiệu cho các bạn kỹ thuật CSS Image Sprites giúp tối ưu tốc độ tải trang. Hi vọng bài viết giúp ích cho các bạn. Chúng ta sẽ gặp lại nhau trong các bài viết sắp tới nhé ^^.

Có thể bạn thích ⚡
homiedev
About Me

Hi, I'm @devnav. Một người thích chia sẻ kiến thức, đặc biệt là về Frontend 🚀. Trang web này được tạo ra nhằm giúp các bạn học Frontend hiệu quả hơn 🎉😄.

Chúc các bạn tìm được kiến thức hữu ích trong blog này 😁😁.