Kurs języka HTML i CSS

Poradnik webmastera

  • Zwiększ rozmiar czcionki
  • Domyślny  rozmiar czcionki
  • Zmniejsz rozmiar czcionki

Obrazy

Email Drukuj PDF

Internet bez grafiki byłby bardzo smutnym miejscem. Trudno w tej chwili znaleźć stronę WWW, na której nie pojawia się nawet najmniejszy element graficzny — choćby był to tylko ozdobny nagłówek strony lub tło przycisków menu pozwalającego wybierać podstrony serwisu internetowego. Obrazy umieszczane na stronach mogą przybierać formę animowanych ikon lub pasków reklamowych, czasem zaś pozostają całkowicie w ukryciu, tworząc jedynie jednolite tło dla innych elementów lub wręcz pełniąc funkcję niewidocznych „wypełniaczy” regulujących odstępy między innymi elementami.

Temat grafiki komputerowej wymaga nieco dłuższego „wstępu teoretycznego”, gdyż istnieje wiele różnych formatów zapisu (i kompresji) obrazu. Różnorodność ta wynika z konieczności pogodzenia jakości grafiki z rozmiarem pliku zawierającego obraz (a więc i z czasem pobierania obrazu przez osobę oglądającą stronę WWW). Pliki graficzne były pierwszym typem danych, który zmusił producentów oprogramowania do zaimplementowania różnorodnych efektywnych algorytmów kompresji, gdyż w formie nieskompresowanej nie nadawały się do przesyłania za pomocą powolnych modemów. Ty jako projektant stron WWW musisz za każdym razem decydować, z którego sposobu zapisu grafiki skorzystać.

Format GIF

GIF to pierwszy ze standardów kompresji grafiki szeroko stosowany w Internecie. Swoją popularność zawdzięcza olbrzymiej elastyczności i sporym możliwościom; jednak posiada też parę ograniczeń, z powodu których w użyciu znalazły się inne formaty zapisu grafiki.

Format GIF obsługuje obrazy o co najwyżej 256 kolorach, pozwala jednak ograniczyć ich liczbę, dopasowując się do konkretnego zastosowania. Ta jego cecha sprawia, iż jest niezastąpiony przy zapisywaniu małych elementów graficznych — jeśli konieczne jest użycie tylko 32 kolorów, skompresowany plik GIF będzie mniejszy niż w przypadku zapisywania informacji o wszystkich możliwych 256 kolorach. Liczbę kolorów można ograniczyć aż do dwóch (przy czym wcale nie musi to być obraz czarno-biały — równie dobrze można zapisać grafikę z żółtym rysunkiem umieszczonym na zielonym tle); nawet jeśli konkretny obraz słabo poddaje się kompresji, tak mała liczba kolorów znacznie ograniczy rozmiar pliku.

Ograniczenie liczby kolorów uniemożliwia stosowanie formatu GIF do zapisu fotografii, w przypadku których liczba kolorów może sięgać wielu dziesiątek tysięcy. I choć powstały odmiany formatu GIF umożliwiające przekroczenie granicy 256 różnych kolorów, cieszą się one małą popularnością, gdyż sposób kompresowania obrazów stosowany w tym formacie uniemożliwia osiągnięcie sensownego rozmiaru plików zawierających tak wiele kolorów.

Grafika zapisana w formacie GIF może się jednak charakteryzować trzema cechami, które do niedawna nie były udostępniane przez żaden inny format zapisu grafiki:

  • przezroczystością — jeden z kolorów obrazu może zostać zadeklarowany jako przezroczysty, co umożliwia przechowywanie w plikach GIF obrazów o nieregularnych kształtach i wyświetlanie ich bez prostokątnej, jednolitej obwódki na dowolnym tle,

  • animacją — plik GIF może zawierać wiele klatek obrazu wyświetlanych w dowolnie wybranej sekwencji; umożliwia to tworzenie krótkich animacji lub efektów specjalnych (zmiana obrazu wyświetlanego w polu, miganie itp.),

  • przeplotem — większość przeglądarek internetowych wyświetla zawarte na stronie WWW obrazy już w czasie pobierania ich z Sieci, format GIF stosuje jednak sposób zapisu umożliwiający wyświetlanie grafiki na całym obszarze przeznaczonym na obraz już po ściągnięciu niewielkiego fragmentu pliku — im więcej danych zostanie pobranych, tym bardziej szczegółowo wyświetlany jest obraz.

Format GIF przyda Ci się zatem najbardziej przy tworzeniu:

  • niewielkich elementów graficznych korzystających z małej liczby kolorów,

  • elementów animowanych,

  • obrazów o nieregularnych kształtach (z obszarami przezroczystymi),

  • schematów i szkiców.

Obecnie format GIF — ze względu na ograniczenia patentowe i konieczność uiszczania tantiem przez producentów oprogramowania — traci na znaczeniu. Funkcje pełnione przez format GIF z powodzeniem może realizować nowszy, doskonalszy i, co najważniejsze — pozbawiony balastu patentów format PNG.

Format JPEG

Format JPEG jest prawie całkowitym przeciwieństwem zapisu GIF. Przede wszystkim kompresja JPEG korzysta z zapisu stratnego. Oznacza to, że w procesie kompresji bezpowrotnie tracona jest część informacji. Pomijanie części informacji pozwala wyraźnie zmniejszyć rozmiar pliku wynikowego.

Rozmiar pliku JPEG zależy głównie od ustalonego na początku przez użytkownika stopnia kompresji. Nie istnieje, niestety, jakaś uniwersalna wartość gwarantująca za każdym razem uzyskanie najlepszej jakości obrazu przy jak najmniejszym rozmiarze pliku — w każdym przypadku trzeba dokonać wielu prób kompresji (przy różnych ustawieniach) i z uzyskanych plików wybrać ten, który przy satysfakcjonującej jakości ma najmniejszy rozmiar.

Wszystko to może brzmieć nieco przerażająco, jednak nie martw się — w przypadku obrazów fotograficznych (a do kompresji obrazów tego typu służy właśnie zapis JPEG) uzyskiwane efekty są naprawdę świetne, a stopień kompresji niezwykle wysoki. Nie należy jednak próbować kompresować w ten sposób obrazów wymagających wysokiego kontrastu lub korzystających z niewielkiej liczby kolorów: uzyskany plik nie będzie wcale mniejszy niż przy zapisie GIF, a do tego na wszystkich kontrastowych krawędziach zauważysz wyraźne rozmycia i zaburzenia obrazu.

Format JPEG przydaje się w praktyce tylko i wyłącznie do zapisywania fotografii i grafiki o dużej liczbie kolorów, w zastosowaniach tych wypada jednak doskonale.

Wskazówka
Pliki graficzne zapisane w formacie JPEG korzystają z rozszerzeń nazw plików .jpeg lub — częściej — .jpg.

Format PNG

Format PNG został stworzony wkrótce po ogłoszeniu pierwszych żądań tantiem wobec programistów stosujących format zapisu GIF. Nowy format miał być przede wszystkim wolny od wszelkich ograniczeń prawnych, a zarazem znacznie bogatszy w możliwości.

Pliki PNG mogą zawierać obrazy o bardzo zróżnicowanej liczbie barw. Możliwe jest zapisywanie w tej formie obrazów monochromatycznych, kilkubarwnych, a także — w przeciwieństwie do formatu GIF — obrazów o jakości fotograficznej (24-bitowy opis kolorów). Rozszerzono też obsługę przezroczystości: w miejscu prostego wskazywania obszarów przezroczystych zaimplementowano obsługę kanału alfa, umożliwiającego stopniowaną regulację stopnia przezroczystości (a więc mieszania koloru z podkładem) — od pełnej przezroczystości aż po pełne krycie.

Format PNG jest bezstratny. Oprogramowanie dokonujące kompresji może jednak w czasie tworzenia pliku użyć filtrów powodujących likwidację pewnej ilości detali o niewielkim wpływie na wygląd obrazu, co może spowodować znaczące zmniejszenie rozmiaru pliku. W przypadku bardziej skomplikowanych obrazów prawidłowa optymalizacja zapisu (wykorzystanie najlepszego filtru dla danego obrazu) praktycznie zawsze daje w wyniku plik mniejszy niż odpowiadający mu plik GIF.

Jedyną wadą formatu PNG jest brak obsługi animacji. O ile format GIF umożliwiał stworzenie prostych animowanych sekwencji i wyświetlanie ich bez konieczności oprogramowania ruchu, w przypadku PNG konieczne jest stworzenie serii odrębnych obrazów i napisanie kodu JavaScript, który wprawi te obrazy w ruch. Niestety, to rozwiązanie jest bardziej skomplikowane, a seria obrazów zawsze będzie zajmowała więcej miejsca na dysku i więcej pasma łącz transmisyjnych niż zoptymalizowany obraz animowany.

Biorąc pod uwagę opisane powyżej cechy formatu PNG, trudno się nie zgodzić z zaleceniami komitetu W3C (ustalającego standardy obowiązujące w Internecie), by w miarę możliwości jak najszybciej zastępować obrazy zapisane w formacie GIF odpowiednikami korzystającymi z kompresji PNG. Wniosek jest prosty: w przypadku obrazów zawierających ostre, kontrastowe krawędzie, duże, kolorowe płaszczyzny oraz tekst stosuj wyłącznie format PNG.

Oprogramowanie graficzne

Wiele zadań związanych z umieszczaniem obrazów na stronach WWW wymaga użycia dodatkowego, choćby najprostszego narzędzia służącego do obróbki grafiki cyfrowej. Niestety, najwyższej klasy programy do obróbki grafiki nie tylko kosztują często tysiące złotych, ale też wymagają wielu tygodni nauki, by wykorzystać ich zaawansowane funkcje. Na szczęście do najbardziej podstawowych zadań wystarczą programy znacznie prostsze, a często też całkowicie darmowe.

Z darmowych narzędzi służących do obróbki plików graficznych najbardziej polecam program IrfanView. Możesz go bez żadnych ograniczeń pobrać z Internetu; jest również dostępna jego polska wersja językowa. Stronę domową programu znajdziesz pod adresem http://www.irfanview.com/, a instalacja w systemie Windows nie jest skomplikowana i zajmie tylko chwilę. Za pomocą tego programu możesz podglądać obrazy, przycinać je, skalować i w ograniczonym stopniu modyfikować; absolutnie wystarcza to, by przygotować galerię zdjęć lub bazę danych osobowych.

Umieszczanie obrazu na stronie WWW

Obrazy — w przeciwieństwie do innych elementów strony WWW — nigdy nie są zamieszczane w pliku XHTML zawierającym kod strony. W kodzie umieszczana jest jedynie lokalizacja zewnętrznego pliku zawierającego wstawiany obraz; staraj się w związku z tym nie zapominać o wszystkich potrzebnych plikach zawierających obrazy przy okazji przenoszenia strony do innego katalogu lub umieszczania jej na serwerze internetowym.

Obrazowi — a dokładniej informacji, w którym miejscu strony ma się pojawić ten obraz — odpowiada element <img> (ang. image) języka XHTML. Musi on występować w formie pojedynczego znacznika <img />, uzupełnionego atrybutem src zawierającym ścieżkę dostępu do pliku obrazu.

Oto przykład kodu osadzającego obraz z pliku obraz.jpg (rysunek 5.1):

<img src="/obraz.jpg" />

Rysunek 5.1. Umieszczenie obrazu na stronie WWW jest proste!

Opatrywanie obrazu komentarzem

Trudno wyobrazić sobie wygodne surfowanie po Internecie przy użyciu przeglądarki pozbawionej możliwości wyświetlania obrazów. Czasem jednak okoliczności zmuszają użytkownika Sieci do skorzystania z przeglądarki pracującej w trybie tekstowym (na przykład Lynx) lub do wyłączenia automatycznego pobierania obrazów z Sieci. Choć są to przypadki niezwykle rzadkie, powinieneś ułatwić takim osobom przeglądanie Twojej strony WWW poprzez opatrzenie każdego obrazu komentarzem wyświetlanym zamiast grafiki.

Język XHTML dysponuje mechanizmem umożliwiającym wyświetlanie komentarza w miejscu przewidzianym na obraz. Przeglądarka automatycznie dokonuje wyboru wyświetlanej treści — jeśli pobieranie obrazów jest możliwe i nie zostało zablokowane, komentarz w ogóle nie pojawi się na ekranie; jednak jeśli użytkownik zablokował wyświetlanie obrazów lub też pobranie obrazu z Sieci nie powiodło się, na ekranie pojawi się prostokątna ramka z ikoną oraz wprowadzonym przez Ciebie komentarzem.

W świetle najnowszej wersji standardu XHTML opatrzenie komentarzem wszystkich obrazów występujących na stronie jest obowiązkowe. Pamiętaj o umieszczaniu komentarza już podczas osadzania obrazu na stronie — nie będziesz musiał dokonywać późniejszych korekt kodu.

Aby dodać komentarz do obrazu, wystarczy uzupełnić kod elementu <img> o atrybut alt przechowujący opis:

<img src="/obraz.jpg" alt="Zdjęcie kota" />

Opis ten nie będzie normalnie w ogóle widoczny. Na ekranie pojawi się dopiero w przypadku problemów z pobraniem obrazu z Sieci lub odczytaniem go z dysku twardego Twojego komputera (na przykład jeżeli podasz złą nazwę lub nie umieścisz pliku obrazu we właściwym katalogu; rysunek 5.2).

Rysunek 5.2. Alternatywny opis obrazu (komentarz) pojawia się wyłącznie w sytuacji, gdy wczytanie lub wyświetlenie obrazu jest niemożliwe

Wskazówka
Opisy nie mogą zawierać informacji mało interesujących lub oczywistych. Nie podawaj w opisie obrazu rozmiaru pliku zawierającego ten obraz: skoro wyświetlany jest opis, pobranie obrazu i tak nie wchodzi w rachubę. Nie stosuj opisów w stylu „Rysunek” lub „Obraz”, które absolutnie nic nie wnoszą, a jedynie powiększają kod.

Opatrywanie obrazu dymkiem z opisem

Tekst zapisany w atrybucie alt wyświetlany jest jedynie w przypadku, gdy przeglądarka nie jest w stanie wyświetlić samego obrazu. Z tego powodu tekst ten nazywa się tekstem alternatywnym — alternatywnym wobec obrazu. Czasem jednak warto opatrzyć obraz opisem wyświetlanym na żądanie.

Do tego celu służy atrybut title. Tekst w nim wprowadzony wyświetlany jest, gdy użytkownik wskaże obraz wskaźnikiem myszki i przez chwilę nie będzie nią ruszał. Najczęściej w atrybucie title wprowadza się ten sam tekst, który został podany wewnątrz atrybutu alt (rysunek 5.3):

<img src="/obraz.jpg" alt="Zdjęcie kota" title="Zdjęcie kota" />

Rysunek 5.3. Atrybut title umożliwia wprowadzenie tekstu pojawiającego się w „dymku” w momencie dłuższego zatrzymania się wskaźnika myszy nad obrazem

Niektóre przeglądarki — na przykład starsze wersje programu Internet Explorer — nie trzymają się ściśle norm i wyświetlają również w charakterystycznych „dymkach” (takich jak pokazany na powyższym obrazku) tekst podany za pomocą atrybutu alt. To dobry powód, by zawsze, gdy chcesz, aby wskazanie obrazu powodowało pojawienie się informacji w dymku, umieszczać ten sam tekst zarówno w atrybucie alt, jak i title.

Nie przesadzaj z opisami wyświetlanymi w dymkach. Malutkie okienka pojawiające się, gdy tylko użytkownik na chwilę zatrzyma wskaźnik myszki w jednym miejscu (by na przykład przeczytać jakiś fragment tekstu), rozpraszają i denerwują. Atrybut title stosuj bardzo rzadko i bardzo rozważnie, godząc się z faktem, że użytkownicy starszych wersji przeglądarki Internet Explorer i tak będą widzieli dymki z tekstem podanym w atrybucie alt (z którego nie wolno Ci zrezygnować, jest on bowiem obowiązkowy).

Określanie rozmiaru obrazu

Nie zawsze obraz, który chciałbyś umieścić na stronie WWW, charakteryzuje się odpowiadającymi Ci rozmiarami. Język XHTML oczywiście daje możliwość zmodyfikowania rozmiarów obrazu, powinieneś jednak korzystać z niej z rozwagą:

  • powiększanie obrazu zawsze wiąże się ze spadkiem jego jakości i choć istnieją algorytmy skalowania obrazu rastrowego pozwalające uzyskać całkiem przyzwoity efekt, powiększony obraz zawsze będzie charakteryzował się gorszą jakością niż oryginał,

  • pomniejszanie obrazu nie wiąże się już z tak wielkim spadkiem jakości, jest jednak nieekonomiczne; znacznie większy sens ma przygotowanie pomniejszonej kopii obrazu za pomocą dowolnego programu graficznego — pomniejszona wersja nie tylko będzie wymagała pobrania mniejszej ilości danych z Sieci, ale również może charakteryzować się znacznie lepszą jakością niż w przypadku pomniejszenia wykonanego przez samą przeglądarkę.

Nie jesteś w stanie zrozumieć, po co w ogóle wprowadzono możliwość określania rozmiarów obrazów? Już spieszę z wyjaśnieniami. Podanie oryginalnego rozmiaru obrazu pozwala przeglądarce umieścić na stronie pole przeznaczone na obraz, zanim jeszcze pobierze z Sieci sam plik zawierający grafikę; wywołuje to u osoby przeglądającej Twoją stronę wrażenie, że jej ładowanie przebiega szybciej.

Mam nadzieję, że rozumiesz już, iż zmiana rozmiaru obrazu może naprawdę się przydać, a podawanie w kodzie rozmiaru grafiki (za pomocą atrybutów stylu width i height przypisywanych elementowi <img>) powinno być Twoim obowiązkiem.

Ustalanie realnych rozmiarów obrazu

Aby podać w kodzie XHTML rozmiar obrazu, musisz najpierw odczytać go za pomocą dowolnego programu graficznego — na przykład polecanego na początku tej części kursu programu IrfanView. Dopiero gdy będziesz dysponował podaną w pikselach szerokością i wysokością (na przykład 640 na 463 piksele), możesz przystąpić do modyfikowania kodu poprzez dopisanie atrybutu style i dwóch atrybutów stylu — width (szerokość) oraz height (wysokość):

<img src="/obraz.jpg" style="width: 640px; height: 463px;" alt="Zdjęcie kota" />

W obu przypadkach należy podać jednostkę. Skrót px odpowiada pikselom — to w przypadku obrazów rastrowych najczęściej używana jednostka miary. Kolejność podawania atrybutów jest dowolna, jednak przyjęło się, że pierwszy jest zawsze atrybut src, drugi style (a wewnątrz niego pierwszy jest atrybut stylu width, a drugi height), zaś na samym końcu — atrybut alt.

Wprowadzona zmiana nie powinna mieć żadnego wpływu na sposób, w jaki obraz jest wyświetlany w oknie przeglądarki. Jeśli cokolwiek się zmieniło, sprawdź jeszcze raz, czy w kodzie strony podałeś prawidłowy rozmiar obrazu.

Zmiana rozmiarów obrazu

Czasem rozmiar obrazu różni się od rozmiaru obszaru, który został na niego przewidziany. Zdarza się to szczególnie często w przypadku prostych ozdobników graficznych, których przeskalowanie nie pogarsza dramatycznie ich jakości, a pozwala całkowicie wypełnić wolny obszar strony. Jeżeli jednak za pomocą atrybutów stylu width i height poda się nieprawdziwe rozmiary obrazu, a dowolne wartości, przeglądarka posłusznie przeskaluje obraz i wyświetli go w polu o podanym rozmiarze.

Oto przykład kodu wyświetlającego obrazek o rozmiarach 100×114 pikseli w skali 1:1 oraz w pomniejszeniu i powiększeniu. Warto zauważyć, że jeżeli podane szerokość i wysokość obrazu nie mają oryginalnych proporcji, obraz zostanie zniekształcony (rysunek 5.4):

<p>Skala 1:1:<br />

<img src="/maly.jpg" style="width: 100px; height: 114px;" alt="Zdjęcie kota" /></p>

<p>Pomniejszenie 50%:<br />

<img src="/maly.jpg" style="width: 50px; height: 57px;" alt="Zdjęcie kota" /></p>

<p>Dwukrotne powiększenie tylko w poziomie:<br />

<img src="/maly.jpg" style="width: 200px; height: 114px;" alt="Zdjęcie kota" /></p>

Rysunek 5.4. Za pomocą atrybutów stylu width i height można dowolnie regulować ilość miejsca przeznaczanego na stronie na obraz; nie trzeba nawet utrzymywać właściwych proporcji

Możliwości zmiany rozmiarów obrazu nie wolno nadużywać. Pomniejszanie obrazu jest marnotrawstwem, gdyż przeglądarka i tak musi pobrać z serwera WWW obraz w oryginalnej postaci, a dopiero potem go pomniejsza. Znacznie bardziej opłaca się przygotować osobną wersję obrazu, pomniejszoną za pomocą programu graficznego, dzięki czemu nie tylko osiągnie się większą jakość miniatury, ale też ograniczy się ilość danych pobieranych z serwera. Z kolei powiększanie obrazu powoduje widoczny spadek jakości — widoczne stają się piksele tworzące obraz. Najgorsze z tego wszystkiego są zmiany rozmiarów niezachowujące proporcji obrazu: wszelkie elementy graficzne, których wygląd zależy od proporcji, po takiej operacji gwałtownie tracą na jakości.

Oblewanie obrazu tekstem

Osadzenie obrazu wewnątrz akapitu tekstu powoduje, że tylko pierwszy wiersz tego akapitu znajduje się na równi z obrazem. Pozostałe linie wyświetlane są poniżej obrazu, co psuje wygląd strony; marnuje się też miejsce na stronie (rysunek 5.5):

<p><img src="/maly.jpg" style="width: 100px; height: 114px;" alt="Zdjęcie kota" />

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

...

Maecenas nisl quam, faucibus vel suscipit vel,

aliquam porta augue. </p>

Rysunek 5.5. Wstawienie obrazu wewnątrz akapitu powoduje umieszczenie tekstu na równi z dolną krawędzią obrazu

Jednak nic straconego — język XHTML zawiera mechanizmy umożliwiające nie tylko obłamanie tekstu wokół obrazu, lecz również wybór krawędzi strony, do której ma być dosunięty oblewany tekstem obraz. Po nabraniu wprawy można konstruować strony WWW konkurujące pod względem elegancji składu z niejedną papierową gazetą.

Oblewanie obrazu tekstem

Za wymuszanie oblewania obrazu tekstem odpowiada atrybut stylu o nazwie float. Może on przybierać jedną z dwóch wartości:

  • right — obraz zostanie dosunięty do prawego marginesu i oblany tekstem z lewej strony,

  • left — obraz zostanie dosunięty do lewego marginesu i oblany tekstem z prawej strony.

Wystarczy zatem prosta modyfikacja kodu, aby obraz został dosunięty do lewego lub prawego marginesu. Oto kod dla drugiego z wariantów (rysunek 5.6):

<p><img src="/maly.jpg" style="width: 100px; height: 114px; float: right;"

alt="Zdjęcie kota" />

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

...

Maecenas nisl quam, faucibus vel suscipit vel,

aliquam porta augue. </p>

Rysunek 5.6. Dwa dostępne sposoby oblewania obrazu tekstem

Widać wyraźnie, że aby dosunięcie obrazu do prawej krawędzi (float: right;) dawało najlepsze rezultaty, oblewający tekst powinien być wyjustowany (text-align: justify;). Standardowo złożony tekst (dosunięty tylko do lewego marginesu) otacza obraz nieładną, poszarpaną krawędzią.

Element <img>, któremu został przypisany atrybut stylu float, powinien być umieszczany zaraz za znacznikiem otwierającym element <p> zawierający ten obraz oraz oblewający go tekst.

Wskazówka
Oczywiście kod jednego znacznika nie może być złamany pomiędzy dwa wiersze. Powyżej takie łamanie zostało dokonane ze względu na czytelność, lecz pisząc kod strony WWW, należy ściśle przestrzegać reguły, by znaki < (otwierający znacznik) i > (zamykający ten znacznik) znajdowały się w tym samym wierszu kodu.

Rezygnowanie z oblewania obrazu tekstem

Korzystanie z funkcji obłamywania tekstu wokół obrazu może, paradoksalnie, stać się przyczyną nowego kłopotu. Nie zawsze bowiem tekst powinien znajdować się obok obrazu na całej długości jego krawędzi, często zachodzi potrzeba umieszczenia kolejnego akapitu tekstu poniżej obrazu.

Pierwszym przychodzącym na myśl rozwiązaniem jest wstawienie takiej liczby nowych, pustych akapitów tekstu, by w końcu znaleźć się poniżej obrazu. Jest to jednak rozwiązanie z gruntu złe — wystarczy, że strona zostanie wyświetlona nieco inną czcionką niż zakładana przez jej autora, a pustych akapitów może zabraknąć — co spowoduje umieszczenie tekstu obok obrazu, a tego właśnie należało uniknąć — lub może ich być zbyt dużo — co zniszczy pieczołowicie zaplanowany układ strony.

Następny pomysł wiąże się z wykorzystaniem tabeli (tabelom poświęcony jest jeden z dalszych działów tego kursu) i umieszczeniem w jednej z jej komórek tekstu, a w drugiej obrazu; nie trzeba nawet korzystać w takim przypadku z funkcji oblewania obrazu tekstem! Przyznam, że jest to rozwiązanie wyjątkowo dobre i naprawdę je polecam. Jedyna jego wada polega na tym, że jeśli tekstu będzie dużo, nie zawinie się on elegancko, wchodząc „pod obraz”, a pozostanie ściśnięty w wąskiej kolumnie.

Jest jednak jeszcze trzecie rozwiązanie — wykorzystanie atrybutu stylu clear. Obdarzony nim element traci zezwolenie przeglądarki na oblewanie obrazu i zostaje przeniesiony pod spód obrazu — tak, jakby nigdy nie został włączony tryb oblewania obrazu tekstem. Atrybut stylu clear może przyjmować jedną z trzech wartości:

  • left — anulowany jest tryb oblewania włączony atrybutem stylu float: left, oblewanie z drugiej strony jest kontynuowane,

  • right — anulowany jest tryb oblewania włączony atrybutem stylu float: right, oblewanie z drugiej strony jest kontynuowane,

  • both — anulowane są wszystkie możliwe kombinacje trybu oblewania obrazu tekstem, tekst bezwarunkowo zostanie umieszczony poniżej obrazu.

Z tych trzech możliwości najczęściej stosowana jest ostatnia, anulująca w ogóle tryb oblewania obrazu tekstem.

Oto fragment kodu zawierającego trzy akapity tekstu. Wewnątrz pierwszego z nich osadzony został obraz wystarczająco duży, by tekst tego akapitu nie był w stanie otoczyć go całego. Widać, że w efekcie również znajdujący się poniżej drugi akapit oblewa ten sam obraz; dopiero trzeci z nich znajduje się poniżej obrazu (rysunek 5.7):

<p><img src="/maly.jpg" style="width: 100px; height: 114px; float: left;" alt="Zdjęcie kota" />

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Donec et augue quis massa semper aliquet convallis et arcu.</p>

<p>Donec imperdiet, orci vel iaculis tincidunt, neque urna

facilisis est, a ultricies felis lectus ut lacus.</p>

<p>Vivamus non dui nulla. Donec vel odio tellus, eget laoreet eros.</p>

Rysunek 5.7. Przeglądarka nigdy sama nie przerywa oblewania obrazu tekstem

Dodajmy teraz atrybut stylu clear: both do znacznika <p> rozpoczynającego drugi akapit:

<p style="clear: both;">... ... ...

W efekcie otaczanie obrazu zostało dla tego akapitu tekstu (i wszystkich kolejnych) anulowane (rysunek 5.8):

<p><img src="/maly.jpg" style="width: 100px; height: 114px; float: left;" alt="Zdjęcie kota" />

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Donec et augue quis massa semper aliquet convallis et arcu.</p>

<p style="clear: both;">Donec imperdiet, orci vel iaculis tincidunt, neque urna

facilisis est, a ultricies felis lectus ut lacus.</p>

<p>Vivamus non dui nulla. Donec vel odio tellus, eget laoreet eros.</p>

Rysunek 5.8. W drugim akapicie strony wymuszone zostało przerwanie oblewania obrazu tekstem

Zmiana szerokości marginesów obrazu

Nie zawsze bezpośrednie przyleganie obrazu do otaczających go elementów jest pożądane. Za pomocą atrybutów stylu CSS można jednak odsunąć oblewający obraz tekst od dowolnej z czterech krawędzi obrazu. Taka możliwość przydaje się czasem również wtedy, gdy obraz nie jest oblany tekstem, a należy tylko dodać nad nim lub pod nim nieco wolnego miejsca.

Szerokość marginesów obrazu reguluje atrybut stylu margin. Wymaga on podania czterech parametrów określających szerokość marginesu przy każdej z czterech krawędzi obrazu w kolejności: górna, prawa, dolna, lewa (czyli zgodnie z ruchem wskazówek zegara). Szerokość marginesu z każdej strony może być zerowa lub może zostać podana w dowolnych jednostkach, między innymi w pikselach (px; jest to niezalecane), punktach (pt; najlepszy wybór), milimetrach (mm) czy centymetrach (cm). Oto przykład (rysunek 5.9):

<p><img src="/maly.jpg" style="width: 100px; height: 114px;

float: left; margin: 3pt 3mm 1pt 0;" alt="Zdjęcie kota" />

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

...

Maecenas nisl quam, faucibus vel suscipit vel,

aliquam porta augue. </p>

Rysunek 5.9. Umieszczenie odstępu między obrazem a tekstem znacząco poprawia wygląd strony

Wskazówka
Więcej informacji o regulowaniu szerokości marginesów elementów języka XHTML zawartych jest w jednej z kolejnych części tego kursu, poświęconej arkuszom stylów CSS.

Przekształcanie obrazu w odnośnik

Choć nawigacja po stronie WWW mogłaby być oparta na odnośnikach zbudowanych na bazie tekstu, znacznie lepszym (a przede wszystkim ładniejszym) rozwiązaniem jest budowanie odnośników na podstawie obrazów. Graficzne menu zawsze będzie wyglądało lepiej niż prymitywna lista tekstowa, a ikona z wizerunkiem koperty znacznie łatwiej zachęci czytelników strony do dzielenia się z jej autorem ich wrażeniami niż prosty odnośnik zawierający tylko adres e-mail twórcy.

Aby uczynić z obrazu odnośnik, wystarczy otoczyć element <img> elementem <a>. Taki odnośnik może oczywiście prowadzić do dowolnego elementu. Oto przykład trzech graficznych odnośników prowadzących do stron WWW (rysunek 5.10):

<a href="http://www.wp.pl/"><img src="/link-wp.png" style="width: 244px; height: 43px;" alt="Odnośnik" /></a><br />

<a href="http://www.helion.pl/"><img src="/link-helion.png" style="width: 175px; height: 79px;" alt="Odnośnik" /></a><br />

<a href="http://www.grush.one.pl/"><img src="/link-swiatowocow.png" style="width: 323px; height: 41px;" alt="Odnośnik" /></a><br />

Rysunek 5.10. Odnośniki zbudowane na bazie obrazów

Modyfikacja obramowania obrazu

Przeglądarki internetowe zazwyczaj nie wyświetlają ramki w przypadku samodzielnych obrazów, obwodząc za to grubą ramką obrazy będące zarazem odnośnikami — można jednak samodzielnie ustalić szerokość ramki lub też całkowicie z niej zrezygnować.

Do tego celu również używa się atrybutów stylu i choć dokładny opis tego zagadnienia znajduje się w dalszej części kursu, wystarczy poznać jeden atrybut, by móc dowolnie sterować szerokością i kolorem obwódki wokół obrazów.

Wskazówka
Więcej informacji o regulowaniu szerokości marginesów elementów języka XHTML zawartych jest w jednej z kolejnych części tego kursu, poświęconej arkuszom stylów CSS.

Ustalanie obramowania

Za szerokość obramowania odpowiada atrybut stylu border. Za jego pomocą podaje się trzy wartości: szerokość (w dowolnej jednostce), styl oraz kolor obramowania. Na przykład definicja border: 1px solid yellow odpowiada obramowaniu o szerokości 1 piksela (1px) rysowanemu linią ciągłą (solid) o kolorze żółtym (yellow). Więcej informacji na temat tego atrybutu stylu znajduje się w dalszych dwóch częściach tego kursu.

Nadanie obrazowi obramowania wymaga zatem wyłącznie dodania atrybutu stylu border do najczęściej obecnego już atrybutu style elementu <img> (rysunek 5.11):

<a href="http://www.helion.pl/"><img src="/link-helion.png"

style="border: 10px solid green; width: 175px; height: 79px;"

alt="Odnośnik" /></a>

Rysunek 5.11. Obramowanie obrazu

Rezygnacja z obramowania

Rezygnacja z obramowania jest prostsza niż jego narzucenie. Wystarczy podać atrybut stylu border, nadając mu wartość none. Najczęściej technikę tę stosuje się, by pozbyć się obramowania dodawanego automatycznie do obrazów, z których zostały utworzone odnośniki. Oto przerobiony przykład z wcześniejszej partii tej części kursu — z każdego z trzech obrazów-odnośników usunięto obramowanie (rysunek 5.12):

<a href="http://www.wp.pl/"><img src="/link-wp.png" style="border: none; width: 244px; height: 43px;" alt="Odnośnik" /></a><br />

<a href="http://www.helion.pl/"><img src="/link-helion.png" style="border: none; width: 175px; height: 79px;" alt="Odnośnik" /></a><br />

<a href="http://www.grush.one.pl/"><img src="/link-swiatowocow.png" style="border: none; width: 323px; height: 41px;" alt="Odnośnik" /></a><br />

Rysunek 5.12. Obrazy-odnośniki prezentują się znacznie lepiej w wersji pozbawionej obramowania

Zamieszczanie miniatur zdjęć

Wspominałem już o jednej z największych wad zmniejszania rozmiarów obrazu za pomocą atrybutów elementu <img> — mimo iż wstawiony na stronie obraz został pomniejszony, przeglądarka internetowa i tak musi pobrać z Sieci cały plik w oryginalnym rozmiarze. Nie jest to problemem, gdy na stronie znajduje się tylko jeden obraz; może być wręcz zaletą, gdyż kliknięcie odnośnika prowadzącego do wersji pełnowymiarowej zdjęcia spowoduje natychmiastowe jego wyświetlenie. Nietrudno sobie jednak wyobrazić, co się będzie działo, gdy zamieści się na stronie kilka lub kilkanaście takich dużych obrazów…

Sposobem rozwiązania problemu — i zmniejszenia prawdopodobieństwa, że osoba oglądająca stronę WWW zniecierpliwiona czekaniem na jej załadowanie przejdzie do innej strony — jest korzystanie z miniatur obrazów. Miniatury nie są jakimś specjalnym rodzajem obrazu, to najnormalniejsze pliki JPEG. Tym, co odróżnia je od pełnowymiarowej wersji zdjęcia, jest rozmiar pliku.

Wskazówka
Z tego powodu stosowanie miniatur obrazów zapisanych w plikach GIF zazwyczaj nie ma sensu. Pliki GIF najczęściej mają bardzo małe rozmiary i ich pobranie z Sieci trwa bardzo krótko, a miniatury utworzone z tak zapisanych obrazów wyglądają często koszmarnie.

Miniatury należy utworzyć samodzielnie, za pomocą dowolnego programu graficznego. Pierwszym krokiem jest pomniejszenie oryginalnego obrazu tak, aby przybrał rozmiar (szerokość i wysokość) wykluczający konieczność ręcznego narzucania pomniejszonego rozmiaru w kodzie XHTML strony. Taką pomniejszoną wersję należy zapisać w osobnym pliku o innej nazwie. Drugim, równie istotnym krokiem jest zastosowanie możliwie wysokiego stopnia kompresji JPEG: miniatura nie musi być niezwykle czytelna, ma jedynie dawać ogólne pojęcie o obrazie.

Gdy połączy się miniaturę z odnośnikiem prowadzącym do pełnej wersji pliku, otrzyma się rozwiązanie prawie idealne — strona WWW załaduje się szybko, a oglądająca ją osoba będzie mogła orientacyjnie ocenić, które z zamieszczonych zdjęć ją interesują, i jednym kliknięciem wyświetlić je w całej okazałości.

Istnieją różne reguły przechowywania miniatur obrazów (ang. thumbnails). Niektórzy preferują trzymanie plików miniatur w osobnym folderze, co pozwala wydzielić je logicznie spośród innych plików tworzących stronę WWW. Inni dodają na początku nazwy pliku obrazu jakiś stały przedrostek (na przykład miniaturze obrazu przechowywanego w pliku obraz.jpg nadają nazwę miniatura_obraz.jpg), co również skutkuje — po posortowaniu listy plików — wydzieleniem wszystkich miniatur. Trzecią często spotykaną konwencją jest rozszerzanie nazwy o końcówkę (na przykład miniaturze obrazu przechowywanego w pliku obraz.jpg nadaje się nazwę obraz_miniatura.jpg) — ta metoda pozwala przy sortowaniu plików zachować obok siebie na liście pełnowymiarowy obraz i jego miniaturę. Oczywiście można stworzyć również swoją własną konwencję — ważne jest tylko to, aby była logiczna, wygodna i konsekwentnie stosowana.

Oto przykład prostej galerii obrazów. Na jej potrzeby zostały przygotowane trzy obrazy (01.jpg, 02.jpg i 03.jpg) o rozmiarach 640×480 pikseli każdy oraz trzy odpowiadające im miniatury (01-miniatura.jpg, 02-miniatura.jpg, 03-miniatura.jpg) o rozmiarach 160×120 pikseli. Kliknięcie jednej z miniatur umieszczonych w galerii powoduje otwarcie nowego okna, prezentującego pełnowymiarową wersję obrazu (rysunek 5.13).

<?xml version="1.0" encoding="utf-8"?>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="pl" lang="pl">

 <head>

  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

 </head>

 <body>

  <a href="/01.jpg" target="_blank"><img src="/01-miniatura.jpg"

  style="border: 1px solid blue; width: 160px; height: 120px;"

  alt="Miniatura" /></a>

  <a href="/02.jpg" target="_blank"><img src="/02-miniatura.jpg"

  style="border: 1px solid blue; width: 160px; height: 120px;" alt="Miniatura" /></a>

  <a href="/03.jpg" target="_blank"><img src="/03-miniatura.jpg"

  style="border: 1px solid blue; width: 160px; height: 120px;" alt="Miniatura" /></a>

 </body>

</html>

Rysunek 5.13. Galeria zbudowana z miniatur obrazu przyspiesza ładowanie strony i oszczędza łącze sieciowe

Używanie obrazu jako tła strony

Nudne, jednobarwne tło strony WWW można zastąpić… obrazem. Należy tylko pamiętać, by obraz ten był w miarę jednolity kolorystycznie i niezbyt krzykliwy — w przeciwnym razie utrudni odczytanie tekstu zamieszczonego na stronie.

Modyfikację tła należy zacząć od narzucenia jednolitego, barwnego tła o kolorystyce podobnej do kolorystyki obrazu. Aby to uczynić, wewnątrz kodu atrybutu style elementu <body> należy wprowadzić atrybut stylu background-color wraz z kodem koloru jednolitego tła strony:

background-color: kod-koloru;

Określenie jednolitego koloru tła jest zabezpieczeniem na wypadek wystąpienia błędu w czasie pobierania pliku graficznego z Sieci. Chyba nie muszę pisać, jaki byłby efekt braku ciemnego obrazu tworzącego tło, gdyby jednolitym kolorem tła był pozostawiony domyślnie kolor biały…

Następnie należy określić nazwę pliku graficznego zawierającego tło strony. Aby to uczynić, wewnątrz kodu atrybutu style elementu <body> należy wprowadzić atrybut stylu background-image wraz z adresem URL pliku graficznego, który ma tworzyć tło strony:

background-image: url(adres-pliku-graficznego);

Całość będzie wyglądała mniej więcej tak (rysunek 5.14):

<?xml version="1.0" encoding="utf-8"?>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="pl" lang="pl">

 <head>

  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

 </head>

 <body style="background-color: #CCAA77; background-image: url(tlo.jpg);">

  <p style="color: yellow; background-color: brown; padding: 5pt 5pt 5pt 5pt;">

  Oto strona, której tło zostało

  zmienione ze standardowego na&nbsp;zbudowane z&nbsp;obrazów.</p>

 </body>

</html>

Rysunek 5.14. Obraz może pełnić rolę atrakcyjnego tła strony WWW — trzeba tylko uważać, by nie wpłynęło to negatywnie na czytelność tekstu

Wskazówka
Aby strona wyglądała ładnie, obraz tworzący tło powinien być przygotowany do tworzenia większego obszaru z małych fragmentów, czyli mieć formę powtarzalnego kafla.

Podsumowanie

Choć trudno jest stworzyć naprawdę dobry serwis internetowy bez choćby niewielkich zdolności graficznych, naprawdę wiele można zdziałać, znając tylko podstawowe funkcje programów graficznych. Najważniejszy zawsze jest wybór odpowiedniego formatu zapisu obrazów. Nie należy bać się podglądania robiących wrażenie serwisów internetowych i uczenia się na ich podstawie wyboru właściwego formatu zapisu do każdego z zadań stawianych przed obrazami. Nie wolno się też obawiać eksperymentowania z opcjami programu graficznego dotyczącymi efektywności kompresji — często kilkanaście minut pracy pozwala zaoszczędzić każdej osobie przeglądającej serwis WWW pobierania z Sieci wielu kilobajtów danych.

Warto dokładnie przećwiczyć przedstawione w tym rozdziale zagadnienia:

  • osadzanie obrazu na stronie,

  • tworzenie miniatur obrazów będących zarazem odnośnikami prowadzącymi do pełnowymiarowej wersji zdjęcia,

  • tworzenie menu składającego się z graficznych przycisków przekształconych w odnośniki.

Najważniejszą decyzją, którą trzeba podjąć przed osadzeniem obrazu na stronie, jest wybór formatu zapisu obrazu. Pamiętać przy tym należy o prostej zasadzie:

  • W przypadku ubogich w kolory elementów graficznych, takich jak kolorowe paski, proste symbole graficzne lub graficzne paski menu, stosuje się format GIF.

  • W przypadku bogatych w kolory obrazów i fotografii cyfrowych stosuje się jedynie format JPEG; należy starać się też tak dobrać współczynnik kompresji, by pełnowymiarowa wersja obrazu zachowywała jak najlepszą jakość przy możliwie niewielkim rozmiarze pliku, a plik zawierający miniaturę obrazu miał jak najmniejszy rozmiar — nawet jeśli miałoby się to odbyć kosztem jakości miniatury.

Warto też pamiętać, że pliki graficzne muszą być przenoszone razem z plikiem XHTML, w którym osadzona jest grafika. Odwołując się do plików graficznych, stosuje się wyłącznie ścieżki względne, przenosząc zaś plik .html do innego folderu, kopiuje się do niego wszystkie wykorzystywane pliki graficzne (lub poprawia wszystkie elementy <img> zawarte w tym pliku).

Nie należy też zapominać o podawaniu rozmiaru każdego osadzanego na stronie obrazu poprzez definiowanie atrybutów stylu width oraz height dla elementów <img>. Pozwoli to przyspieszyć wyświetlanie strony WWW — przeglądarka WWW nie będzie musiała czekać na pobranie rozmiaru obrazu z Sieci ani dokonywać ponownej kompozycji strony po odczytaniu całej zawartości pliku obrazu. Jednocześnie jak ognia unikać trzeba zmian rozmiaru wyświetlanych obrazów — choć jest to możliwe, tylko w ściśle określonych przypadkach (takich jak dwukrotne powiększenie malutkiego obrazu pochodzącego ze starej gry komputerowej) ma to sens i daje dobre rezultaty.

 

Nowości Helionu

Statystyki

Użytkowników : 766
Artykułów : 513
Zakładki : 28
Odsłon : 15212110