<img /> so với hình nền (css) trong hiệu suất

Question

Tôi đang xây dựng trang web đang sử dụng plugin cuộn về cơ bản sẽ làm động việc cuộn. Tôi khá lo lắng về hiệu suất như thể tôi chèn một số hình ảnh vào trang web, có vẻ khá thay đổi khi cuộn/hoạt hình.

Vấn đề chính tôi có thể phát hiện bằng hình ảnh là vấn đề reflow/repaint, khi hình ảnh không có kích thước chính xác và do đó được chia tỷ lệ (tôi phải giải quyết vấn đề này, tôi biết về số best practice).

Với lưu ý này (hình ảnh sẽ được thu nhỏ). Điều gì sẽ tốt hơn, yếu tố hình ảnh hoặc divs với những hình ảnh làm nền cho hiệu suất?

Tôi đã thực hiện jsFiddles này trong công cụ bộ nhớ trình duyệt chrome của tôi, cho thấy tùy chọn hình ảnh nền mặt đất sử dụng ít bộ nhớ hơn.

<img />: http://jsfiddle.net/ek6Xn/

<img src="..." /> 

background-image: http://jsfiddle.net/ek6Xn/1/

<div></div> 

div { 
    background:url(...); 
    background-size:100% 100%; 
} 

Tài liệu tham khảo:

1. Difference in performance between img tag elements vs divs with background images?
2. When to use IMG vs. CSS background-image?
3. http://www.html5rocks.com/en/tutorials/speed/unnecessary-paints/
4. http://updates.html5rocks.com/2013/02/Profiling-Long-Paint-Times-with-DevTools-Continuous-Painting-Mode

Answer 1

Cá nhân tôi sẽ quên về hiệu suất trong trường hợp này và tập trung vào nội dung bức ảnh:

1) Image = nội dung

2) Nền Im age = design

Cách tôi có xu hướng nghĩ về điều này là, tôi có muốn hình ảnh xuất hiện trên tất cả các kích thước màn hình, trên tất cả các thiết bị, bật hoặc tắt CSS? Tôi muốn hình ảnh được "lập chỉ mục" bởi Google và Facebook. Nếu câu trả lời là có cho tất cả hoặc bất kỳ câu hỏi nào trong số này, thì thường là hình ảnh là "nội dung" và bạn nên sử dụng thẻ IMG.

Nếu bạn muốn một hình ảnh khác hiển thị ở các kích cỡ màn hình khác nhau (hoặc không có hình ảnh nào trên một số thiết bị) hoặc nếu bạn vui vì hình ảnh không xuất hiện trên bản in hoặc bạn đang hạnh phúc hình ảnh không xuất hiện nếu CSS bị tắt, sau đó thường là hình ảnh "thiết kế" và bạn nên sử dụng hình nền.