Rozmiar wyświetlania obrazu w HTML

Słownik kwalifikacji INF.03 - Tworzenie i administrowanie stronami i aplikacjami internetowymi oraz bazami danych

Rozmiar wyświetlania obrazu to wymiary, w jakich grafika jest pokazana na stronie internetowej. Można je ustawić np. atrybutami width i height w znaczniku <img> albo właściwościami CSS.

Najważniejsza zasada

Zmiana rozmiaru wyświetlania nie zmienia pliku graficznego. Oznacza to, że nie zmienia się:

  • liczba pikseli zapisana w pliku,
  • rozdzielczość obrazu,
  • stopień kompresji,
  • waga pliku na dysku lub serwerze.

Przeglądarka tylko skaluje obraz podczas wyświetlania.

Przykład HTML

<img src="zdjecie.jpg" width="300" height="200" alt="Zdjęcie">

Jeżeli plik zdjecie.jpg ma rzeczywisty rozmiar 3000 × 2000 px i waży 4 MB, to po wpisaniu width="300" nadal waży 4 MB. Zmienia się tylko sposób prezentacji w przeglądarce.

Znaczenie praktyczne

Zmniejszenie obrazu tylko w HTML nie przyspiesza pobierania pliku, bo użytkownik nadal musi pobrać oryginalną grafikę. Dla optymalizacji strony należy przygotować mniejszy plik graficzny lub użyć odpowiednich wersji obrazów, np. przez srcset.

W egzaminie

Jeśli pytanie dotyczy operacji, która nie zmieni rozmiaru/wagi pliku graficznego, poprawną odpowiedzią jest zmiana rozmiaru wyświetlania w HTML.