Kiedy stosować obraz tła IMG vs. CSS?

W jakich sytuacjach lepiej jest użyć IMGtagu HTML do wyświetlenia obrazu, zamiast CSS background-imagei odwrotnie?

Czynniki mogą obejmować dostępność, obsługę przeglądarki, zawartość dynamiczną lub wszelkiego rodzaju ograniczenia techniczne lub zasady użyteczności.

Właściwe wykorzystanie IMG

1. Użyj, IMGjeśli chcesz, aby ludzie wydrukowali twoją stronę i chcesz, aby obraz był domyślnie dołączany. - JayTee
2. Użyj IMG(z alttekstem), gdy obraz ma ważne znaczenie semantyczne, takie jak ikona ostrzeżenia . Zapewnia to, że znaczenie obrazu może być przekazywane we wszystkich klientach użytkownika, w tym czytnikach ekranu.

Pragmatyczne zastosowania IMG

1. Użyj IMGatrybutu plus alt, jeśli obraz jest częścią treści, na przykład logo lub diagramu lub osoby (prawdziwa osoba, a nie fotografia stockowa). - sanchothefat
2. Użyj, IMGjeśli polegasz na skalowaniu przeglądarki w celu renderowania obrazu proporcjonalnie do rozmiaru tekstu.
3. Użyj IMG dla wielu obrazów nakładki w IE6 .
4. Użyj IMGz z-index, aby rozciągnąć obraz tła i wypełnić całe okno.
   Uwaga: nie jest to już prawdą w przypadku rozmiaru tła CSS3; patrz # 6 poniżej.
5. Używanie imgzamiast background-imagemoże znacznie poprawić wydajność animacji na tle.

Kiedy stosować obraz tła CSS

1. Użyj obrazów tła CSS, jeśli obraz nie jest częścią zawartości . - sanchothefat
2. Używaj obrazów tła CSS podczas zastępowania obrazów tekstem, np. akapity / nagłówki. - sanchothefat
3. Użyj tej opcji, background-imagejeśli chcesz, aby ludzie drukowali twoją stronę i nie chcesz, aby obraz był domyślnie dołączany. - JayTee
4. Użyj, background-imagejeśli chcesz poprawić czasy pobierania, jak w przypadku duszków CSS .
5. Użyj, background-imagejeśli chcesz, aby widoczna była tylko część obrazu, jak w przypadku duszków CSS.
6. Użyj background-imagez background-size:cover, aby rozciągnąć obraz tła i wypełnić całe okno.

To dla mnie decyzja czarno-biała. Jeśli obraz jest częścią treści, na przykład logo lub diagramu lub osoby (prawdziwa osoba, a nie ludzie fotografii), użyj <img />atrybutu tag plus alt. Do wszystkiego innego należą obrazy tła CSS.

Innym czasem na użycie obrazów tła CSS jest zastąpienie obrazu tekstem, np. akapity / nagłówki.

Dziwi mnie, że nikt jeszcze o tym nie wspominał: przejścia CSS .

Możesz natywnie przenieść divobraz tła:

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

Oszczędza to wszelkiego rodzaju JavaScript lub jQuery animacji zanikać an <img/>„s src.

Więcej informacji o przejściach w MDN .

Powyższe odpowiedzi dotyczą wyłącznie aspektu projektowego. Wymieniam to w aspektach SEO.

Kiedy użyć <img />

1. Kiedy obraz musi zostać zaindeksowany przez wyszukiwarkę
2. Jeśli ma związek z treścią, nie do projektowania.
3. Jeśli twój obraz nie jest zbyt mały (nie jest ikoniczny).
4. Obrazy, do których możesz dodać alti titleprzypisać.
5. Obrazy ze strony internetowej, którą chcesz wydrukować za pomocą nośnika wydruku css

Kiedy stosować CSS background-image

1. Obrazy używane wyłącznie do projektowania.
2. Brak związku z treścią.
3. Małe obrazy, które możemy odtwarzać za pomocą CSS3.
4. Powtarzanie obrazów (w ikonie autora bloga ikona daty będzie powtarzana dla każdego artykułu itp.).

Ponieważ wykorzystam je na podstawie tych powodów. Są to dobre praktyki optymalizacji pod kątem wyszukiwarek obrazów.

Przeglądarki nie zawsze są ustawione do domyślnego drukowania obrazów tła; jeśli chcesz, aby ludzie wydrukowali twoją stronę :)

Jeśli masz CSS w pliku zewnętrznym, często wygodnie jest wyświetlić obraz, który jest często używany w całej witrynie (np. Obraz nagłówka) jako obraz tła, ponieważ wtedy możesz elastycznie zmienić obraz później.

Załóżmy na przykład, ż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 zmienisz 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 będziesz musiał zaktualizować srcatrybut odpowiedniego <img>znacznika 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ź sanchothefat , ale z innego aspektu. Zawsze zadaję sobie pytanie: jeśli całkowicie usunę arkusze stylów ze strony internetowej, czy pozostałe elementy należą tylko do treści? Jeśli tak, dobrze wykonałem swoją pracę.

Niektóre odpowiedzi komplikują tutaj scenariusz. To bardzo prosta sytuacja.

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

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

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

Ponadto NIE rozważaj obok dwóch technik tylko dlatego, że chcesz być „przyjazny dla drukarki”, czy nie. NIE ukrywaj także treści z punktu widzenia SEO za pomocą CSS. Jeśli znajdziesz zarządzanie plikami w plikach CSS, zastrzeliłeś się w nogę. To tylko trywialna decyzja co do treści, czy nie. Każdy inny aspekt należy zignorować.

Dodałbym jeszcze dwa argumenty:

• Img tag jest dobre, jeśli chcesz zmienić rozmiar obrazu. Np. Jeśli oryginalny obraz ma wymiary 100 na 100 pikseli, a chcesz, aby miał wymiary 80 na 80 pikseli, możesz ustawić szerokość i wysokość CSS znacznika img. Nie znam żadnego dobrego sposobu na zrobienie tego za pomocą obrazu tła. EDYCJA: Można to teraz zrobić również za pomocą obrazu tła, używając background-sizeatrybutu CSS3.

• Używanie obrazu tła jest dobre, gdy trzeba dynamicznie przełączać między duszkami . Na przykład, jeśli masz obraz przycisku i chcesz wyświetlić osobny obraz, gdy kursor unosi się nad elementem, możesz użyć obrazu tła zawierającego zarówno sprite normalne, jak i najechanie kursorem, i dynamicznie zmieniać pozycję tła.

Jeszcze jedna korzyść ze stosowania znacznika <IMG> wiąże się z SEO - tzn. Możesz podać dodatkowe informacje o obrazie w atrybucie ALT znacznika obrazu, podczas gdy nie ma sposobu na podanie takich informacji przy określaniu obrazu za pomocą CSS iw tym przypadek tylko nazwa pliku obrazu może być indeksowana przez wyszukiwarki. Atrybut ALT zdecydowanie daje przewagę SEO tagu <IMG> nad podejściem CSS. Dlatego według mnie lepiej jest określić obrazy, które chcesz dobrze pozycjonować w wynikach wyszukiwania obrazów (np. Google Image Search) za pomocą znacznika <IMG>.

Pierwszy plan = rys.

Tło = tło CSS.

Używaj obrazów tła tylko wtedy, gdy jest to konieczne, np. Pojemników z obrazem, który sąsiadująco.

Jednym z głównych PROSÓW przy użyciu OBRAZÓW jest to, że lepiej dla SEO .

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

Dużym problemem <img />są nakładki. Co jeśli chcę 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 jest równoznaczne z bezużytecznym znacznikiem.

Podsumowując, jest to dość sytuacyjne.

Kilka innych scenariuszy, w których background-imagenależy zastosować:

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

Użyj obrazu tła CSS w przypadku wielu skórek lub wersji projektu. Za pomocą Javascript można dynamicznie zmieniać klasę elementu, co zmusi go do renderowania innego obrazu. Z tagiem IMG może być trudniejsze.

Oto techniczna uwaga: czy obraz zostanie wygenerowany dynamicznie? Generowanie <img>tagu w HTML jest znacznie łatwiejsze niż dynamiczna edycja właściwości CSS.

Co z rozmiarem obrazu? Jeśli użyję tagu img, przeglądarka skaluje obraz. Jeśli używam tła css, przeglądarka po prostu wycina fragment większego obrazu.

W odniesieniu do animowania obrazów przy użyciu CSS TranslateX / Y (właściwy sposób na animację HTML) - Jeśli wykonasz nagranie na osi czasu Chrome animowanych obrazów tła CSS w porównaniu do animowanych tagów IMG, zobaczysz, że czasy malowania są znacznie krótsze dla CSS obrazy tła.

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

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

img jest z jakiegoś powodu tagiem HTML, dlatego należy go użyć. Do odsyłania lub ilustrowania rzeczy ludzie np .: w artykułach.

Także wtedy, gdy obraz ma znaczenia czy ma być klikalny img jest lepszy niż tło css . Myślę, że dla wszystkich innych sytuacji można użyć tła css .

Chociaż jest to temat, który należy omawiać w kółko.

Web Student z Paryża, Francja

Wystarczy dodać, że powinieneś użyć znacznika img, jeśli chcesz, aby użytkownicy mogli „kliknąć prawym przyciskiem” i „zapisz obraz” / „zapisz obraz”, więc jeśli zamierzasz udostępnić obraz jako zasób inni

Używanie obrazu tła spowoduje (o ile wiem w większości przeglądarek) opcję bezpośredniego zapisania obrazu.

Mały wkład, miałem problemy z responsywnymi obrazami spowalniającymi renderowanie na iPhonie do minuty, nawet przy małych obrazach:

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

Ale po przejściu na używanie obrazów tła problem zniknął, jest to opłacalne tylko w przypadku kierowania na nowsze przeglądarki.

IMGładuj najpierw, ponieważ srcznajduje się w samym pliku HTML, podczas gdy w przypadku background-imageźródła jest on wymieniony w arkuszu stylów, więc obraz ładuje się po załadowaniu arkusza stylów, co opóźnia ładowanie strony internetowej.

HTML służy do treści, a CSS do projektowania. Czy obraz jest konieczny i czy musi go odebrać czytnik ekranu? Jeśli odpowiedź brzmi „tak”, umieść obraz w kodzie HTML. Jeśli jest to wyłącznie stylizacja, 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ć pseudoelementu na obrazie, jeśli chcesz.

Zauważ też, ż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ć ruchu z wyszukiwarek (w skrócie brak korzyści SEO).

Gdzie jak wszystkie obrazy zdefiniowane za pomocą tagów są indeksowane (chyba że ręcznie wykluczone) i mogą przyciągać ruch z wyszukiwarek, jeśli ich atrybuty tytuł / alt i nazwy plików są odpowiednio zoptymalizowane (napisać jakieś słowo kluczowe).

Możesz użyć tagó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 ikonek CSS, aby utrzymać minimalny rozmiar pobierania, chyba że naprawdę chcę animować ikony itp.

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

Jeśli chcesz dodać obraz tylko do specjalnej zawartości na stronie lub tylko do jednej strony, powinieneś użyć znacznika IMG, a jeśli chcesz umieścić obraz na więcej niż jednej stronie, powinieneś użyć obrazu tła CSS.

Kolejny obraz tła PRO: Obrazy tła dla <ul>/ <ol>list.

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

Użyj tagów dla wszystkich obrazów, które nie są częścią ogólnego projektu i najprawdopodobniej zostaną umieszczone raz, jak na przykład określone obrazy artykułów, osób i ważnych obrazów, które zasługują na dodanie do obrazów Google.

** Jedynym powtarzającym się obrazem, który dołączam do <img>tagu, jest logo witryny / firmy. Ponieważ ludzie zwykle klikają go, aby przejść do strony głównej, dlatego otacza się go <a>tagiem.