Wstawianie ilustracji: <img/>

Ilustracje, które chcesz umieścić na stronie, powinny być zapisane w formacie JPG, PNG lub GIF. Do fotografii najlepiej nadaje się format JPG. Do ilustracji o niewielkiej liczbie kolorów lepsze są formaty PNG lub GIF. Nie umieszczaj grafiki w formacie BMP — nie nadaje się on do Internetu i spowalnia proces ładowania strony.

Klipy wideo, obrazki SVG i animacje Flash umieszcza się elementem <object>.

Ilustracje wstawia się do dokumentu elementem <img/>. Element ten ma zawsze być pusty i przyjmuje następujące atrybuty:

Ścieżka do pliku: src

Zawiera ścieżkę do pliku graficznego.

Tekst alternatywny: alt Bug w IE

Grafiki stanowiące dekorację (np. kropki przy wypunktowaniu, zaokrąglone rożki, itp.) nie są częścią treści, ani nie potrzebują żadnego tekstu alternatywnego, dlatego należy je wstawiać za pomocą arkuszy stylów, a nie elementu <img/>

alt zastępuje obrazek, kiedy przeglądarka nie może go wyświetlić (bo ich nie obsługuje, ma wyłączone, wystąpił błąd albo po prostu obrazek jeszcze się nie ściągnął).

Bardziej szczegółowy opis: Guidelines on alt texts in img elements

Dobranie odpowiedniego tekstu alternatywnego bywa trudne. Dobrym sposobem jest wyobrażenie sobie, że czytasz stronę znajomemu przez telefon. Gdy dojdziesz do obrazka, to co powiesz?

Jeśli na stronie jest np. znak ostrzegawczy, to właściwe będzie zastąpienie go tekstem „Uwaga!”, a nie „Żółty trójkąt z wykrzyknikiem”.

<img src="trojkat.png" alt="Żółty trójkąt z wykrzyknikiem" /> To jest ważny tekst.
<img src="trojkat.png" alt="Uwaga!" /> To jest ważny tekst.

Czasem ilustracje nie mają szczególnego znaczenia dla treści strony. Jeśli tekst bez nich nadal ma sens, to wyjątkowo można wstawić obrazek za pomocą CSS.

Nadanie stylów tekstu dla elementu <img> określa jak będzie wyglądał tekst alternatywny.

Dodatkowe informacje o ilustracji: title

Jeśli chcesz dodać opis do ilustracji, możesz użyć atrybutu title. Przeglądarki najczęściej wyświetlają jego zawartość jako dymek (tooltip) po najechaniu myszą nad obrazek.

 <img src="fotka.jpg" alt="Nasza banda" title="Zdzichu to ten po lewej"/>

Wymiary obrazka: width, height

Opcjonalnie można podać rozmiar obrazka w pikselach. Pozwoli to uniknąć efektu „skakania” strony, gdy obrazki zostają załadowane zbyt późno.

Tajemnicze odstępy poniżej obrazka Bug w IE

Obrazek jest elementem liniowym domyślnie umieszczanym na linii bazowej tekstu. Z tego powodu przeglądarki rezerwują dodatkowe miejsce na resztę linii tekstu (dół liter y, p, j, g, q) pozostawiając odstęp pod obrazkiem. Jeśli chcesz tego uniknąć nadaj mu display:block, które wyświetli obrazek jako element blokowy i nie będzie brać pod uwagę wysokości linii tekstu.

Cięcie obrazków na kawałki i robienie z nich mozaiki jest złym zwyczajem. W takich przypadkach najczęściej obrazek powinien być umieszczony jako tło i/lub treść powinna być nad nim pozycjonowana.

Pozycjonowanie ilustracji przy tekście

Do tego służy CSSowa właściwość display. Odstęp między obrazkiem, a tekstem reguluje się wtedy za pomocą margin.


Zmodyfikowano: 31.08.2011, 01:58
submit