Jak wkleić zdjęcie do HTML? Ścieżka, rozmiar i alt

Masz gotowy plik JPG, PNG albo WebP, ale po otwarciu strony widzisz puste miejsce zamiast grafiki? Dodanie zdjęcia do HTML zwykle wymaga tylko jednego znacznika, jednak znaczenie mają także poprawna ścieżka, opis alternatywny i sposób dopasowania obrazu do ekranu. Pokazuję, jak wkleić zdjęcie do HTML, jak ustawić jego rozmiar oraz co sprawdzić, gdy obraz się nie wyświetla.

Jak wkleić zdjęcie do HTML za pomocą znacznika img

Do dodania grafiki używam elementu . To pusty element HTML, więc nie trzeba dopisywać osobnego znacznika zamykającego. Najprostszy działający przykład wygląda tak:

Atrybut src mówi przeglądarce, gdzie znajduje się plik. Z kolei alt zawiera tekst alternatywny, który może pojawić się zamiast obrazu, gdy plik nie zostanie załadowany. Ten opis jest także ważny dla osób korzystających z czytników ekranu.

Jeżeli zdjęcie pełni wyłącznie funkcję dekoracyjną, można użyć pustego opisu:

Nie wpisuję wtedy do atrybutu alt słów typu „zdjęcie” albo „obrazek”. Lepiej opisać to, co rzeczywiście widać, na przykład „czerwony rower oparty o ścianę”, albo zostawić pustą wartość, gdy grafika niczego nie przekazuje.

Poprawna ścieżka do pliku decyduje o wyniku

Najczęstszy problem nie wynika z błędnego HTML, tylko z tego, że przeglądarka nie może znaleźć pliku. Jeśli dokument znajduje się w folderze projektu, a obraz w podfolderze obrazy, ścieżka powinna wyglądać tak:

Przykładowa struktura plików może być następująca:

projekt/
├── index.html
└── obrazy/
    └── krajobraz.webp

Gdy zdjęcie leży w tym samym folderze co dokument HTML, wystarczy sama nazwa pliku:

Jeżeli plik znajduje się poziom wyżej, używa się zapisu ../:

W praktyce sprawdzam też wielkość liter. Nazwa Krajobraz.jpg może być innym plikiem niż krajobraz.jpg, szczególnie po opublikowaniu strony na serwerze. Unikam również spacji, polskich znaków i bardzo długich nazw plików, bo proste nazwy, takie jak banner-home.webp, znacznie ułatwiają późniejsze poprawki.

Rozmiar zdjęcia bez rozciągania i poziomego przewijania

Sam znacznik wyświetli obraz w jego naturalnych wymiarach. Duże zdjęcie może wtedy wyjść poza ekran telefonu, dlatego do większości stron dodaję prostą regułę CSS:

img {
  max-width: 100%;
  height: auto;
  display: block;
}

max-width: 100% ogranicza szerokość obrazu do szerokości jego kontenera, a height: auto zachowuje proporcje. To bezpieczniejsze niż ustawianie przypadkowej wysokości, która może zdeformować fotografię.

Można także podać naturalne wymiary w HTML:

Takie wartości pomagają przeglądarce wcześniej zarezerwować miejsce na obraz i ograniczyć przesuwanie treści podczas ładowania strony. Nie oznaczają jednak, że grafika zawsze będzie miała dokładnie 1200 pikseli na 800 pikseli. Ostateczny wygląd nadal może zmieniać CSS.

Jeżeli zdjęcie ma wypełniać określony kafelek, przydaje się object-fit: cover. Trzeba wtedy zaakceptować, że część obrazu może zostać przycięta:

.karta img {
  width: 100%;
  height: 220px;
  object-fit: cover;
}

Lepszy opis, podpis i znaczenie zdjęcia

Gdy obraz jest częścią artykułu, a nie tylko ozdobą, warto połączyć go z podpisem za pomocą elementów

Opis alternatywny i podpis nie są tym samym. Alt ma pomóc osobie, która nie widzi obrazu albo nie może go załadować. Podpis może natomiast dodać kontekst wszystkim czytelnikom, na przykład wskazać autora fotografii, miejsce wykonania zdjęcia albo znaczenie przedstawionego elementu.

Zdjęcie może też prowadzić do większej wersji, ale nie każda grafika tego potrzebuje. Ja stosuję takie rozwiązanie głównie przy portfolio, mapach i zrzutach ekranu, gdzie szczegóły są istotne. Przy zwykłym zdjęciu dekoracyjnym dodatkowe powiększenie często tylko komplikuje obsługę na telefonie.

Format obrazu ma wpływ na szybkość strony

HTML nie naprawi pliku, który waży kilka megabajtów. Zdjęcie prosto z aparatu może mieć rozdzielczość znacznie większą, niż potrzebuje strona, dlatego przed dodaniem grafiki zmniejszam jej wymiary i kompresuję plik.

Na stronie z wieloma zdjęciami najczęściej wybieram WebP, a dla ikon i logotypów SVG. Plik JPG nadal jest dobrym wyborem, szczególnie gdy korzysta z niego starszy system albo gotowy CMS, ale nie ma sensu używać go bez kompresji i zmiany rozdzielczości.

Dla dużych grafik umieszczonych daleko pod pierwszym ekranem można dodać loading="lazy":

Nie ustawiam leniwego ładowania dla głównego zdjęcia widocznego od razu po wejściu na stronę. Taki obraz powinien pojawić się możliwie szybko, dlatego opóźnianie go może przynieść odwrotny efekt.

Responsywne obrazy dla różnych ekranów

Jedno zdjęcie w wysokiej rozdzielczości nie zawsze jest najlepszym rozwiązaniem. Telefon nie potrzebuje pliku tak dużego jak monitor, dlatego HTML pozwala wskazać kilka wersji obrazu za pomocą srcset i sizes:

Przeglądarka wybierze wariant odpowiedni do szerokości ekranu i gęstości pikseli. src pozostaje wersją zapasową, a wartości 480w, 800w i 1200w informują o szerokości poszczególnych plików.

Gdy na telefonie i komputerze potrzebne są różne kadry, lepszy będzie element :

Ważne, aby wewnątrz zawsze znajdował się element . Zapewnia on podstawowy obraz, opis alternatywny i bezpieczne rozwiązanie awaryjne.

Co sprawdzić, gdy zdjęcie się nie wyświetla

Jeżeli widzisz pusty obszar albo ikonę uszkodzonego obrazu, przechodzę przez krótką listę kontrolną. W większości przypadków problem znika po poprawieniu jednej literówki.

• Nazwa pliku jest identyczna z nazwą używaną w atrybucie src.
• Rozszerzenie pliku jest prawidłowe, na przykład .jpg, a nie pomyłkowo .jpeg lub .JPG.
• Ścieżka prowadzi do właściwego folderu.
• Obraz nie został przypadkiem zapisany poza katalogiem projektu.
• CSS nie ukrywa grafiki przez display: none, zerową wysokość albo nadmiarowe przycięcie.
• W kodzie nie ma literówki w nazwie atrybutu, na przykład scr zamiast src.

Atrybut alt nie naprawia niedziałającego obrazu. Wyświetlany tekst alternatywny oznacza tylko, że przeglądarka nie mogła pokazać pliku albo użytkownik korzysta z technologii asystującej. W narzędziach deweloperskich można sprawdzić kartę Network i zobaczyć, czy serwer zwraca błąd 404, czyli brak wskazanego pliku.

Od prostego znacznika do dobrej grafiki w HTML

Do zwykłego zdjęcia wystarczy zapis , ale poprawna strona potrzebuje czegoś więcej. Dobra ścieżka, sensowny opis, proporcjonalne skalowanie i lekki format decydują o tym, czy obraz będzie działał równie dobrze na laptopie i telefonie.

Na początek użyłbym lokalnego pliku WebP, dodał opis alternatywny oraz regułę max-width: 100%. Dopiero gdy strona rozrośnie się do większej galerii albo pojawią się różne kadry na mobile i desktopie, warto przejść do srcset i . Taka kolejność pozwala zachować prosty kod bez rezygnowania z szybkości i dostępności.