Sự khác biệt về hiệu suất giữa các yếu tố thẻ img so với div với hình nền?

Question

Có bất kỳ sự khác biệt nào về hiệu suất hoạt động hoặc tải/lưu bộ nhớ đệm khi hiển thị hình ảnh trong thẻ img và div với hình nền không?

dụ của tôi:

Tôi có một trang web với nhiều hình ảnh chồng chéo, một số trong đó tôi sẽ cần phải tải tự động với javascript. Một vấn đề là tôi cần phải neo các hình ảnh ở bên phải của phần tử, để tôi có thể thực hiện một hiệu ứng lau-to-right tốt đẹp. Bởi vì điều này tôi đã sử dụng một div với hình nền được đặt đúng vị trí. Không thể tìm ra cách để làm điều này với img nhưng kể từ divs đang làm việc cho tôi Tôi không biết nếu điều này sẽ quan trọng ...

Answer 1

AFAIK, bộ nhớ cache trình duyệt hình ảnh giống nhau cho dù họ đang ở trong một DIV hoặc một IMG Trong mọi trường hợp, tôi nghĩ đây là một trong những trường hợp mà hiệu suất cụ thể được định nghĩa là chi tiết triển khai bên trong từng công cụ hiển thị (và có thể các trình duyệt được xây dựng xung quanh chúng). Như vậy, nó nằm ngoài tầm kiểm soát của chúng tôi là nhà thiết kế/nhà phát triển và có thể thay đổi từ trình duyệt sang trình duyệt và phiên bản thành phiên bản. Nói cách khác, tôi sẽ không dành quá nhiều thời gian lo lắng về nó.

Answer 2

Sự khác biệt duy nhất tôi có thể quan niệm về điều này:

Bạn không thể chia tỷ lệ hình ảnh làm hình nền, mặc dù bạn có thể cho thẻ img. Điều này sẽ mở ra một kịch bản mà hình nền được tải nhanh hơn bởi vì nó buộc bạn phải có kích thước gốc chính xác như trái ngược với tải toàn bộ hình ảnh và mở rộng nó. Tuy nhiên, trò chuyện có thể đúng: vì bạn không quan tâm đến chất lượng hình ảnh quá nhiều, bạn có thể phân phối các hình ảnh nhỏ hơn đến trang của bạn và mở rộng chúng.

Tôi muốn kết hợp với mọi thứ được hiển thị rõ ràng hơn (và nhất quán hơn - IE/FF/Chrome/Safari/v.v.).

Answer 3

Sự khác biệt về kỹ thuật có, đáng chú ý nhất là bạn có thể đặt chiều rộng/chiều cao của thẻ IMG và nó sẽ kéo giãn hình ảnh, điều này có thể hữu ích trong một số trường hợp.

Điều chính bạn phải nhớ là bối cảnh của hình ảnh trong tài liệu HTML. Nếu hình ảnh là nội dung, hãy nói hình ảnh trong thư viện, tôi sẽ sử dụng thẻ IMG. Nếu nó chỉ là một phần của giao diện, tôi có thể sử dụng một div thay thế.

Answer 4

Sự khác biệt hiệu suất chính là sử dụng hình nền cho phép bạn sử dụng CSS sprites. Có một hình ảnh chứa một số lượng lớn hình ảnh từ trang của bạn có nghĩa là người dùng chỉ phải thực hiện một yêu cầu thay vì một hình ảnh cho mỗi hình ảnh.

Answer 5

Có sự khác biệt rất lớn. hiệu suất div bg là tốt hơn. nhưng bạn có thể đặt chiều rộng, chiều cao của thẻ img.

loại nào bạn nên sử dụng tùy thuộc vào tình huống của bạn.

Answer 6

Sự khác biệt khác là bố trí đáp ứng. Nếu bạn có một phần tử chỉ được hiển thị ở độ rộng màn hình nhất định (ví dụ, không phải trên điện thoại di động), nó sẽ vẫn tải hình ảnh nếu nó được chỉ định trong html (sử dụng display: none chẳng hạn), nhưng hầu hết tất cả các trình duyệt bây giờ sẽ KHÔNG tải hình ảnh nếu là hình nền được chỉ định trong các quy tắc truy vấn phương tiện truyền thông không được sử dụng CSS. Rất nhiều bố cục đáp ứng sớm đã bị chỉ trích vì họ vẫn sử dụng cùng một băng thông như các trang web có kích thước đầy đủ.

Nó cũng hữu ích với các thiết kế như vậy vì bạn có thể dễ dàng chỉ định các hình ảnh khác nhau cho các kích thước màn hình khác nhau. "Retina" hiển thị trên máy tính bảng và thậm chí cả máy tính xách tay bây giờ sẽ không nhìn tốt nhất của họ mà không có đồ họa 2x res. Vì vậy ... ngay cả khi bạn không làm những điều như vậy bây giờ, nó có lẽ là một thực hành tốt để có được thành, bởi vì bạn có thể thấy mình cần nó sớm!

Answer 7

Tôi nghĩ bằng cách sử dụng thuộc tính background-image trong div, bố cục trang được tải trước tiên và hình ảnh hiện diện trong các div được tải sau sau khi tải xong. do đó bằng cách sử dụng hình nền, bố cục html được tải nhanh hơn trên trình duyệt web.