HTML – IMG

Loading Likes...

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.

  • sizes – atrybut powiązany z srcset (działa tylko w wypadku zadeklarowanego srcset z szerokością w). Musimy podać jakąś zadeklarowane parametry rozdzielczości oraz wielkość z opisową wartością w.
    NP.

    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.

     

     

     

  • 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óżnica pomiędzy nimi jest taka, że używając atrybutu style umożliwiamy zmianę wielkości (nadpisywanie) obrazka w innych stylach np. w sekcji head lub w osobnym pliku podlinkowanym do htmla. Na zadeklarowanie wielkości bezpośrednio przez atrybuty height i width nie możemy wpłynąć przez style.

 

Źródła:
https://css-tricks.com/responsive-images-youre-just-changing-resolutions-use-srcset/
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img

You May Also Like

About the Author: 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" Hobby:
  • Programowanie: Typowy front: HTML/JS/CSS Do tego: Vue/Vuex/Nuxt/Angular/
  • Rozwój osobisty
  • siatkówka (GeoVolley Team) na pozycji środkowego
  • 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 bardziej wejść w szczegóły kadrów, ujęć itd.
  • Psychologia - niestety wciąż mam zbyt mało czasu na zagłębianie się w tą wiedzę :(

Dodaj komentarz

Twój adres email nie zostanie opublikowany. Pola, których wypełnienie jest wymagane, są oznaczone symbolem *

Facebook
Inline
Inline