Mở đầu bài viết cho series
>Tối ưu trang web >, Vietrick xin giới thiệu đến các bạn kỹ thuật CSS Sprite. Rất nhiều website
lớn hiện nay như Google, Facebook, TheGioiDiDong, Zing,.. đều áp dụng kỹ thuật
này để tăng tốc độ tải trang web. Ở bài viết này chúng ta sẽ tìm hiểu kỹ hơn
về kỹ thuật CSS sprite, ưu nhược điểm và cách áp dụng sao cho đúng nhé.
alt="Tối ưu tốc độ trang web với CSS Sprite"
border="0"
data-original-height="1367"
data-original-width="2048"
src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjSbMQFi9cs5K1aP8jFGbRNrgfYZ5Bj4fyna_7amvK8WrikGMCWUJNk2jmzkQEnEz8MBg4ice4T_EqMpiKm65g2GiEQ0ta5aIgwihWRDTnzM-nEYDwp6jcFg55mpsMFBL7HYoD9W4sPQ5g/w1028-h400-p-k-no-nu/code.jpg"
srcset="
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjSbMQFi9cs5K1aP8jFGbRNrgfYZ5Bj4fyna_7amvK8WrikGMCWUJNk2jmzkQEnEz8MBg4ice4T_EqMpiKm65g2GiEQ0ta5aIgwihWRDTnzM-nEYDwp6jcFg55mpsMFBL7HYoD9W4sPQ5g/w1028-h400-p-k-no-nu/code.jpg 1028w,
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjSbMQFi9cs5K1aP8jFGbRNrgfYZ5Bj4fyna_7amvK8WrikGMCWUJNk2jmzkQEnEz8MBg4ice4T_EqMpiKm65g2GiEQ0ta5aIgwihWRDTnzM-nEYDwp6jcFg55mpsMFBL7HYoD9W4sPQ5g/w800/code.jpg 800w,
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjSbMQFi9cs5K1aP8jFGbRNrgfYZ5Bj4fyna_7amvK8WrikGMCWUJNk2jmzkQEnEz8MBg4ice4T_EqMpiKm65g2GiEQ0ta5aIgwihWRDTnzM-nEYDwp6jcFg55mpsMFBL7HYoD9W4sPQ5g/w600/code.jpg 600w,
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjSbMQFi9cs5K1aP8jFGbRNrgfYZ5Bj4fyna_7amvK8WrikGMCWUJNk2jmzkQEnEz8MBg4ice4T_EqMpiKm65g2GiEQ0ta5aIgwihWRDTnzM-nEYDwp6jcFg55mpsMFBL7HYoD9W4sPQ5g/w400/code.jpg 400w
"
/>
CSS Sprite là gì ?
Định nghĩa
CSS Sprite (hay CSS Image Sprites) là một kỹ thuật gộp nhiều hình ảnh nhỏ vào
1 ảnh lớn duy nhất. Các hình ảnh nhỏ sẽ được sử dụng làm background cho phần
tử bằng cách trích xuất từ ảnh lớn qua CSS background-position.
Vi dụ trang web của bạn cần sử dụng 5 hình ảnh biểu tượng cho laptop, desktop,
mobile, tablet, camera. Bạn có thể sử dụng kỹ thuật CSS sprite để gộp 5 biểu
tượng này vào 1 ảnh lớn duy nhất.
Các hình ảnh khi được gộp vào ảnh lớn có thể được sắp xếp theo chiều ngang
hoặc dọc, miễn là không chồng lấn với nhau.
style="margin-left: 1em; margin-right: 1em;"
>
data-original-height="100"
data-original-width="500"
src="https://www.vietrick.com/wp-content/uploads/2020/11/thegioididong_sprite.png"
/>
Các định dạng được hỗ trợ bởi kỹ thuật CSS Sprite là các định dạng hình ảnh
được hỗ trợ bởi thuộc tính background bao gồm cả định dạng svg.
Hướng dẫn tạo Image Sprite
Để hợp nhất các hình ảnh biểu tượng thành một ảnh lớn, các bạn có thể sử dụng
các công cụ chỉnh sửa hình ảnh như Photoshop để tiến hành ghép ảnh hoặc sử
dụng các công cụ online có sẵn trên Internet.
Các bạn có thể lên Google tìm với từ khóa: “online image sprite generator“.
Mình thường sử dụng bộ công cụ online miễn phí tại https://cssspritestool.com
Sau khi tạo được ảnh Image Sprite, các bạn cần nắm rõ vị trí tọa độ gốc và
kích thước của các ảnh nhỏ để sử dụng.
Hướng dẫn sử dụng Image Sprite
Sau khi tạo được Image Sprite. Với đường dẫn tại:
https://www.vietrick.com/wp-content/uploads/2020/11/thegioididong_sprite.png>
Chúng ta có thể thiết lập background cho các phần tử khi biết kích thước và
tọa độ. Ví dụ với Sprite Image của TGDD:
- Logo: kích thước 160×30 px, tọa độ: 0 0.
- Sticker bộ công thương: kích thước 110×30 px, tọa độ: 0px -54px;
- Icon Camera: kích thước 26×24 px, tọa độ: -250px -50px;
Kết quả áp dụng Sprite Image của trang TGDD:
Ưu điểm của CSS Sprite
Như đã mô tả rõ ràng ở phần định nghĩa của CSS Sprite, việc sử dụng kỹ thuật
này mang lại 2 lợi ích:
Giảm số lượng request: Việc kết nhiều hình ảnh vào 1 ảnh duy nhất rõ ràng
giúp giảm đáng kể số lượng request gởi đến server khi tải trang. Từ đó giúp
thời gian tải trang và tối ưu hơn cho trang web của bạn. Trong ví dụ của
TheGioiDiDong, áp dụng kỹ thuật này giúp giảm hơn 40 request tới server khi
tải trang.
Đồng bộ tải tài nguyên: Việc hợp nhất các ảnh nhỏ giúp đồng bộ việc tải các
tài nguyên này trên trang web của bạn. Loại bỏ sự cố không tải hoặc tải chậm
ảnh nào đó, từ đó giúp đem lại trải nghiệm thống nhất cho người dùng.
Nhược điểm của CSS Sprite
Bất kỳ một phương pháp nào cũng có 2 mặt lợi hại, CSS Sprite cũng vậy. Giảm
thiểu số lượng request là một lợi ích rõ ràng của kỹ thuật CSS Sprite. Tuy
nhiên, nếu bạn quá lợi dụng kỹ thuật này lại gây ảnh hưởng không tốt đến tốc
độ tải trang và trải nghiệm người dùng.
Việc gộp nhiều ảnh nhỏ vào 1 ảnh lớn gây phát sinh ra vấn đề dung lượng ảnh
hợp nhất (sprited image) quá lớn. Từ đó ảnh hướng đến tốc độ tải trang cũng
như trải nghiệm của người dùng.
Rõ ràng là việc bạn gộp 2 ảnh dung lượng 5KB lại với nhau sẽ không thể cho ảnh
đầu ra là 10KB. Thông thường, ảnh sau khi gộp sẽ có dung lượng lớn hơn một
chút.
Áp dụng CSS Sprite sao cho đúng
Việc áp dụng CSS Sprite chỉ dành cho các hình ảnh biểu tượng có dung lượng
nhỏ. Về cơ bản, phương pháp tối ưu có thể chia làm 2 phương thức thực hiện như
sau:
Tối ưu CSS Sprite theo dung lượng
Dung lượng ảnh hợp nhất (sprited image) không nên quá lớn, tốt nhất nên dưới
80KB để không gây ảnh hưởng đến trải nghiệm của người dùng. Nếu như trang web
của bạn có quá nhiều ảnh biểu tượng, các có thể xem xét chia ra nhiều tập
sprited image.
Trong ví dụ về Sprite Images của TheGioiDiDong, ảnh này chỉ có dung lượng 50KB
mà thôi.
Tối ưu CSS Sprite theo mục đích
Nếu như trang web của bạn có một số hình ảnh biểu tượng quan trọng cần hiển
thị ở phần đầu trang web, trong khi phần lớn các biểu tượng khác lại nằm ở
phần chân trang. Lúc này bạn nên xem xét tách các biểu tượng này ra làm 2 nhóm
để áp dụng CSS Sprite.
Việc tách thành nhiều ảnh sprited image theo mục đích và khu vực khác nhau vừa
giúp đảm bảo cân bằng giữa tốc độ tải và trải nghiệm người dùng.
Kết luận
CSS Sprite thực sự là một kỹ thuật lợi hại mà các nhà thiết kế trang web
thường sử dụng để tối ưu cho sản phẩm của mình. Áp dụng kỹ thuật này một cách
thông minh và khéo léo sẽ giúp cải thiện đáng kể tốc độ tải trang và trải
nghiệm trên trang web của bạn.
Ngoài ra, nếu bạn áp dụng thêm
target="_blank"
>kỹ thuật Lazy Load >
sẽ tạo thành combo tăng tốc độ tải hiệu quả.