Khi nào nên sử dụng hình ảnh nền so với CSS?

Trong trường hợp nào thì thích hợp hơn để sử dụng IMGthẻ HTML để hiển thị hình ảnh, trái ngược với CSS background-imagevà ngược lại?

Các yếu tố có thể bao gồm khả năng truy cập, hỗ trợ trình duyệt, nội dung động hoặc bất kỳ loại giới hạn kỹ thuật hoặc nguyên tắc khả dụng nào.

Sử dụng đúng cách của IMG

1. Sử dụng IMGnếu bạn có ý định để mọi người in trang của bạn và bạn muốn hình ảnh được bao gồm theo mặc định. - JayTee
2. Sử dụng IMG(với altvăn bản) khi hình ảnh có ý nghĩa ngữ nghĩa quan trọng, chẳng hạn như biểu tượng cảnh báo . Điều này đảm bảo rằng ý nghĩa của hình ảnh có thể được truyền đạt trong tất cả các tác nhân người dùng, bao gồm cả trình đọc màn hình.

Sử dụng thực dụng của IMG

1. Sử dụng IMGthuộc tính cộng với alt nếu hình ảnh là một phần của nội dung, chẳng hạn như logo hoặc sơ đồ hoặc người (người thật, không phải người có ảnh chứng khoán). - sanchothefat
2. Sử dụng IMGnếu bạn dựa vào tỷ lệ trình duyệt để hiển thị hình ảnh theo tỷ lệ kích thước văn bản.
3. Sử dụng IMG cho nhiều hình ảnh lớp phủ trong IE6 .
4. Sử dụng IMGvới z-indexđể kéo dài hình nền để lấp đầy toàn bộ cửa sổ của nó.
   Lưu ý, điều này không còn đúng với kích thước nền CSS3; xem # 6 dưới đây.
5. Sử dụng imgthay vì background-imagecó thể cải thiện đáng kể hiệu suất của hình ảnh động trên nền.

Khi nào nên sử dụng hình nền CSS

1. Sử dụng hình nền CSS nếu hình ảnh không phải là một phần của nội dung . - sanchothefat
2. Sử dụng hình nền CSS khi thực hiện thay thế hình ảnh văn bản, vd. đoạn văn / tiêu đề. - sanchothefat
3. Sử dụng background-imagenếu bạn có ý định để mọi người in trang của bạn và bạn không muốn hình ảnh được bao gồm theo mặc định. - JayTee
4. Sử dụng background-imagenếu bạn cần cải thiện thời gian tải xuống, như với các họa tiết CSS .
5. Sử dụng background-imagenếu bạn chỉ cần một phần hình ảnh hiển thị, như với các họa tiết CSS.
6. Sử dụng background-imagevới background-size:coverđể kéo dài một hình nền để lấp đầy toàn bộ cửa sổ của nó.

Đó là một quyết định trắng đen đối với tôi. Nếu hình ảnh là một phần của nội dung như logo hoặc sơ đồ hoặc người (người thật, không phải người có ảnh chứng khoán) thì hãy sử dụng <img />thẻ cộng với thuộc tính alt. Đối với mọi thứ khác có hình nền CSS.

Lần khác để sử dụng hình nền CSS là khi thực hiện thay thế hình ảnh văn bản, vd. đoạn văn / tiêu đề.

Tôi ngạc nhiên không ai đề cập đến điều này: chuyển tiếp CSS .

Bạn có thể chuyển đổi divhình nền của một cách tự nhiên :

#some_div {
    background-image:url(image_1.jpg);
    -webkit-transition:background-image 0.5s;
    /* Other vendor-prefixed transition properties */
    transition:background-image 0.5s;
}

#some_div:hover {
    background-image:url(image_2.jpg);
}

Điều này tiết kiệm bất kỳ loại JavaScript hoặc jQuery hoạt hình mờ dần một <img/>'s src.

Thông tin thêm về chuyển đổi trên MDN .

Trên câu trả lời chỉ xem xét khía cạnh thiết kế. Tôi đang liệt kê nó trong các khía cạnh SEO.

Khi nào sử dụng <img />

1. Khi hình ảnh của bạn cần được lập chỉ mục bởi công cụ tìm kiếm
2. Nếu nó có liên quan đến nội dung không thiết kế.
3. Nếu hình ảnh của bạn không quá nhỏ (không phải hình ảnh mang tính biểu tượng).
4. Hình ảnh nơi bạn có thể thêm altvà titlethuộc tính.
5. Hình ảnh từ một trang web mà bạn muốn in bằng phương tiện in css

Khi nào nên sử dụng CSS background-image

1. Hình ảnh hoàn toàn được sử dụng để thiết kế.
2. Không liên quan với nội dung.
3. Hình ảnh nhỏ mà chúng ta có thể chơi với CSS3.
4. Lặp lại hình ảnh (Trong biểu tượng tác giả blog, biểu tượng ngày sẽ được lặp lại cho mỗi bài viết, v.v.).

Vì tôi sẽ sử dụng chúng dựa trên những lý do này. Đây là những thực hành tốt về Công cụ Tìm kiếm Tối ưu hóa hình ảnh.

Trình duyệt không phải lúc nào cũng được đặt để in ảnh nền theo mặc định; nếu bạn có ý định để mọi người in trang của bạn :)

Nếu bạn có CSS ​​của mình trong một tệp bên ngoài, thì sẽ rất thuận tiện để hiển thị một hình ảnh được sử dụng thường xuyên trên trang web (chẳng hạn như hình ảnh tiêu đề) làm hình nền, vì sau đó bạn có thể linh hoạt thay đổi hình ảnh sau này.

Ví dụ: giả sử bạn có HTML sau:

<div id="headerImage"></div>

... và CSS:

#headerImage {
    width: 200px;
    height: 100px;
    background: url(Images/headerImage.png) no-repeat;
}

Vài ngày sau, bạn thay đổi vị trí của hình ảnh. Tất cả bạn phải làm là cập nhật CSS:

#headerImage {
    width: 200px;
    height: 100px;
    background: url(../resources/images/headerImage.png) no-repeat;
}

Mặt khác, bạn phải cập nhật srcthuộc tính của <img>thẻ thích hợp trong mọi tệp HTML (giả sử bạn không sử dụng ngôn ngữ kịch bản phía máy chủ hoặc CMS để tự động hóa quy trình).

Ngoài ra hình ảnh nền cũng hữu ích nếu bạn không muốn người dùng có thể lưu hình ảnh (mặc dù tôi chưa bao giờ cần phải làm điều này).

Về giống như câu trả lời của sanchothefat , nhưng từ một khía cạnh khác. Tôi luôn tự hỏi: nếu tôi loại bỏ hoàn toàn các bảng định kiểu khỏi trang web, các yếu tố còn lại chỉ thuộc về nội dung? Nếu vậy, tôi đã làm tốt công việc của mình.

Một số câu trả lời vượt qua kịch bản ở đây. Đây là một tình huống đơn giản chết.

Chỉ cần trả lời câu hỏi này mỗi khi bạn muốn đặt một hình ảnh:

Đây là một phần của nội dung hay một phần của thiết kế?

Nếu bạn không thể trả lời câu hỏi này, có lẽ bạn không biết mình đang làm gì hoặc muốn làm gì!

Ngoài ra, KHÔNG xem xét bên cạnh hai kỹ thuật, chỉ vì bạn muốn "thân thiện với máy in" hay không. Ngoài ra KHÔNG ẩn nội dung khỏi quan điểm SEO với CSS. Nếu bạn thấy mình đang quản lý nội dung của mình trong các tệp CSS, bạn sẽ tự bắn vào chân mình. Đây chỉ là một quyết định tầm thường về nội dung hay không. Mọi khía cạnh khác nên được bỏ qua.

Tôi sẽ thêm hai đối số khác:

• Một thẻ img là tốt nếu bạn cần thay đổi kích thước hình ảnh. Ví dụ: nếu hình ảnh gốc là 100px x 100 px và bạn muốn nó là 80px x 80px, bạn có thể đặt chiều rộng và chiều cao CSS của thẻ img. Tôi không biết cách nào tốt để làm điều này bằng cách sử dụng hình nền. EDIT: Điều này bây giờ cũng có thể được thực hiện với hình nền, sử dụng background-sizethuộc tính CSS3.

• Sử dụng hình nền là tốt khi bạn cần phải tự động chuyển đổi giữa các họa tiết . Ví dụ: nếu bạn có một hình ảnh nút và bạn muốn một hình ảnh riêng biệt được hiển thị khi con trỏ di chuột qua phần tử, bạn có thể sử dụng một hình ảnh nền chứa cả các họa tiết bình thường và di chuột và thay đổi động vị trí nền.

Thêm một lợi ích nữa từ việc sử dụng thẻ <IMG> có liên quan đến SEO - tức là bạn có thể cung cấp thêm thông tin về hình ảnh trong thuộc tính ALT của thẻ hình ảnh, trong khi không có cách nào để cung cấp thông tin đó khi chỉ định hình ảnh thông qua CSS và trong đó trường hợp chỉ tên tệp hình ảnh có thể được lập chỉ mục bởi các công cụ tìm kiếm. Thuộc tính ALT chắc chắn mang lại lợi thế SEO thẻ <IMG> so với phương pháp CSS. Đó là lý do tại sao theo tôi, tốt hơn là chỉ định hình ảnh bạn muốn xếp hạng tốt trong kết quả tìm kiếm hình ảnh (ví dụ: Tìm kiếm hình ảnh của Google) bằng cách sử dụng thẻ <IMG>.

Tiền cảnh = img.

Nền = nền CSS.

Chỉ sử dụng hình nền khi cần thiết, ví dụ như các thùng chứa có hình ảnh đó.

Một trong những PROS chính bằng cách sử dụng IMAGES là nó tốt hơn cho SEO .

Sử dụng hình nền, bạn cần xác định rõ các kích thước. Đây có thể là một vấn đề quan trọng nếu bạn không thực sự biết trước về chúng hoặc không thể xác định chúng.

Một vấn đề lớn <img />là lớp phủ. Điều gì xảy ra nếu tôi muốn một bóng bên trong CSS trên hình ảnh của tôi ( box-shadow:inset 0 0 5px rgb(0,0,0,.5))? Trong trường hợp này, vì <img />không thể có các phần tử con, bạn cần sử dụng định vị và thêm các phần tử trống tương đương với đánh dấu vô dụng.

Tóm lại, nó khá tình huống.

Một vài tình huống khác background-imagenên được sử dụng:

• Khi bạn muốn hình ảnh thay đổi khi chuột được di chuột lên nó.
• Khi bạn muốn thêm các góc tròn cho hình ảnh. Nếu bạn sử dụng img, hình ảnh rò rỉ ra khỏi các góc tròn.

Sử dụng hình nền CSS trong trường hợp có nhiều giao diện hoặc phiên bản thiết kế. Javascript có thể được sử dụng để tự động thay đổi một lớp của một thành phần, điều này sẽ buộc nó phải hiển thị một hình ảnh khác. Với một thẻ IMG, nó có thể khó khăn hơn.

Đây là một xem xét kỹ thuật: hình ảnh sẽ được tạo ra một cách linh hoạt? Việc tạo <img>thẻ trong HTML có xu hướng dễ dàng hơn rất nhiều so với việc cố gắng chỉnh sửa động một thuộc tính CSS.

Kích thước của hình ảnh thì sao? Nếu tôi sử dụng thẻ img, trình duyệt sẽ chia tỷ lệ hình ảnh. Nếu tôi sử dụng nền css, trình duyệt chỉ cắt một đoạn từ hình ảnh lớn hơn.

Liên quan đến việc tạo hình ảnh động bằng CSS TranslateX / Y (Cách thích hợp để tạo hiệu ứng html) - Nếu bạn thực hiện bản ghi Dòng thời gian Chrome của hình ảnh nền CSS đang hoạt hình so với thẻ IMG đang hoạt hình, bạn sẽ thấy thời gian vẽ ngắn hơn đáng kể cho CSS hinh nên.

Có một lý do khác! Nếu bạn có thiết kế đáp ứng và muốn phân chia việc sử dụng hình ảnh độ phân giải thấp, trung bình và độ phân giải cao cho các thiết bị thông qua truy vấn phương tiện, bạn cũng nên sử dụng hình nền.

Ngoài ra, tôi có một phần thư viện có kích thước hình ảnh không nhất quán nên mặc dù những hình ảnh đó rõ ràng được coi là nội dung, tôi sử dụng hình nền và căn giữa chúng trong div với kích thước được đặt. Điều này tương tự như những gì facebook làm trong album của họ ..

img là một thẻ html vì một lý do, do đó nó nên được sử dụng. Để tham khảo hoặc để minh họa mọi thứ, mọi người, ví dụ: trong các bài viết.

Ngoài ra nếu hình ảnh có ý nghĩa hoặc phải có thể nhấp được thì img tốt hơn nền css . Đối với tất cả các tình huống khác, tôi nghĩ rằng, một nền css có thể được sử dụng.

Mặc dù, nó là một chủ đề cần được thảo luận nhiều lần.

Sinh viên web đến từ Paris, Pháp

Chỉ cần thêm một cái nhỏ, bạn nên sử dụng thẻ img nếu bạn muốn người dùng có thể 'nhấp chuột phải' và 'lưu ảnh' / 'lưu ảnh', vì vậy nếu bạn có ý định cung cấp hình ảnh làm tài nguyên cho khác.

Sử dụng hình nền sẽ (theo như tôi biết trên hầu hết các trình duyệt) sẽ vô hiệu hóa tùy chọn lưu ảnh trực tiếp.

Một đầu vào nhỏ, tôi đã gặp vấn đề với hình ảnh phản hồi làm chậm quá trình kết xuất trên iphone trong một phút, ngay cả với hình ảnh nhỏ:

<!-- Was super slow -->
<div class="stuff">
    <img src=".." width="100%" />
</div>

Nhưng khi chuyển sang sử dụng hình nền, vấn đề đã biến mất, điều này chỉ khả thi nếu nhắm mục tiêu các trình duyệt mới hơn.

IMGtải trước vì srcbản thân nó nằm trong tệp html trong khi trong trường hợp background-imagenguồn được đề cập trong biểu định kiểu để hình ảnh tải sau khi biểu định kiểu được tải, làm chậm quá trình tải trang web.

HTML dành cho nội dung và CSS dành cho thiết kế. Là hình ảnh cần thiết và nó có cần được chọn bởi các trình đọc màn hình không? Nếu câu trả lời là có, thì hãy đặt hình ảnh vào HTML. Nếu nó hoàn toàn là để tạo kiểu, thì bạn có thể sử dụng thuộc tính hình ảnh nền trong CSS để thêm hình ảnh. Giống như nhiều người ở đây đã đề cập, sau đó bạn có thể sử dụng một yếu tố giả trên hình ảnh nếu bạn muốn.

Cũng lưu ý rằng hầu hết các trình thu thập công cụ tìm kiếm không lập chỉ mục hình nền CSS, do đó, hình nền sẽ bị bỏ qua và bạn sẽ không thể nhận được bất kỳ lưu lượng truy cập nào từ các công cụ tìm kiếm (nói ngắn gọn là không có lợi ích SEO).

Khi tất cả các hình ảnh được xác định bằng thẻ được lập chỉ mục (trừ khi được loại trừ thủ công) và có thể mang lại lưu lượng truy cập từ các công cụ tìm kiếm nếu thuộc tính tiêu đề / tên và tên tệp của chúng được tối ưu hóa đúng cách (viết một số từ khóa).

Bạn có thể sử dụng thẻ IMG nếu bạn muốn hình ảnh ở dạng lỏng và tỷ lệ theo các kích thước màn hình khác nhau. Đối với tôi những hình ảnh này chủ yếu là một phần của nội dung. Đối với hầu hết các yếu tố không phải là một phần của nội dung, tôi sử dụng các họa tiết CSS để giữ kích thước tải xuống tối thiểu trừ khi tôi thực sự muốn làm động các biểu tượng, v.v.

Tôi sử dụng hình ảnh thay vì hình nền khi tôi muốn làm cho chúng có thể co giãn 100% được hỗ trợ trong hầu hết các trình duyệt.

Nếu bạn muốn chỉ thêm một hình ảnh cho nội dung đặc biệt trên trang hoặc chỉ cho một trang, bạn nên sử dụng thẻ IMG và nếu bạn muốn đặt hình ảnh trên nhiều trang thì bạn nên sử dụng CSS Background Image.

Một ảnh nền PRO khác: Ảnh nền cho <ul>/ <ol>danh sách.

Sử dụng hình nền nếu chúng là một phần của thiết kế tổng thể và được lặp lại trên nhiều trang. Tốt nhất là ở dạng sprite nền để tối ưu hóa.

Sử dụng thẻ cho tất cả các hình ảnh không phải là một phần của thiết kế tổng thể và rất có thể được đặt một lần, như hình ảnh cụ thể cho bài viết, con người và hình ảnh quan trọng đáng được thêm vào hình ảnh google.

** Hình ảnh lặp lại duy nhất mà tôi gửi kèm trong <img>thẻ là logo của trang web / công ty. Bởi vì mọi người có xu hướng nhấp vào nó để đi đến trang chủ, do đó bạn bọc nó bằng một <a>thẻ.