Khái niệm về sprites đã xuất hiện được một thời gian. Đây là một trong những kỹ thuật được sử dụng phổ biến nhất trong ngành công nghiệp game để tăng tốc quá trình hiển thị hình ảnh động trên màn hình. Trong bài viết này, chúng tôi sẽ đặc biệt xem xét cách kỹ thuật này có thể giúp chúng tôi cải thiện trải nghiệm người dùng trên các trang web với sự trợ giúp của CSS Sprites theo thứ tự sau:
- Sprite là gì?
- CSS Sprite là gì - tổng quan nhanh?
- Ví dụ về cách nó giúp ích trong Phát triển Web?
- Ưu điểm của việc sử dụng CSS Sprites
- Nhà phát triển phải làm gì khi làm việc với CSS Sprites?
- Cách tạo CSS Sprite Sheet?
- Làm thế nào để làm việc với CSS Sprites?
- Các công ty sử dụng CSS Sprites
Sprite là gì?
Sprite là một hình ảnh duy nhất là một phần của cảnh lớn hơn trong trò chơi. Nhiều sprite sau đó được kết hợp thành một hình ảnh lớn gọi là sprite sheet. Sau khi một trang sprite được tải vào bộ nhớ, các sprite khác nhau được hiển thị liên tiếp nhanh chóng để tạo ra ảo ảnh về hoạt ảnh. Điều này được thực hiện đồng thời cho hàng chục đến hàng trăm sprite khác nhau để tạo ra một cảnh trong trò chơi.
Ý tưởng cơ bản là tải một hình ảnh và hiển thị một phần của hình ảnh ở bất cứ nơi nào được yêu cầu sẽ nhanh hơn nhiều so với việc tải nhiều hình ảnh và hiển thị chúng.
CSS Sprite là gì: Tổng quan nhanh?
CSS sprite là một kỹ thuật thường được các nhà phát triển web sử dụng để tối ưu hóa hiệu suất của các trang web. Trong kỹ thuật này, nhiều hình ảnh nhỏ hơn thường có cùng kích thước được kết hợp thành một hình ảnh lớn duy nhất được gọi là tờ sprite hoặc là bộ gạch . Trang tính sprite này sau đó được sử dụng để hiển thị các phần tử riêng lẻ ở bất cứ nơi nào chúng ta cần.
Thông thường, các yếu tố như biểu trưng, mũi tên điều hướng, các nút được bao gồm trong bảng viết vì chúng gần như có cùng kích thước và thường được sử dụng trong một trang web.
Ví dụ về cách nó giúp ích trong Phát triển Web?
Nói chung, trong khi thiết kế trang web, hình ảnh được lưu trữ và sử dụng dưới dạng các tệp riêng lẻ. Vì vậy, khi người dùng mở một trang web, trình duyệt phải thực hiện một yêu cầu HTTP cho từng tệp này, tải xuống riêng và hiển thị chúng. Điều này dẫn đến thời gian tải trang cao hơn vì một trang web cụ thể có thể có một số lượng lớn các hình ảnh nhỏ hơn như nút, biểu tượng, biểu trưng.
CSS sprites giúp các nhà phát triển kết hợp những hình ảnh nhỏ được sử dụng thường xuyên này thành một hình ảnh lớn. Sau đó, trình duyệt chỉ phải tải xuống một tệp mà sau đó được sử dụng đểhiển thị phần cần thiết bằng cách bù đắp hình ảnh.
Ưu điểm của việc sử dụng CSS Sprites
Có hai ưu điểm chính của việc sử dụng CSS sprite so với hình ảnh bình thường:
Tải trang nhanh hơn: Tăng thời gian tải trang vì hình ảnh được sử dụng trong trang web xuất hiện ngay sau khi trang tính được tải xuống.
Thông lượng lớn hơn và sử dụng tài nguyên thấp hơn: Kỹ thuật này không chỉ cải thiện trải nghiệm người dùng cuối bằng cách làm cho trang tải nhanh hơn,nhưng nó cũng làm giảm tắc nghẽn mạng khi số lượng yêu cầu HTTP được thực hiện thấp hơn.
Nhà phát triển phải làm gì khi làm việc với CSS Sprites?
Khi làm việc với các hình ảnh riêng lẻ, nhà phát triển có thể chỉ cần làm việc với thẻ HTML và định kiểu nó trong CSS nếu được yêu cầu. Nhưng khi làm việc với CSS Sprites, một nhà phát triển cần làm hai việc cụ thể:
- Tạo Sprite Sheet
Trong khi phát triển một trang web, nếu nhà phát triển quyết định sử dụng CSS sprites, thì trước tiên họ phải tạo sprite sheet bằng cách hợp nhất tất cả các yếu tố mong muốn như nút, logo, v.v. trong một mô hình giống như lưới. Điều này có thể được thực hiện bằng cách sử dụng bất kỳ chương trình chỉnh sửa hình ảnh nào như Photoshop hoặc Gimp. Ngoài ra còn có rất nhiều công cụ trực tuyến có sẵn giúp bạn tạo trang tính sprite. Những công cụ này sẽ được thảo luận sau trong bài viết này.
- Truy cập một phần tử cụ thể của sprite bằng cách sử dụng Vị trí nền CSS bất động sản
Khi trang tính đã sẵn sàng, nhà phát triển sau đó phải sử dụng các thuộc tính CSS để truy cập các phần khác nhau của trang tính.
- chiều rộng: Chiều rộng của sprite
- Chiều cao: Chiều cao của sprite
- lý lịch: Tham chiếu đến bảng sprite
- Nền-vị trí: Chênh lệch giá trị (tính bằng pixel) để chỉ truy cập phần bắt buộc của trang tính
Cách tạo CSS Sprite Sheet?
Bạn có thể sử dụng bất kỳ phần mềm chỉnh sửa hình ảnh nào để sắp xếp các hình ảnh nhỏ hơn của mình thành một lưới nhưng hai phương pháp dễ dàng hơn sẽ được thảo luận dưới đây:
1. Công cụ tạo trang tính Sprite trực tuyến
LIÊN KẾT: toptal.com/developers/css/sprite-generator/
Công cụ này không chỉ miễn phí để sử dụng mà còn cung cấp cho bạn mã CSS cần thiết để có thể được sử dụng trong khi tham chiếu trang tính. Ngoài ra, bạn có thể tìm hiểu các thuộc tính khác nhau như đệm giữa các phần tử và thay đổi căn chỉnh của chúng.
2. Tạo Sprite Sheet với Sprity
Nếu bạn đang sử dụng Grunt, Node hoặc Gulp, bạn có thể cài đặt một gói có tên Sprity, gói này sẽ giúp bạn tạo một sprite sheet ở nhiều định dạng như PNG, JPG, v.v.
Trước tiên, bạn sẽ cần cài đặt Sprity bằng:
npm cài đặt sprity -g
Sau đó, để tạo trang tính sprite, hãy sử dụng lệnh sau:
sprity ./output-directory/ ./input-directory/*.png
Làm thế nào để làm việc với CSS Sprites?
Trong ví dụ này, chúng tôi sẽ sử dụng bảng viết sau:
Như bạn có thể thấy trong hình trên, sáu biểu tượng (Instagram, Twitter và Facebook) đã được sắp xếp theo mô hình giống như lưới. Ở hàng đầu tiên, chúng ta có trạng thái bình thường và ở hàng thứ hai, chúng ta có trạng thái di chuột của chúng (hình ảnh xuất hiện khi chúng ta đưa con trỏ chuột vào chúng).
Nếu bạn tạo sprite sheet bằng các công cụ mà chúng tôi đã thảo luận ở trên thì bạn đã biết các hiệu số bắt buộc trong CSS nhưng nếu bạn sử dụng một số công cụ khác hoặc bạn chỉ được cung cấp một số sprite sheet thì đừng lo lắng, chúng ta sẽ thảo luận về một phương pháp sẽ giúp bạn nhận được sự bù đắp cho phần tử bắt buộc.
Bây giờ chúng ta hãy xem một cách rất đơn giản để có được các hiệu số bắt buộc cho từng biểu tượng trong số sáu biểu tượng bằng cách sử dụng MS Paint. Nó có thể không phải là giải pháp lý tưởng để làm việc với sprites nhưng vì nó có tính năng cung cấp tọa độ của con trỏ chuột, nó có thể được sử dụng để lấy tọa độ X và Y cần thiết.
Đầu tiên, mở hình ảnh trang tính sprite của bạn (lưới chứa tất cả các hình ảnh nhỏ hơn) và đưa con trỏ chuột lên góc trên cùng bên trái của hình ảnh mà bạn muốn lấy.
Khi bạn có tọa độ của điểm trên cùng bên trái của sprite (hình ảnh Instagram trên cùng bên trái), bạn có thể hiển thị sprite cụ thể này ở bất cứ nơi nào được yêu cầu bằng cách sử dụng mã CSS:
background: url ('img_sprites.png')
background-position: 0 0
chiều rộng: 125px
chiều cao: 125px
Chúng tôi đang sử dụng chiều rộng và chiều cao là 125 pixel vì các biểu tượng của chúng tôi có kích thước đó. Để tìm nạp hình ảnh tiếp theo (Twitter) trong cùng một hàng, chúng tôi sử dụng mã sau:
background: url ('img_sprites.png')
background-position: -128px 0px
chiều rộng: 125px
chiều cao: 125px
Lưu ý thuộc tính background-position trong đoạn mã trên. (-128px, 0) có nghĩa là chúng ta đang bù đắp trang tính của mình sang trái 128 pixel (tính đến phần đệm giữa các phần tử) và 0 pixel trên trục Y. Nếu chúng ta truy cập biểu tượng di chuột twitter thì thuộc tính background-position của chúng ta sẽ là:
background-position: -128px -128px
Bằng cách này, bây giờ chúng ta có thể truy cập từng thành phần của trang tính bằng cách sử dụng CSS. Hãy xem qua mã HTML và CSS hoàn chỉnh về cách thực hiện.
Bước 1: Viết mã HTML bắt buộc
Trong đoạn mã dưới đây, chúng tôi chỉ cần thêm ba liên kết. Ngoài ra, chúng tôi sẽ liên kết HTML của mình với biểu định kiểu (screen.css).
Bước 2: Viết CSS cần thiết. Đầu tiên, chúng tôi sẽ tạo kiểu cho lớp biểu tượng được chia sẻ của chúng tôi. Tại đây, bạn có thể thấy chúng tôi đang tham chiếu đến sprite sheet mà chúng tôi đã tạo.
/ * Biểu tượng dùng chung Lớp * /
span.icon đường dẫn,
span.icon a: đã thăm{
trưng bày:khối
thụt lề văn bản:-9999px
hình nền: url (./ img_sprites.png)
Bối cảnh Lặp lại:không lặp lại
}
jit trong java là gì
Bước 3: Lấy các biểu tượng riêng lẻ từ trang tính bằng cách sử dụng các hiệu số.
/ * Biểu tượng Instagram * /
span.instagram đường dẫn,
span.instagram a: đã thăm{
chiều rộng:125px
Chiều cao:125px
nền-vị trí:0 0
}
/ * Biểu tượng Twitter * /
span.twitter đường dẫn,
span.twitter a: đã thăm{
chiều rộng:125px
Chiều cao:125px
nền-vị trí:-128px 0
}
/ * Biểu tượng Facebook * /
span.facebook đường dẫn,
span.facebook a: đã thăm{
chiều rộng:125px
Chiều cao:125px
nền-vị trí:-257px 0
}
Bước 4: Lấy các biểu tượng di chuột từ trang tính bằng cách sử dụng các hiệu số.
span.instagram a: di chuột{nền-vị trí:0 -128px}
span.twitter a: di chuột{nền-vị trí:-128px -128px}
span.facebook a: di chuột{nền-vị trí:-255px -128px}
Các công ty sử dụng CSS Sprites
Nhiều tên tuổi lớn trong ngành sử dụng CSS Sprites để cải thiện khả năng phản hồi của trang web của họ. Các công ty như Google, Facebook, Amazon sử dụng rộng rãi phương pháp này vì điều này giúp họ giảm số lượng yêu cầu HTTP mỗi phiên cho một người dùng cụ thể. Đây là một lợi ích to lớn khi chúng tôi tính đến việc các công ty này phục vụ hàng triệu khách hàng tại bất kỳ thời điểm nào.
Bây giờ bạn đã nắm rõ CSS sprite là gì và cách làm việc với chúng, bạn đã tiến thêm một bước nữa trong hành trình học CSS. Các khái niệm như sprites là một yếu tố thay đổi cuộc chơi trong thời đại ngày nay vì nó đã trở nên cực kỳ quan trọng đối với các nhà phát triển khi trích xuất từng chút hiệu suất từ một trang web.
Kiểm tra của chúng tôi đi kèm với đào tạo trực tiếp do người hướng dẫn và trải nghiệm dự án thực tế. Khóa đào tạo này giúp bạn thành thạo các kỹ năng làm việc với công nghệ web back-end và front-end. Nó bao gồm đào tạo về Phát triển Web, jQuery, Angular, NodeJS, ExpressJS và MongoDB.
Có một câu hỏi cho chúng tôi? Vui lòng đề cập đến nó trong phần nhận xét của blog “Hình ảnh HTML” và chúng tôi sẽ liên hệ lại với bạn.