Wymiary obrazków (width, height)

Lekcja 6.2: Wymiary obrazków (width, height)

Strona główna > Rozdział 6: Obrazki > Wymiary obrazków (width, height)

Kontrolowanie rozmiaru obrazków

Domyślnie przeglądarka wyświetla obrazek w jego oryginalnych wymiarach. Często jednak chcemy dostosować rozmiar obrazka, aby lepiej pasował do układu strony. W HTML można to zrobić za pomocą atrybutów width (szerokość) i height (wysokość) znacznika <img>.

Atrybuty `width` i `height`

Atrybuty te przyjmują wartości liczbowe, które domyślnie interpretowane są jako piksele (px). Określają one szerokość i wysokość, z jaką obrazek ma zostać wyświetlony na stronie.

<!-- Oryginalny obrazek ma np. 600x400 pikseli -->

<!-- Wyświetlenie z szerokością 300px (wysokość przeskaluje się proporcjonalnie, jeśli podano tylko jeden wymiar) -->
<img src="obrazek.jpg" alt="Opis obrazka" width="300">

<!-- Wyświetlenie z wysokością 100px (szerokość przeskaluje się proporcjonalnie) -->
<img src="obrazek.jpg" alt="Opis obrazka" height="100">

<!-- Wyświetlenie z konkretnymi wymiarami 150x75px (uwaga na proporcje!) -->
<img src="obrazek.jpg" alt="Opis obrazka" width="150" height="75">

Obrazek przeskalowany do szerokości 150px:

Obrazek przeskalowany do wysokości 50px:

Obrazek przeskalowany do 100x100px (zniekształcony):

Zachowanie proporcji

Podanie tylko jednego wymiaru (width LUB height): Przeglądarka automatycznie przeskaluje drugi wymiar, zachowując oryginalne proporcje obrazka. Jest to zazwyczaj zalecane podejście, aby uniknąć zniekształceń.
Podanie obu wymiarów (width I height): Obrazek zostanie wyświetlony dokładnie w podanych wymiarach. Jeśli podane wymiary nie zachowują oryginalnych proporcji obrazka, zostanie on zniekształcony (rozciągnięty lub ściśnięty). Należy tego unikać, chyba że taki efekt jest zamierzony.

Znaczenie podawania wymiarów w HTML

Jak wspomniano w poprzedniej lekcji, podawanie atrybutów width i height w HTML (nawet jeśli później nadpisujemy je w CSS) jest dobrą praktyką, ponieważ pozwala przeglądarce zarezerwować odpowiednią przestrzeń na stronie dla obrazka jeszcze przed jego załadowaniem. Dzięki temu układ strony nie "przeskakuje", gdy obrazki się ładują, co znacząco poprawia doświadczenie użytkownika (redukuje CLS - Cumulative Layout Shift).

Przeglądarka, znając wymiary z atrybutów HTML, może obliczyć proporcje obrazka (aspect ratio) i zarezerwować odpowiednie miejsce.

Wymiary w CSS vs. Wymiary w HTML

Obecnie preferowaną metodą kontrolowania wymiarów obrazków, zwłaszcza w kontekście responsywnych stron internetowych (RWD), jest użycie CSS. Style CSS mają wyższy priorytet niż atrybuty HTML width i height.

<!-- Atrybuty HTML sugerują rozmiar 200x100 -->
<img src="logo.png" alt="Logo" width="200" height="100" style="width: 150px; height: auto;">

W powyższym przykładzie, mimo atrybutów HTML, obrazek zostanie wyświetlony z szerokością 150px (a wysokość dostosuje się automatycznie dzięki height: auto; w CSS), ponieważ style CSS nadpisują atrybuty HTML.

Typowe podejście w responsywnym designie to ustawienie w CSS:

img {
  max-width: 100%; /* Obrazek nie będzie szerszy niż jego kontener */
  height: auto;   /* Wysokość dostosuje się automatycznie, zachowując proporcje */
}

Ta reguła sprawia, że obrazki skalują się płynnie wraz ze zmianą szerokości okna przeglądarki lub kontenera, w którym się znajdują, ale nigdy nie stają się szersze niż ich oryginalny rozmiar (jeśli nie użyjemy width: 100%; zamiast max-width: 100%;).

Mimo używania CSS do responsywności, nadal warto podawać width i height w HTML, aby przeglądarka mogła zarezerwować miejsce.

Jednostki inne niż piksele

Atrybuty HTML width i height akceptują tylko wartości liczbowe interpretowane jako piksele. Jeśli chcesz używać innych jednostek (np. procentów %, jednostek viewportu vw), musisz użyć CSS.

<!-- Użycie procentów - tylko w CSS -->
<img src="baner.jpg" alt="Baner" style="width: 100%; height: auto;">

Zadanie praktyczne (z rozwiązaniem)

Zadanie: Umieść ten sam obrazek na stronie dwa razy. Pierwszy raz ustaw mu szerokość na 200px za pomocą atrybutu HTML. Drugi raz ustaw mu wysokość na 50px za pomocą atrybutu HTML. Zaobserwuj, jak przeglądarka zachowuje proporcje.

Rozwiązanie:

<!DOCTYPE html>
<html lang="pl">
<head>
    <meta charset="UTF-8">
    <title>Wymiary Obrazków</title>
</head>
<body>
    <h1>Testowanie wymiarów obrazków</h1>
    
    <h2>Obrazek z width="200"</h2>
    <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/3/3f/Placeholder_view_vector.svg/638px-Placeholder_view_vector.svg.png" 
         alt="Placeholder" 
         width="200">
         
    <h2>Obrazek z height="50"</h2>
    <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/3/3f/Placeholder_view_vector.svg/638px-Placeholder_view_vector.svg.png" 
         alt="Placeholder" 
         height="50">

</body>
</html>

Dodatkowe zadania do samodzielnego wykonania:

Umieść obrazek i nadaj mu atrybuty width i height, które celowo zniekształcą jego proporcje.
Umieść obrazek z atrybutami width i height w HTML, a następnie nadpisz te wymiary za pomocą stylów CSS (np. style="width: 50%; height: auto;").
Stwórz prostą galerię obrazków (kilka obrazków obok siebie) i użyj CSS (np. max-width: 100%; height: auto;), aby były responsywne.

Najczęściej zadawane pytania

Jak ustawić rozmiar obrazka w HTML?

Rozmiar obrazka można ustawić za pomocą atrybutów width (szerokość) i height (wysokość) znacznika <img>. Wartości podaje się w pikselach. Zaleca się podawanie tylko jednego wymiaru, aby przeglądarka zachowała proporcje.

Czy lepiej ustawiać wymiary w HTML czy CSS?

Do precyzyjnej kontroli wyglądu i responsywności zaleca się używanie CSS. Jednak podawanie atrybutów width i height w HTML jest dobrą praktyką, ponieważ pomaga przeglądarce zarezerwować miejsce na obrazek, zapobiegając przesuwaniu się układu strony.

Co się stanie, jeśli podam złe proporcje w width i height?

Jeśli podasz oba atrybuty (width i height) i nie zachowają one oryginalnych proporcji obrazka, obrazek zostanie zniekształcony (rozciągnięty lub ściśnięty), aby dopasować się do podanych wymiarów.

Jak zrobić, żeby obrazek był responsywny?

Najprostszym sposobem na responsywne obrazki jest użycie CSS: ustawienie max-width: 100%; oraz height: auto; dla znacznika img. Sprawi to, że obrazek będzie się skalował wraz z kontenerem, nie przekraczając swojej oryginalnej szerokości.

Dlaczego podawanie wymiarów w HTML jest ważne dla CLS?

Podanie width i height w HTML pozwala przeglądarce obliczyć proporcje obrazka i zarezerwować dla niego odpowiednią przestrzeń jeszcze przed załadowaniem. Zapobiega to "skakaniu" layoutu (Cumulative Layout Shift - CLS), gdy obrazek się pojawi.