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

777

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.

PAUZA systemu
źródło
Czy potrzebujesz obrazu, aby zająć miejsce, czy chcesz nad nim napisać?
geowa4
9
Jako aktualizacja, ponieważ zajmuje to dość wysoką pozycję w Google, skalowanie przeglądarki i rozciąganie obrazu dla tła-obrazu jest teraz możliwe i dość szeroko obsługiwane (IE8 i poniżej, oczywiście, wyjątkiem), renderując pozycje 4 i 7 w przypadkach które mogą pozwolić na awarię lub zignorowanie takiego efektu dla IE8 i niższych. caniuse.com/#search=background-image
Shauna
świetny i przydatny post, dodam pytanie do porównania, zaletą css są również efekty hover? czy można to powielić za pomocą tagów img?
ericosg
Ogólnie dodaję zarówno atrybut alt, jak i atrybut title do wszystkich obrazów treści. Czy to nie jest lepsze?
HartleySan
2
Również img może mieć mapę z klikalnymi obszarami i wskazówkami
Vitim.us

Odpowiedzi:

796

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.
system PAUZA
źródło
3
Nadal jestem niepewny obrazów tła dla części zastępującej tekst. Widzę ludzi używających obrazów tła, a następnie wcięcia tekstu: -9999px dla tekstu. Wiem jednak, że takie wcięcia tekstowe były złe dla SEO i wyobrażam sobie, że nadal musi tak być w przypadku niektórych wyszukiwarek. Ale co najważniejsze, jeśli wyłączysz obrazy, ale pozostawisz css na obrazie, zniknie, ale tekst nadal będzie poza ekranem. Jeśli o mnie chodzi, tekst alternatywny na obrazie jest przeznaczony, jeśli obrazy nie są wyświetlane, więc tagi img są lepsze.
Scott Reed,
53
Pragmatyczne wykorzystanie obrazu tła : Gdy nie chcesz stracić włosów z powodu problemów z centrowaniem w pionie (obrazów o różnych rozmiarach w pionie);)
Frank Nocke
12
Tak, problemy z centrowaniem w pionie - uruchom Flexbox!
Dean_Wilson,
3
@BinaryFunt - <div class="my-css-page-styles" style="background-image:url(blah.png);"></div>W ten sposób możesz stylizować go w arkuszu stylów CSS, ale jeśli obraz tła jest bardziej kwestią treści niż stylu, nadal edytujesz go od strony HTML.
Jimbo Jonny
2
Wydaje się, że w punkcie 5 pragmatycznych zastosowań IMG znajduje się clickbait - wskazujący na japoński wpis na blogu o kosmetykach. link to www.ajaxline.com/browsers-performance-in-dependence-of-html-coding [NIE KLIKNIJ TEGO]
wick3d
292

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.

roborourke
źródło
Doskonała walizka! CON - Użyj obrazu tła podczas zastępowania obrazu tekstem.
system PAUZA
2
To słuszna kwestia, ale z pewnością zastąpienie tekstu tekstem (np. Nagłówka) wymagałoby dodania „alt”, aby czytniki ekranu mogły go przeczytać? Lub jeśli obrazy nie są wyświetlane, nadal masz nagłówek? Tak, nagłówek i styl będą lepsze, ale na pewno chcesz tekst?
Theo Scholiadis,
4
@TheoScholiadis używanie zastępowania obrazu nie oznacza używania obrazu zamiast tekstu, ale ukrywanie tekstu w jakiś sposób za pomocą CSS i dostarczanie obrazu jako tła za pomocą CSS. Dokument pozostaje semantycznie nietknięty.
roborourke,
57
Osobiście nienawidzę, gdy nie mogę skopiować „tekstu”, ponieważ w rzeczywistości jest to obraz. Nazywaj mnie leniwym, ale hej ...
Shaz,
1
Jeśli potrzebujesz obrazu do celów SEO, użyj tagu img z atrybutem alt. W przeciwnym razie użyj obrazu w tle za pomocą css.
Super Model
107

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 .

Robbie JW
źródło
3
To nie jest dobry powód. Można mieć div z 2 nakładka obrazy i następujące CSS #some_div { transition: opacity 0.5s; }, #some_div:hover #top_img { opacity: 0; }
warkentien2
5
Jeśli przeczytasz ten połączony artykuł MDN (lub specyfikacje w3c), przekonasz się, że obraz w tle NIE jest jedną z animowalnych właściwości, a każda przeglądarka, która to robi (chrome), nie spełnia standardów internetowych. To powiedziawszy, myślę, że powinno być, i jest to przyjemny łatwy efekt, więc jestem rozczarowany, że nie jest to część standardu.
Robert McKee
73

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.

subhash
źródło
54

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

JayTee
źródło
9
Brzmi jak: PRO - Użyj IMG, jeśli chcesz, aby obraz był drukowany domyślnie. CON - Użyj obrazu tła, jeśli nie chcesz, aby obraz był drukowany domyślnie. Niezłe!
system PAUZA
7
Myślę, że chodzi o oddzielne style CSS przeznaczone tylko do wydruku, które ukrywają obrazy lub zmieniają je na coś bardziej odpowiedniego.
Blazemonger
52

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ć).

Steve Harrison
źródło
14
Obrazy tła można z pewnością zapisać przy minimalnym spelunkowaniu źródła widoku, po prostu nie tak łatwo, jak kliknięcie obrazu prawym przyciskiem myszy.
Michael Hackner,
2
Firefox Kliknij prawym przyciskiem myszy. „Wyświetl obraz tła”. Nie takie trudne.
TRiG
1
@TRiG O ile nie ma przezroczystej nakładki lub specyficznej dla strony modyfikacji menu kontekstowego, aby ci to uniemożliwić. Widziałem to już wcześniej i moim zdaniem jest to dość głupie, ponieważ nie musisz nawet spelunkować w źródle, jeśli strona jest w pełni załadowana, to w przeglądarce Firefox przynajmniej możesz kliknąć Narzędzia> Informacje o stronie / alt + t, i / kliknij prawym przyciskiem myszy i wybierz Wyświetl informacje o stronie, przejdź do sekcji Media i zapisz wszystkie żądane elementy z listy. Oczywiście istnieją sposoby, aby temu zapobiec, np. Osadzanie obrazu w pliku Flash lub inne dziwne sztuczki, ale nawet te można pominąć lub uwzględnić.
JAB
Myślę, że technika tło nie jest dość dobry dla odmowy użytkownikowi zapisać obraz ...
ncubica
45

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ę.

viam0Zah
źródło
42

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ć.

Dyin
źródło
Podoba mi się ta odpowiedź. To jest bardzo jasne. Pozostałe kwestie, takie jak łatwość drukowania lub SEO, należy rozpatrywać indywidualnie w każdym scenariuszu.
Juan Herrera
28

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.

Anders Rabo Thorbeck
źródło
2
To naprawdę dobra odpowiedź, szczególnie punkt zmiany rozmiaru. Ludzie będą argumentować, że możesz użyć tła, ale jeśli próbujesz obsługiwać stare przeglądarki, niekoniecznie jest to najlepsza droga.
dudewad
1
Tak to się robi w CSSbackground-size: 80px 80px;
Kareem,
2
Dziękuję @Kareem. Widzę, że wprowadzono to w CSS3, który jeszcze nie istniał, kiedy pierwotnie odpowiedziałem. Zredagowałem swoją odpowiedź, aby to odzwierciedlić.
Anders Rabo Thorbeck,
Myślę, że ważne jest, aby pamiętać, że zmiana rozmiaru zdjęć może być trudna pod względem pikselizacji lub interpolacji. Gdy jest to możliwe, nie zmieniam rozmiaru o więcej niż 40% (a to jest odcinek - 20% to standard) bez przeniesienia twojego obrazu do oprogramowania do obróbki zdjęć, aby odpowiednio zmienić rozmiar bez utraty jakości. Jakość DPI może być tutaj ważna, jeśli nie ma wystarczającej ilości informacji, aby rozciągnąć i wypełnić przydzieloną liczbę pikseli.
Dale Landry
18

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>.

Pavel Vladov
źródło
obrazy tła Wartości ALT można zdefiniować w mapie witryny. google.com/schemas/sitemap-image/1.1
Kareem
17

Pierwszy plan = rys.

Tło = tło CSS.

cjk
źródło
5
Jasne, ale co z małym wskaźnikiem strzałki w dół obok przycisku „menu” lub innymi podobnymi elementami? Jak klasyfikujesz ten pierwszy plan lub tło?
dudewad
@dudewad Powiedziałbym, że są na pierwszym planie, ponieważ (wizualnie) znajdują się w „górnej” warstwie strony, nałożone na inne elementy.
jkdev
14

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 .

Marc Uberstein
źródło
3
Prawdopodobnie dlatego, że możesz użyć atrybutu alt.
David
4
Czy to nie zależy od tego, czy CHCESZ SEO dla tego konkretnego obrazu? Nie rozumiem, dlaczego wybrałeś SEO na obrazie, który jest częścią stylizacji strony, a nie na treści (np. Ikona e-maila na twojej stronie kontaktowej). Więc właściwie wolę odwrócić twoje oświadczenie. Używaj OBRAZÓW tylko wtedy, gdy jest to konieczne (związane z treścią, drukowaniem i / lub SEO).
Volzy
12

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.

Mat
źródło
11

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.
Behrang
źródło
Możesz faktycznie:img { border-radius: 10px; }
Rafff
@RafcioKowalsky masz rację. Nie pamiętam dokładnych warunków, w których border-radiusnie działało.
Behrang Saeedzadeh
10

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.

MK_Dev
źródło
możesz także dynamicznie zmieniać atrybut src tagu obrazu, tak samo proste jak zmiana klasy
roborourke
3
@sanchothefat, prawda, jednak w tym przypadku źródło obrazu musiałoby być przechowywane w JS zamiast CSS. Plik css IMO byłby bardziej odpowiedni do zachowania nazwy pliku.
MK_Dev
7

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

Bryan M.
źródło
1
A co ze stylami wbudowanymi? To pytanie naprawdę nie może zostać rozstrzygnięte na podstawie tego pomysłu.
viam0Zah
może powinienem sformułować to w ten sposób: wolisz pracować z elementem DOM lub atrybutem elementu?
Bryan M.,
prawdopodobnie warto rozważyć bacl w '09, ale w jQuery nie jest to problem. Jeszcze łatwiejsze i płynniejsze jest przełączanie css lub klas na elemencie, niż przełączanie elementów.
dfherr
7

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.


źródło
7

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.

eivers88
źródło
7

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.

Maarten
źródło
1
Maarten, Terscheling nie jest zsynchronizowany Słyszałem od Vincenta Willema. Jak myślisz, jak to może działać na PyMol
Mehdi
1
Proszę zapoznać się z dokumentacją dotyczącą tego, jak rurkowate jest to pieterpeitshoeve.nl/rondleiding
Maarten
@ Maarteen, myślę, że teraz można to zrobić za pomocą HTML 5 tagów obrazu i źródła
Tick20
6

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 ..

Chris
źródło
6

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

użytkowników589956
źródło
5

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.

dougajmcdonald
źródło
5

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.

zimy
źródło
Czy masz jakieś poparcie lub wyjaśnienie tego zachowania?
Todd
Przepraszam, nie mam pojęcia, dlaczego spowolniłoby stronę do indeksowania ... może ponowne przepływy w przeglądarce na iPhonie mają bardzo mało zasobów.
zimy
4

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.

Sagi_Avinash_Varma
źródło
Ponadto niektóre przeglądarki (np. Firefox 35) wydają się odświeżać CSS background-imagepo pewnym czasie: jeśli masz kilka otwartych kart, po powrocie do karty po pewnym czasie tło CSS jest przez chwilę puste.
Skippy le Grand Gourou
3

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.

Carltonstith
źródło
3

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).

Nadeem Khan
źródło
2

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.

Shingokko
źródło
2

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.

max
źródło
2

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.

Vishal Gupta
źródło
2

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.

Gilly
źródło