Dzisiaj zajmiemy się dodawaniem obrazków na naszej stronie. Sprawa jest bardzo prosta, ale jest kilka nowości w HTML5, które także poruszę w temacie. Skupimy się również na bardzo ważnych detalach tego znacznika, które z niewiedzy mogą was pogrążyć i zapewnić wam dłuższą rozrywkę w poszukiwaniu błędów. 😉
Mały skrót:

1. Tag <img>
2. Atrybuty
3. Wspierane formaty obrazków
4. Tag <map> i <area>
5. Sposoby definiowania wielkości obrazka – różnice

Zaczynamy!

 1. IMG to skrót od ang. image (obraz). Ten tag nie ma tagu zamykającego.

2. Przejdźmy do nieco ciekawszego tematu. Podzielimy je na dwie grupy: wymagane(preferowane) i resztę atrybutów, które tag img może przyjmować.

Wymagane:

• src – ten atrybut pozwala zlokalizować nasz obrazek. Tutaj możemy podawać link do jakiegoś obrazka z internetu lub obrazka zlokalizowanego na naszym komputerze. Nasza strona “poszukuje” naszego obrazka lokalnie w tym samym folderze, co nasz plik html. Src to skrót słowa source – źródło. Pamiętajmy, że parametry atrybutów należy umieszczać w “”. Dodatkowo należy ZAWSZE pamiętać o rozszerzeniu naszego obrazka.
• alt – w przypadku kiedy z jakiegoś powodu obrazek nie może być wyświetlony(obrazek nie został pobrany, podana ścieżka do pliku jest zła, format obrazka jest nieobsługiwany), pojawia się napis właśnie zawarty w atrybucie alt. Czyli jest to taki opis dla obrazka, który jest niezwykle ważny zwłaszcza, jeśli ze strony korzysta osoba niewidoma.
• width i height – istnieje kilka sposobów definiowania wielkości obrazka, więcej o tym w kolejnych punktach

Inne:

• usemap – atrybut ten wskazuje na nazwę mapy, która ma być użyta (tagu <map>). Nazwę podajemy poprzedzając znakiem #. Ten atrybut nie może być użyty do obrazków, które są dziećmi tagu <a> lub w przyciskach <button>.
• srcset – atrybut ten pozwala na podanie ścieżek do tego samego obrazka tylko o innych parametrach np. innej rozdzielczości, wielkości itd. Ścieżki rozdzielamy przecinkami, a na końcu podajemy szerokość obrazka oraz literę w (wide – szeroki). Możemy również wzamian zadeklarować czy obrazek ma być wyświetlany na wyświetlaczu typu retina 2x lub non-retina 1x.
  NP.
  
  Przykład deklarowania obrazków z atrybutem srcset

  XHTML

  <img srcset="obrazek-noRetina.jpg 1x, obrazek-retina.jpg 2x"> <img srcset="obrazek-noRetina.jpg 200x, obrazek-retina.jpg 1000w">

  1 2	<img srcset="obrazek-noRetina.jpg 1x, obrazek-retina.jpg 2x"> <img srcset="obrazek-noRetina.jpg 200x, obrazek-retina.jpg 1000w">

  
  
  Przykład deklarowania obrazków z atrybutem srcset

  XHTML

  <img src="obrazek-noRetina.jpg srcset="obrazek-retina.jpg x2">

  1	<img src="obrazek-noRetina.jpg srcset="obrazek-retina.jpg x2">

• sizes – atrybut powiązany z srcset (działa tylko w wypadku zadeklarowanego srcset z szerokością w). Musimy podać jakieś zadeklarowane parametry rozdzielczości oraz wielkość z opisową wartością w.
  NP.
  
  <img src="obrazek-100.jpg" srcset="obrazek-800.jpg 800w" sizes="(max-width:600px) 100px, 800px">

  1	<img src="obrazek-100.jpg" srcset="obrazek-800.jpg 800w" sizes="(max-width:600px) 100px, 800px">

  
  Przykład powyżej mówi nam, że mamy obrazek, który przy szerokości ekranu do 600px będzie wyświetlany ze źródła obrazek-100.jpg, natomiast przy większej szerokości niż 600px, obrazek będzie wyświetlany ze źródła obrazek-800.jpg (upraszczając tylko do jednego warunku – w praktyce jest to troche bardziej skomplikowane i warunków do wyśwetlania odpowiedniej wersji jest więcej).

   

   

   

• longdesc – atrybut z linkiem do obszerniejszego opisu danego obrazka

3. Wspierane formaty to:

• jpeg
• gif
• png
• apng
• svg
• bmp
• bmp ico
• png ico

4. Tagi <map> oraz <area> to bardzo ciekawy sposób na interaktywne obrazki na naszej stronie. Dzięki nim możemy zaznaczyć obszary na obrazku, dzięki którym wyświetlony zostanie inny obraz. Możemy w ten sposób uzyskać np. efekt powiększenia, zbliżenia.

<map> – przyjmuje jeden atrybut name=””, w którym wpisujemy wybraną nazwę. Dzięki niej możemy podać referencję do atrybutu usemap.

<area> – to dziecko tagu <map> i w nim definiujemy obszar referencyjny tzn. obszar, który po kliknięciu otworzy nam inny obraz. Z tego względu przyjmuje kilka atrybutów: shape (podajemy angielskie nazwy figur np. rectangle, circle), coords (koordynaty, które pozwalają nam zdefiniować wielkość obszaru <area>, alt (w celu takim samym jak w tagu img), href ( ścieżka do obrazka). Poniżej umieszczam link do przykładu:
Przykład użycia map i area

5. Są dwa sposoby na definiowanie wielkości obrazka w tagu img. Poniżej postaram się wyjaśnić różnicę, która jest dość znacząca.

– w atrybucie style – czyli po prostu definiujemy style bezpośrednio w tagu img

– atrybuty height i width – umieszczamy wielkości w atrybutach tagu img, odpowiednio height(wysokość) oraz width(szerokość)

Źródła:

Responsive Images: If you’re just changing resolutions, use srcset.

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img

Sebastian Mieszczańczyk

Studia: Wyższa Szkoła Ekonomii i Informatyki w Krakowie
Profil: “Informatyka i Ekonometria”
Specjalizacja: “Programowanie urządzeń mobilnych i aplikacji sieciowych”
Siatkówka (GeoVolley Team) na pozycji środkowego
Hobby:
Oprócz programowania i wszystkiego co z tym związane…
Filmy – od dawna pasjonuję się nie tylko oglądaniem filmów, ale także analizowaniem ich pod kątem stworzenia ( Mój link do filmweba) – w liceum dzięki profilowi z modułem filmowym mogłem wejść głębiej w szczegóły kadrów, ujęć itd.
Psychologia – niestety wciąż mam zbyt mało czasu na zagłębianie się w tą wiedzę 🙁