Giảm dung lượng tải trang bằng cách gom nhiều icons của giao diện web vào một ảnh

Icons cho website là điều rất cần thiết, bởi không phải các framework font end đảm nhiệm được hết cho website mà bạn vẫn cần phải sử dụng tới hình ảnh, nhưng nếu không biết sử dụng đúng thì khiến cho website của bạn, của khách hàng của bạn càng nặng thêm. Chính vì lý do đó mà hôm nay Thịnh chia sẻ kinh nghiệm với các bạn cách sử dụng icons bằng hình ảnh cho website nhưng lại giúp giảm dung lượng tải trang web một cách hiệu quả bằng cách gom toàn bộ icons vào một bức ảnh thay vì sử dụng mỗi icons là một bức ảnh.

Như các bạn đã biết thì trên website có rất nhiều vị trí cần sử dụng icons và mỗi icon mà bạn cần có là một file ảnh, thường thì mọi người dùng file ảnh có định dạng PNG để giúp có thể làm trong suốt icon ví dụ như hình tròn thì bạn cần loại  bỏ phần vuông góc đi. Nhưng càng nhiều icons thì khi tải trang dung lượng càng cao. Để dễ hình dung mình chụp lại hình ảnh các icons trên máy tính của mình đang lưu trữ dùng cho web như sau:

Trong đó icon.png là ảnh tích hợp nhiều icon, icon1.png và icon2.png là icon nhỏ trong file ảnh icon.png.

Thông tin của từng file như sau:

• icon.png có dung lượng là 24 KB, 400×400
• icon1.png và icon2.png đều có kích thước 33×28, 32×29 và có dung lượng 18 và 19 KB

Tổng dung lượng 2 icon icon1 và icon2 là 37kb trong khi đó bức ảnh lớn là 24KB lại chứa rất nhiều icon dùng được cho nhiều vị trí. Hơn nữa trên cùng một trang mà có nhiều icon thì việc gom hết vào một ảnh và bạn sử dụng background-postion cho từng class css của icon là điều tốt nhất mà bạn nên sử dụng.

Chính vì thế mà cách này sử dụng khá là hiệu quả giúp website load tốt hơn và nhanh hơn, đặc biệt là đối với thiết bị truy cập bằng 3G như điện thoại, máy tính bảng, Dcom3G cho máy tính.

Cách làm của bài viết này là tổng hợp nhiều icon từ nhiều bức ảnh thành một bức ảnh và sử dụng thuộc tính background position của css để xác định vị trí từng icon hiển thị giúp giảm dung lượng tải trang và cũng như giảm số lượng icons sinh ra thành nhiều file ảnh.

background-image: url(ico_arrow.png);
background-repeat: no-repeat;
background-position: 0px 5px;
overflow: hidden;
height: 10px;
width: 10px;

Trong đó

• background-image: là gọi file icon ảnh png
• background-repeat: với giá trị là no-repeat thì không cho nó lặp lại 2 chiều
• background-position: với giá trị 0px là điều chỉnh vị trí theo chiều ngang sang trái hoặc sang phải và 5px là di chuyển theo chiều cao lên xuống, 2 giá trị này bạn có thể tự điều chỉnh sao cho phù hợp.
• overflow: giá trị là hidden nó sẽ chỉ hiển thị vùng kích thước theo giá trị chiều cao height và chiều rộng width.
• Height và width thì bạn cần xác định icon đó trong ảnh png có kích thước chiều cao và rộng bao nhiêu để bạn điền cho phù hợp.