obrazy HTML

Najczęściej stosowane w internecie formaty graficzne to:

• JPG
  

  Format ten został opracowany na potrzeby zmniejszenia rozmiaru (kompresji) zdjęć fotograficznych.
  Jest to format tzw. stratnej kompresji, tzn. zmniejszenia rozmiaru kosztem jakości zdjęcia.

  Pokrótce kompresja ta polega na zmniejszeniu liczby kolorów na zdjęciu w podobnych obszarach i zastąpieniem ich jednym bądź kilkoma odcieniami tego samego koloru.

  Stosowany jest do zapisu zdjęć o bardzo dużej ilości kolorów.

• PNG

  Jest to format bezstratnej kompresji plików graficznych poprzez redukcję ilości używanych kolorów.
  Jakość grafiki podczas kompresji nie ulega pogorszeniu, zmiany jedynie występują w ilości kolorów, które zostaną użyte.
  Dla przykładu zamiast trzech odcieni pomarańczowego używa się jednego.

  Z plikami w formacie PNG wiąże się również bardzo przydatna własność, mianowicie przezroczystość.
  Pozwala ona na zapisanie grafiki bez tła.
  Własność ta szczególnie przydatna jest, gdy chcemy zapisać nasze logo, bądź ikony.

  W programach graficznych przezroczystość zazwyczaj zaznaczona jest taką szachownicą, ale nie zostanie ona wyświetlona na naszej stronie. Przydatna jest ona podczas projektowania.
  Przezroczystość zwana jest również kanałem alfa (ang. alpha channel).
  

• GIF

  Podobnie jak PNG jest to format bezstratnej kompresji plików graficznych poprzez redukcję ilości używanych kolorów.
  Maksymalna ilość kolorów wynosi 256.
  

  Z plikami w formacie GIF wiąże się również bardzo przydatna własność, mianowicie animacje.
  Pozwala również jak PNG stosować przezroczystość - zapisanie grafiki bez tła.
  

• SVG

  Zaliczny jest do grafiki wektorowej.
  Plik SVG używa trzech typów obiektów do opisu grafiki – obrazów, tekstu i kształtów wektorowych (m.in. linie, ścieżki, ramki, okręgi czy wielokąty).

  Dowolny program rozpoznający format XML, taki jak przeglądarka internetowa, może wyświetlać obraz przy użyciu informacji zawartych w pliku SVG.
  Format, opisany przez tekstowy język graficzny, dotyczy tylko dwuwymiarowej grafiki, ale może też obsługiwać interaktywność, animację i skrypty.

  Pierwszą i najważniejszą cechą wyróżniającą SVG spośród innych, tradycyjnych rozszerzeń graficznych, jest skalowalność, która oznacza, że nie ogranicza go wielkość czy rozdzielczość.

  Pliki SVG zachowują tę samą jakość i ostrość niezależnie od rozmiaru ekranu, na którym są wyświetlane.

  W praktyce powiększony obraz rastrowy może wydawać się rozmazany, jeśli nie posiada odpowiedniej rozdzielczości, gdyż jego małe piksele są zmuszone do rozszerzenia poza pierwotną wielkość. Natomiast wektorowa charakterystyka SVG sprawia, że nie jest on zależny od pikseli, przez co zawsze jest wyraźny.

W celu dodania zdjęcia na stronę użyjemy elementu <img> (ang. image – obraz).
Element ten nie potrzebuje znacznika zamykającego, jest on tzw. samozamykającym się znacznikiem.
Jednak sam element <img> to za mało, musimy jeszcze dodać źródło, w którym znajduje się nasza grafika.
W tym celu posłużymy się atrybutem src (ang. source – źródło).
Najpierw jednak musimy na dysku serwera zapisać fizyczny plik naszego zdjęcia (np. plik: logo-html5.png zapisany w katalogu images).

Stosujemy następujący kod:

Niezwykle istotne jest, aby element <img> uzupełnić o atrybut alt (ang. alternative – tekst alternatywny).
Jest to tekst opisujący co znajduję się na zdjęciu. Na stronie pojawia się on tylko w momencie, gdy źródło zdjęcia jest niedostępne (np. zostało usunięte). Przydatny jest również dla robotów indeksujących naszą stronę, gdyż roboty te potrafią czytać jedynie tekst.

W ten sposób obrazy indeksowane są w wyszukiwarkach internetowych i możemy ich potem wyszukiwać, np. w zakładce Google Grafika.

Tekst alternatywny, który dodamy do naszego logo będzie brzmiał logo html 5 - przy braku pliku grafiki będzie to wyglądało następująco:

Kolejnym atrybutem, który warto dodać do elementu <img> jest atrybut tytułu zdjęcia – title.
Wyświetlany jest on w momencie, gdy najedziemy myszką na zdjęcie.
Dodajmy go do naszego kodu.

Tytuł, który dodamy do naszego logo będzie brzmiał html 5.

podpis zdjęcia

Podpisu zdjęcia możemy dokonać poprzez zastosowanie dwóch elementów html <figure> (ang. rycina, rysunek) oraz <figcaption> (ang. figure caption – podpis zdjęcia).
Przy pomocy elementu <figure> zaznaczamy elementy, które są samodzielną częścią dokumentu, głównie zdjęcia, rysunki, wykresy.
A następnie wewnątrz elementu <figure> zamieszczamy element <figcaption>, który jest właściwym opisem zdjęcia.