Background-image w CSS czy img tag w HTML

I ten i ten element to bitmapa. Użytkowo – niczym się nie różnią, ale pierwsza jest osadzona w dokumencie jako background-image w CSS’ie a druga typowo – w firmie img tagu w dokumencie HTML. Która z nich ma impact na SEO? O tym w dzisiejszym materiale.

Różnica między CSS background-image a img tag HTML

Odpowiedź jest prosta – jedyny impact na SEO ma zwykła bitmapa osadzona w HTML’u w img tag. To do niej – w przeciwieństwie do bitmapy w formie backgroundu zaszytej w CSS możesz przypisać atrybut alt i title. Do niej w końcu możesz pozyskiwać linki i pozycjonować ją w wynikach organicznych i wyszukiwarce Google Grafika.

Indeksacja bitmap w Google Grafika

Z kolei bitmapy background w CSS są co prawda renderowane przez boty, ale nie mają wpływu na rankowanie strony w kodzie źródłowym, do której są przypisane i nie są eksponowane w wynikach wyszukiwania Google Grafika.

Ale ej! To też nie tak, że z bitmap w formie background’ów mielibyście nie korzystać, bo przecież to naturalny sposób na osadzanie teł, warstw na stronach.

Zdarza się jednak, że CSS jest nadużywany w kontekście osadzania bitmap na stronach internetowych – szczególnie przez początkujących deweloperów.

Background CSS może utrudniać dostęp do treści dla osób niedowidzących, ponieważ czytniki ekranowe ignorują zawartość background-image. Poza tym – przy odpowiednio dużej rozdzielczości, background-image może stać się obciążający i w kontekście wydajnościowym na urządzeniach mobilnych, jak i czasu ładowania zawartości. Co prawda istnieją sposoby, aby i z tym sobie poradzić, bo można pisać warunki wyświetlania konkretnych bitmap w CSS dla konkretnych maksymalnych rozdzielczości, co może wyglądać w ten sposób:

@media only screen and (max-width: 767px) {
body {
background-image: url(images/background-photo-mobile-devices.jpg);
}
}

ale generalnie upychanie wielu bitmap w CSS to kiepski pomysł, bo i tak to bitmapy w img tag HTML są szybciej kolejkowane i wyświetlane na stronie, bo nie wymagają wcześniejszego pobrania danych z CSS i parsowania.

Możecie przyjąć, że w dużym uproszczeniu – cała zawartość bitmap osadzonych w CSS nie ma nic wspólnego z semantyką dokumentu. Obrazy typu background-image powinny zawierać wobec tego tylko takie bitmapy, które nie są przedmiotem treści, contentem.

Tymczasem dzięki za uwagę, widzimy się niebawem w kolejnym materiale, mówił do Was Adrian Pakulski Paq, cześć.