Czy lepiej jest definiować obrazy w bezpośrednim html lub css?

Gdybym miał wybór, aby wstawić obrazy bezpośrednio do html lub css, powiedzmy na przykład związek owinięty w obrazie mogłem zrobić albo ...Czy lepiej jest definiować obrazy w bezpośrednim html lub css?

<a href="#"><img src="#" alt="" width="" height="" /></a>

Albo mogłem zrobić ...

<a id="img" href="#"></a> 

#img {background: url('#') no-repeat; height: #; width: #;}

Co jest lepsze i dlaczego? Oba działają tak, jak chciał, ale czy jest jakaś różnica w czasie ładowania itp., Czy jakakolwiek uważana za lepszą praktykę?

Źródło

2011-10-06 pv1

Używanie obrazków w HTML jest lepsze, gdy obraz ma jakiekolwiek znaczenie kontekstowe ... jeśli jest to obrazek dekoracyjny bez znaczenia kontekstowego, użyj CSS. CSS służy do prezentacji, HTML do treści.

Najlepszą wskazówką, aby określić, czy używać HTML lub CSS dla obrazu jest: Jeśli usunę zdjęcie, zostanie zawartość strona internetowa wciąż ma sens?

Obraz w formacie HTML ma zapewniać wizualne znaczenie w kontekście, z wyraźnym odrzuceniem tekstu. Należy unikać używania elementu A bez żadnych treści, ponieważ jego treść będzie miała związek z linkiem, dla przeglądarek i robotów sieciowych (np. Bota Google).

użyć CSS zdjęć tylko w celach dekoracyjnych. W przeciwnym razie może uszkodzić rankingi w wyszukiwarkach. Zawsze podawaj atrybut atrybutu alt, aby określić, co będzie wyobrażać sobie, że ewentualny odwiedzający nie może zobaczyć żadnych obrazów.

Źródło

2011-10-06 18:42:00

@JohnKurlak Jeszcze lepiej, jakie są widoki Google? W dzisiejszych czasach wykrywają i penalizują ukryty tekst: http://www.google.com/support/webmasters/bin/answer.py?answer=66353 –

@Doozer Dobrze, w dzisiejszych czasach lepiej unikać tych hacków. Jeśli nie jest to użyteczne dla użytkownika, nie rób tego. –

To jest to, co muszę wiedzieć. – pv1

Jeśli obraz ma kontekst, taki jak logo lub zdjęcie, sugerowałbym załadowanie go jako <img> Upewnij się, że podajesz tekst alternatywny również dla ułatwień dostępu i SEO.

Jeśli obraz nie ma kontekstu w zakresie strony, to myślę, że właściwe miejsce dla niego jest zdefiniowane w CSS, który kontroluje projekt.

Cała idea polega na oddzieleniu prezentacji od treści tak bardzo, jak to tylko możliwe. Obraz może być treścią, a jeśli tak, powinien być w nim.

Źródło

2011-10-06 18:39:39

zgadzam, innymi słowy, czy obraz jest zawartości używają img, jeśli obraz jest częścią układu/projektu graficznego wykorzystaniem witryny css. – stivlo

@stivlo dodał linię dotyczącą obrazu jako treści, dzięki. –

Generalnie staram się umieścić jak najwięcej zdjęć w CSS, ale Doozer i Mario mają dobre punkty. Jeśli obraz jest ważny dla kontekstu, może przejść do kodu HTML. Będę także używał tagów <img>, gdy tekst będzie się unosić wokół i obrazu.

Jedna rzecz, którą CSS może zrobić, to <img> nie może być CSS image sprites. Jest to jedyna realna korzyść z wydajności, którą otrzymasz od jednego lub drugiego. Wydajne strony internetowe, takie jak youtube.com, łączą wiele obrazów w jeden duży, złożony obraz, aby ograniczyć ruch HTTP (a więc i czas ładowania strony). Na przykład jest to sprite zaczerpnięte z youtube.com.

enter image description here

Źródło

2011-10-06 18:50:02 Jeff

Sprites to zdecydowanie jeden z obszarów, w którym nie działają, masz rację. Zazwyczaj sprite są ukierunkowane na projekt, więc tak naprawdę należą do CSS. –

@DoozerBlake To prawda. Nie przypominam sobie, by kiedykolwiek można było zobaczyć spidory używane do galerii zdjęć lub zdjęcia na początku artykułu. – Jeff

zasady Wykonaj semantycznej HTML. Jeśli obraz jest treścią, tj. Miniaturą, zdjęciem lub przyciskiem, użyj elementu <img>. Jeśli jest bardziej częścią projektu strony, obraz tła może być bardziej odpowiedni.

Bardziej konkretny przykład: Jeśli używasz obraz jako ikonę obok linku tekstowego, użyj background-image:

Print icon with text

<span class="printIcon" onclick="window.print()">Print</a> 

.printIcon { background: url(...) no-repeat; padding-left: 20px }

Jeśli obraz jest sam przycisk, bez aspektu tekstowego użyj elementu <img> z odpowiednim atrybutem alt, który zastąpi obraz, jeśli jest niedostępny.

print button

<img src="printButton.png" alt="Print" onclick="window.print()" />

Źródło

2011-10-06 18:58:29 gilly3

Czy lepiej jest definiować obrazy w bezpośrednim html lub css?

Odpowiedz

Powiązane problemy