Thực hành tốt có sử dụng gif động trong các hình ảnh css không?

Question

Tôi có một trang web có biểu tượng hoạt ảnh khi bạn di chuột qua chúng (khi không có, tôi chọn biểu tượng không hoạt ảnh vào hình ảnh), chúng ở dạng hoạt ảnh .gif và tại đây là:

Nhưng tôi nghĩ rằng có thể nó có thể làm cho trình duyệt kém hiệu quả. Tôi có thể đặt các biểu tượng hoạt hình trong một biểu tượng sprite và không hoạt hình trong một biểu tượng khác, nhưng điểm là gì? theo cách đó, sprites ngừng hữu ích. Bạn có đề nghị sử dụng một tập lệnh tạo hiệu ứng cho các biểu tượng được đặt trong sprite không? có lẽ? Đề xuất của bạn là gì? tôi cần một hiệu suất tốt của trình duyệt

Answer 1

Đừng đoán, kiểm tra! Nghiêm túc. Miễn là gif động có kích thước hợp lý, tôi nghi ngờ nó sẽ là một vấn đề lớn. Tuy nhiên, cách tốt nhất để tìm ra là thử nó. Hãy thử sử dụng Chrome hoặc Trình kiểm tra trang web của Safari để tải thời gian tải trang tiểu sử bằng các chiến lược khác nhau (không có hoạt ảnh, biểu tượng động trong một tệp riêng biệt, mọi thứ trong một hình ảnh) và xem hiệu suất nào tốt nhất. Nếu không có nhiều khác biệt, hãy chọn cách dễ nhất. Bạn luôn có thể thay đổi nó sau này nếu hiệu suất trở thành một vấn đề.

Answer 2

Hỗ trợ GIF động có mặt trong tất cả các trình duyệt chuyên ngành kể từ khi gần như bắt đầu của World Wide Web (www); 2 thập kỷ trước. Tôi sẽ rất ngạc nhiên nếu họ lo ngại về bất kỳ trích đoạn trình duyệt hiện đại nào cho những người không hỗ trợ đồ họa như Lynx.

Bạn có thể gặp sự cố với một số trình duyệt nếu tỷ lệ khung hình quá cao nhưng điều này rõ ràng không đúng với các biểu tượng mà bạn đang hiển thị cho chúng tôi.

Answer 3

Định dạng nén gif là một định dạng khó vì tất cả không gian trống không được xử lý giống như trong jpg hoặc png (bitwise). Tuy nhiên khi số lượng hình động tăng lên và số lượng màu tăng lên, định dạng gif sẽ bắt đầu bị phá vỡ. Những gì bạn cần làm là kiểm tra các kích thước riêng lẻ dựa vào kích thước của hình ảnh sprite. Hiệu suất di chuyển sprite không thực sự là vấn đề, nhưng như các câu trả lời khác đã nói bạn sẽ phải thử nghiệm nó với các trình duyệt và các yếu tố hình thức khác nhau.