W zasadzie szybka reguła jest bardzo prosta. Jeżeli "obrazek" ma znaczenie w treści strony jako obrazek, tj. na przykład wyświetlasz zdjęcie, to używaj tagu <img />.
Jeżeli jest to jedynie ozdobnik, to raczej staraj się oddzielić rzeczy, które mają związek li tylko z formatowaniem, od zawartości która ma znaczenie - wypchnij więc obrazek do atrybutu background-image w CSS. Zdarzają się wyjątki, typowym jest np. obrazek - ikonka wewnątrz tagu <a /> - ale to już rób według własnego wyczucia którego z pewnością z czasem nabierzesz.
Tak naprawdę w pliku HTML/XHTML w idealnym przypadku nie powinno być ani grama kodu odpowiadającego za formatowanie. Od tego jest CSS. Z tego powodu np. używa się tagów <strong></strong> i <em></em> zamiast <b></b> i <i></i> - ponieważ one niosą ze sobą pewnie znaczenie, semantykę, podczas gdy bold i italic to jedynie informacje wizualne. Z tego samego też powodu odchodzi się od rozmieszczania bloków na stronie za pomocą tabel - ponieważ tabela ma znaczenie "zawieram dane tabelaryczne" a nie "układam wizualnie tekst na stronie". Z tego powodu używa się znaczników <h1></h1> itp., zamiast <b><font></font></b> - ponieważ mają znaczenie "nagłówek" a nie "pogrub i powiększ czcionkę". I tak dalej.
Google Ci za to wszystko podziękuje lepszym zindeksowaniem strony i łatwiejszym pozycjonowaniem, osoby korzystające np. z czytników tekstu dla niewidomych nie będą zasypywane informacjami które nie są treścią, no i jest jeszcze zawsze satysfakcja z bycia w zgodzie ze standardami i best practices.
Jak chcesz więcej poczytać na ten temat, to zajrzyj na stronę Wikipedii, albo poszukaj w google pod hasłem semantic html.
