Kiedy używać img vs. CSS background-image?

To dla mnie czarno-biała decyzja. Jeśli obraz jest częścią treści, takiej jak logo, diagram lub osoba (prawdziwa osoba, a nie ludzie ze zdjęć stockowych), użyj znacznika <img /> plus atrybut alt. Do wszystkiego innego są obrazy tła CSS.

Innym razem, aby użyć obrazów tła CSS jest podczas wykonywania image-zastąpienie tekstu np. akapity/nagłówki.

Dziwię się, że nikt jeszcze o tym nie wspomniał: CSS transitions .

Możesz natywnie zmienić obraz tła div:

#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);
}

Zapisuje każdy rodzaj animacji JavaScript lub jQuery, aby zniknąć <img/> ' S src.

Więcej informacji o przejściach na MDN.

Powyższe odpowiedzi uwzględniają jedynie aspekt projektowy . Wymieniam go w aspektach SEO.

Kiedy stosować <img />

1. Gdy Twoje zdjęcie musi być indeksowane przez wyszukiwarkę
2. jeśli ma związek z treścią, a nie z projektowaniem.
3. Jeśli obraz nie jest zbyt mały(nie ikoniczne obrazy).
4. obrazy, w których można dodać atrybut alt i title.
5. obrazy ze strony internetowej, które chcesz wydrukować za pomocą mediów drukujących css

Kiedy używać CSS background-image

1. obrazy wykorzystywane wyłącznie do projektowania.
2. Brak Związku Z Treścią.
3. małe obrazki, które możemy odtwarzać za pomocą CSS3.
4. powtarzające się obrazy (w ikonie autora bloga, ikona daty będzie powtarzana dla każdego artykułu itp.,).

Ponieważ będę ich używał na podstawie tych powodów. Są to dobre praktyki optymalizacji pod kątem wyszukiwarek Zdjęć.

Przeglądarki nie zawsze są domyślnie ustawione na drukowanie obrazów tła; jeśli chcesz, aby ludzie wydrukowali Twoją stronę:)

Jeśli masz swój CSS w zewnętrznym pliku, często wygodnie jest wyświetlać obraz, który jest często używany w witrynie (na przykład obraz nagłówka) jako obraz tła, ponieważ wtedy masz możliwość późniejszej zmiany obrazu.

Na przykład, powiedzmy, że masz następujący kod HTML:

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

...i CSS:

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

Kilka dni później zmieniasz lokalizację obrazu. Wszystko, co musisz zrobić, to zaktualizować CSS:

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

W Przeciwnym Razie musiałbyś zaktualizować atrybut src odpowiedniego znacznika <img> w każdym pliku HTML (zakładając, że nie używasz języka skryptowego po stronie serwera lub CMS do automatyzacji procesu).

Również obrazy tła są przydatne, jeśli nie chcesz, aby użytkownik mógł zapisać obraz (chociaż nigdy nie musiałem tego robić).

Mniej więcej tak samo jak ODPOWIEDŹ sanchothefata, ale z innego aspektu. Zawsze zadaję sobie pytanie: czy jeśli całkowicie usunę arkusze stylów ze strony, to czy pozostałe elementy Tylko należą do treści? Jeśli tak, to dobrze wykonałem swoją pracę.

Oto kilka odpowiedzi To bardzo prosta sytuacja.

Po prostu odpowiedz na to pytanie za każdym razem, gdy chcesz umieścić obrazek:

czy to część treści czy część projektu?

Jeśli nie możesz odpowiedzieć na to pytanie, prawdopodobnie nie wiesz, co robisz lub co chcesz zrobić!

ponadto, nie należy brać pod uwagę obok dwóch technik, tylko dlatego, że chcesz być "do druku" lub nie. Nie ukrywaj również treści z punktu widzenia SEO z CSS. Jeśli uda Ci się zarządzać zawartością w plikach CSS, strzelisz sobie w nogę. Jest to po prostu trywialna decyzja o tym, co jest treściwe, czy nie. Każdy inny aspekt powinien być ignorowany.

Dodałbym jeszcze dwa argumenty:

• Znacznik imgjest dobry, jeśli potrzebujesz zmienić rozmiar obrazu. Na przykład, jeśli oryginalny obraz ma wynosić 100px na 100 px i chcesz, aby był 80px na 80px, możesz ustawić szerokość i wysokość CSS tagu img. nie znam żadnego dobrego sposobu, aby to zrobić za pomocą obrazu tła. EDIT: teraz Można to również zrobić z obrazkiem tła, używając background-size atrybut CSS3.

• Za pomocą background-image jest dobry, gdy trzeba dynamicznie przełączać się między Sprite ' ami. Na przykład, jeśli masz obraz przycisku i chcesz, aby osobny obraz był wyświetlany, gdy kursor znajduje się nad elementem, możesz użyć obrazu tła zawierającego zarówno znaki zwykłe, jak i znaki najazdu i dynamicznie zmieniać pozycję tła.

Foreground = img.

Background = CSS background.

Używaj obrazów tła tylko wtedy, gdy jest to konieczne, np. kontenery z obrazem, który się kafelkuje.

Jedną z głównych zalet korzystania z obrazów jest to, że jest to lepsze dla SEO .

Używając obrazu tła, musisz bezwzględnie określić wymiary. Może to być poważny problem, jeśli nie znasz ich wcześniej lub nie możesz ich określić.

Dużym problemem z <img /> są nakładki. Co zrobić, jeśli chcę mieć wewnętrzny Cień CSS na moim obrazie (box-shadow:inset 0 0 5px rgb(0,0,0,.5))? W tym przypadku, ponieważ <img /> nie może mieć elementów potomnych, musisz użyć pozycjonowania i dodać puste elementy, co równa się bezużytecznym znacznikom.

Jeszcze jedna korzyść z używania znacznika związana jest z SEO - tzn. można podać dodatkowe informacje o obrazie w ATRYBUTIE ALT znacznika obrazu, podczas gdy nie ma możliwości podania takich informacji przy określaniu obrazu za pomocą CSS i w takim przypadku tylko nazwa pliku obrazu może być indeksowana przez wyszukiwarki. Atrybut ALT zdecydowanie daje przewagę SEO tagu nad podejściem CSS. Dlatego według mnie lepiej jest określić zdjęcia, które chcesz rangi dobrze w wynikach wyszukiwania obrazów (np. Google Image Search) za pomocą tagu .

Kilka innych scenariuszy, w których należy użyć background-image:

• Gdy chcesz, aby obraz zmienił się po najechaniu myszką na niego.
• gdy chcesz dodać zaokrąglone rogi do obrazu. Jeśli użyjesz img, obraz wycieka z zaokrąglonych narożników.

Użyj CSS background-image w przypadku wielu skórek lub wersji projektu. Javascript może być używany do dynamicznej zmiany klasy elementu, co zmusi go do renderowania innego obrazu. Z tagiem IMG może być trudniej.

Oto techniczna uwaga: czy obraz będzie generowany dynamicznie? Generowanie znacznika <img> W HTML jest o wiele łatwiejsze niż dynamiczna edycja właściwości CSS.

W odniesieniu do animowania obrazów za pomocą CSS TranslateX / Y(właściwy sposób animowania html) - jeśli wykonasz Chrome Timeline nagrywanie tła CSS - animowane obrazy vs animowane znaczniki IMG zobaczysz, że czasy malowania są drastycznie krótsze dla obrazów tła CSS.

Jest inny powód! Jeśli masz responsywny projekt i chcesz podzielić użycie obrazów o niskiej, średniej i wysokiej rozdzielczości dla urządzeń za pomocą zapytań multimedialnych, powinieneś również użyć tła.

A co z wielkością obrazu? Jeśli używam znacznika img, przeglądarka skaluje obraz. Jeśli używam tła css, przeglądarka po prostu wycina kawałek z większego obrazu.

Mam również sekcję galerii, która ma niespójne rozmiary zdjęć, więc nawet jeśli te obrazy są oczywiście uważane za treść, używam obrazów tła i wyśrodkowuję je w divach o ustawionym rozmiarze. Jest to podobne do tego, co facebook robi w swoich albumach..

Img jest znacznikiem html nie bez powodu, dlatego powinien być używany. Do odwoływania się lub ilustrowania rzeczy, ludzie np.: w artykułach.

Również jeśli obraz ma znaczenie lub musi być klikalny imgjest lepszy niż Tło css. Dla wszystkich innych sytuacji, myślę, że można użyć tła css .

Chociaż jest to temat, który wymaga dyskusji w kółko.

Web Student z Paryża, Francja

Tylko mały do dodania, powinieneś użyć tagu img, jeśli chcesz, aby użytkownicy mogli "kliknąć prawym przyciskiem myszy" i "Zapisz-obraz" / "Zapisz-obraz", więc jeśli zamierzasz dostarczyć obraz jako zasób dla innych.

Użycie obrazu w tle spowoduje (o ile wiem w większości przeglądarek) wyłączenie opcji bezpośredniego zapisywania obrazu.

Mały wkład, Miałem problemy z responsywnymi obrazami spowalniającymi renderowanie na iPhonie nawet na minutę, nawet przy małych obrazach:

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

Ale podczas przełączania na używanie obrazów tła problem zniknął, jest to możliwe tylko w przypadku kierowania na nowsze przeglądarki.

IMG załaduj najpierw, ponieważ src znajduje się w samym pliku html, podczas gdy w przypadku background-image źródło jest wymienione w arkuszu stylów, więc obraz ładuje się po załadowaniu arkusza stylów, opóźniając ładowanie strony internetowej.

HTML jest dla treści, a CSS dla projektowania. Czy obraz jest potrzebny i czy musi być odbierany przez czytniki ekranu? Jeśli odpowiedź brzmi tak, umieść obraz w HTML. Jeśli chodzi wyłącznie o stylizację, możesz użyć właściwości background-image w CSS, aby wstrzyknąć obraz. Tak jak wiele osób tutaj już wspomniało, możesz użyć pseudo elementu na obrazie, jeśli chcesz.

Należy również pamiętać, że większość pająków wyszukiwarek nie indeksuje obrazów tła CSS, dlatego obrazy tła będą ignorowane i nie będziesz w stanie uzyskać żadnego ruchu z wyszukiwarek (brak korzyści SEO w skrócie).

Gdzie jako Wszystkie obrazy zdefiniowane tagami są indeksowane (chyba że ręcznie wyłączone) i mogą przyciągnąć ruch z wyszukiwarek, jeśli ich atrybuty title / alt i nazwy plików są odpowiednio zoptymalizowane (w.R.T niektóre słowa kluczowe).

Możesz użyć znaczników IMG, jeśli chcesz, aby obrazy były płynne i skalowane do różnych rozmiarów ekranu. Dla mnie te obrazy są w większości częścią treści. W przypadku większości elementów, które nie są częścią zawartości, używam CSS sprites, aby utrzymać minimalny rozmiar pobierania, chyba że naprawdę chcę animować ikony itp.

Używam image zamiast background-image, gdy chcę, aby były w 100% rozciągliwe, co jest obsługiwane w większości przeglądarek.

Jeśli chcesz dodać obrazek tylko dla specjalnej zawartości na stronie lub tylko dla jednej strony, powinieneś użyć znacznika IMG, a jeśli chcesz umieścić obrazek na więcej niż jednej stronie, powinieneś użyć CSS Background Image.

Another background-image PRO: Background-images for <ul>/<ol> listy.

Użyj obrazów tła, jeśli są one częścią ogólnego projektu i są powtarzane na wielu stronach. Najlepiej w tle sprite formularz do optymalizacji.

Użyj znaczników dla wszystkich obrazów, które nie są częścią ogólnego projektu i są najprawdopodobniej umieszczone raz, jak konkretne obrazy dla artykułów, osób i ważnych obrazów, które zasługują na dodanie do google obrazy.

* * jedynym powtarzającym się obrazem, który załączam do znacznika <img> jest logo strony / firmy. Ponieważ ludzie mają tendencję do klikania go, aby przejść do strony głównej, więc owijasz go tagiem <a>.