W dzisiejszym świecie cyfrowym, multimedia, takie jak fotografie, grafiki informacyjne i nagrania wideo, odgrywają fundamentalną rolę w procesie rozwoju. Należy jednak pamiętać, że wielkość obrazów ma istotny wpływ na sprawność działania aplikacji i jej ogólną użyteczność.
HTML, czyli hipertekstowy język znaczników, jest najpopularniejszym narzędziem do projektowania i konstruowania struktury stron internetowych. Jako programista masz możliwość włączania do swojego dokumentu HTML różnorodnych elementów wizualnych, takich jak fotografie produktów, znaki firmowe i inne grafiki, co znacząco podnosi komfort użytkowania i atrakcyjność wizualną strony.
Aby jednak aplikacja działała z optymalną wydajnością, konieczna jest modyfikacja wielkości i odpowiednia optymalizacja obrazów. W niniejszym artykule przybliżę znaczenie zmiany rozmiaru grafik, różne metody dokonywania tego w HTML oraz przedstawię sprawdzone praktyki.
Dlaczego zmiana rozmiaru obrazów w HTML jest tak istotna?
Zmiana rozmiaru obrazu polega na jego powiększaniu lub pomniejszaniu. Standardowo, fotografie są zapisywane w różnych formatach i mogą pochodzić od fotografów, z różnego rodzaju wydarzeń, od projektantów lub z zasobów internetowych.
Można ulec pokusie, aby wykorzystywać grafiki w ich oryginalnych rozmiarach. Jednak w większości przypadków nie jest to zalecane. Poniżej przedstawiam kilka powodów, dla których warto dostosowywać rozmiar obrazów w kodzie HTML:
- Szybkość ładowania strony: Mimo że elementy graficzne w oczywisty sposób poprawiają odbiór strony przez użytkownika, duże pliki graficzne mogą negatywnie wpływać na czas jej wczytywania. Optymalizacja tych elementów sprawi, że strona będzie uruchamiała się znacznie szybciej.
- Responsywność witryny: Strony internetowe i aplikacje są odwiedzane przez osoby korzystające z różnorodnych urządzeń. Dostosowanie rozmiaru obrazów sprawia, że witryna jest prawidłowo wyświetlana na urządzeniach mobilnych, komputerach stacjonarnych i tabletach.
- Wykorzystanie transferu danych: Większość firm hostingowych limituje transfer danych w oferowanych pakietach hostingowych. Poprzez optymalizację grafik można zaoszczędzić cenne miejsce na serwerze, które można wykorzystać na publikację innych rodzajów treści.
- Pozycjonowanie (SEO): Szybkość ładowania strony jest jednym z kluczowych czynników rankingowych branych pod uwagę przez algorytmy wyszukiwarek. Poprzez zmianę rozmiaru obrazów i przyspieszenie ładowania strony, można poprawić jej pozycję w wynikach wyszukiwania.
- Oszczędność pamięci: Rozmiar przestrzeni dyskowej jest ważnym aspektem przy wyborze firmy hostingowej. Przesyłanie dużych, wysokiej rozdzielczości zdjęć może zajmować sporo miejsca na serwerach.
- Poprawa doświadczenia użytkownika: Użytkownicy nie powinni być zmuszeni do długiego czekania, aż obrazki załadują się na stronie. Optymalizacja obrazów pozwala na ich szybkie wyświetlenie, wraz z resztą treści strony.
Poniżej omówię różne metody zmiany rozmiaru obrazów w kodzie HTML.
Wykorzystanie atrybutów HTML
Możemy stworzyć prostą aplikację, która pokaże, jak zmieniać wielkość obrazów. W tym celu wykorzystam zdjęcia z serwisu Pixabay. Posłużę się tym konkretnym obrazem. Możesz go pobrać i dodać do swojego projektu, aby łatwiej śledzić demonstrację.
Oto przykładowy kod HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="Opis twojej strony internetowej">
<meta name="keywords" content="słowa, kluczowe, tutaj">
<meta name="author" content="Twoje Imię">
<title>Zmiana rozmiaru obrazów HTML</title>
</head>
<body>
<h1>Mój kot</h1>
<img src="https://wilku.top/how-to-resize-image-in-html-and-scale-up-your-web-design/images/cat-2536662_1280.jpg" >
</body>
</html>
Gdy wyświetlimy oryginalny obraz bez zmiany jego rozmiaru, zajmuje on całą szerokość strony i nie jest nawet w pełni widoczny.
Możemy przypisać kotu wysokość 175 pikseli i szerokość 300 pikseli.
Modyfikujemy nasz kod w tagu <img> w następujący sposób:
<img src="https://wilku.top/how-to-resize-image-in-html-and-scale-up-your-web-design/images/cat-2536662_1280.jpg" width="300" height="175">
Teraz obraz jest widoczny i odpowiednio dopasowany.
Wykorzystanie stylów CSS
Zamiast stosować style bezpośrednio w kodzie HTML, jak zrobiliśmy w poprzednim przykładzie, możemy utworzyć oddzielny arkusz stylów. Tworzymy plik o nazwie style.css. W sekcji <head> naszego dokumentu HTML umieszczamy tag <link> aby połączyć nasz arkusz stylów z dokumentem HTML.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="Opis twojej strony internetowej">
<meta name="keywords" content="słowa, kluczowe, tutaj">
<meta name="author" content="Twoje Imię">
<title>Zmiana rozmiaru obrazów HTML</title>
<link rel="stylesheet" href="https://wilku.top/how-to-resize-image-in-html-and-scale-up-your-web-design/styles.css">
</head>
<body>
<h1>Mój kot</h1>
<img src="https://wilku.top/how-to-resize-image-in-html-and-scale-up-your-web-design/images/cat-2536662_1280.jpg" >
</body>
</html>
Teraz możemy dodać reguły stylizacji dla naszego obrazu w pliku style.css. Oto nasz kod:
img {
width:300px;
height:200px
}
Wyrenderowany obraz będzie prezentował się następująco:
Użyliśmy selektora <img>, aby odwołać się do naszego obrazu w dokumencie HTML. Nadaliśmy mu szerokość 300 pikseli i wysokość 200 pikseli.
Wykorzystanie wartości procentowych
W poprzednim przykładzie do zmiany rozmiaru obrazu wykorzystaliśmy piksele (px). Do optymalizacji obrazu możemy również użyć wartości procentowych. Przykładowo, możemy ustawić szerokość i wysokość obrazu na 65%.
Wykorzystujemy nasz wcześniejszy kod HTML. Usuńmy jednak zawartość pliku style.css i wstawmy do niego poniższy kod:
img {
width:65%;
height:65%
}
Po wyrenderowaniu obrazu, otrzymamy następujący rezultat:
Dostosowanie rozmiaru obrazów do projektu responsywnego
Dobry projekt graficzny powinien dostosowywać się do różnych rozmiarów ekranów. Możemy także zoptymalizować obraz, aby pasował do różnych rozdzielczości. Używając tego samego kodu HTML, dodajemy ten kod do naszego pliku style.css:
img {
max-width: 100%;
height: auto;
}
Właściwość `max-width: 100%` zapewnia, że obraz nigdy nie przekroczy szerokości kontenera, w którym się znajduje. Dzięki temu obraz będzie automatycznie zmniejszany na mniejszych ekranach.
Właściwość `height: auto` sprawia, że proporcje obrazu są zachowywane podczas jego skalowania.
Zachowanie proporcji
W projektowaniu stron internetowych stosunek proporcji (ang. aspect ratio) to proporcjonalna relacja między wysokością a szerokością obrazu. Zachowanie odpowiednich proporcji podczas zmiany rozmiaru obrazów jest gwarancją spójności wizualnej – unikamy zniekształceń obrazów i zapewniamy ich właściwe wyświetlanie na różnych ekranach.
Wykorzystamy ten sam kod HTML, aby zademonstrować, jak zachować proporcje podczas zmiany rozmiaru naszych obrazów.
Dodajmy ten kod do pliku style.css:
img {
width: 300px;
height: auto;
}
Użyliśmy selektora `img`, aby odwołać się do naszego obrazu w dokumencie HTML. Ustawiliśmy szerokość na 300 pikseli. Właściwość `height: auto` pozwala przeglądarce automatycznie obliczyć wysokość obrazu, zachowując jego oryginalne proporcje. Dzięki temu obraz nie będzie rozciągany podczas wyświetlania na ekranach o różnych rozmiarach.
Zmiana rozmiaru obrazów tła
Można osadzić grafiki w elementach, które będą pełniły funkcję tła. Zmiana rozmiaru obrazu tła gwarantuje, że będzie on prawidłowo dopasowany do kontenera. Poniżej przedstawiam przykładowy dokument HTML z akapitem tekstu:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="Opis twojej strony internetowej">
<meta name="keywords" content="słowa, kluczowe, tutaj">
<meta name="author" content="Twoje Imię">
<title>Zmiana rozmiaru obrazów HTML</title>
<!-- Link do zewnętrznego pliku CSS -->
<link rel="stylesheet" href="https://wilku.top/how-to-resize-image-in-html-and-scale-up-your-web-design/styles.css">
</head>
<body>
<div class="container">
<div class="text">
<p>To jest zdjęcie naszego kota</p>
</div>
</div>
</body>
</html>
Teraz dodajemy obraz tła za pomocą pliku style.css.
.container {
position: relative;
text-align: center;
color: #ffffff;
padding: 100px;
background-image: url("https://wilku.top/how-to-resize-image-in-html-and-scale-up-your-web-design/images/cat-2536662_1280.jpg");
background-position: center;
width: 75%;
}
.text {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
font-size: 24px;
color: orangered;
}
Obraz tła został dodany wyłącznie za pomocą CSS. Utworzyliśmy kontener z wyśrodkowanym tekstem i tłem przedstawiającym kota.
Dostępnych jest wiele narzędzi do zmiany rozmiaru i optymalizacji obrazów. Niektóre oferują tylko funkcję zmiany rozmiaru, inne pozwalają na przechowywanie obrazów i wyświetlanie ich w kodzie HTML za pomocą adresu URL.
Cloudinary to przykład narzędzia, które zmienia rozmiar obrazu na serwerze przed jego dostarczeniem użytkownikowi. Narzędzie to służy do automatycznego dostosowywania rozmiaru obrazów bez negatywnego wpływu na szybkość działania strony.
Praktyczne wskazówki dotyczące zmiany rozmiaru obrazów w HTML
Pomimo że omówiliśmy już różne podejścia do zmiany rozmiaru obrazów w HTML, aby uzyskać najlepsze rezultaty, zawsze należy trzymać się poniższych zasad:
- Unikaj stylizacji w kodzie HTML: Możesz ulec pokusie, aby szybko ostylować obraz w kodzie HTML i przejść do kolejnych elementów. Niestety, takie podejście może negatywnie wpłynąć na szybkość ładowania strony. Zawsze używaj osobnego arkusza CSS, dzięki czemu twój kod będzie łatwiejszy do czytania i utrzymania.
- Wykorzystaj atrybuty `width` i `height`: Pamiętaj, aby określić szerokość i wysokość obrazów. Takie podejście nakazuje przeglądarce zarezerwowanie odpowiedniej przestrzeni na obraz w trakcie ładowania strony.
- Dobierz odpowiednie formaty obrazów: Obrazy dostępne są w różnych formatach, takich jak JPEG, PNG i SVG. Przykładowo, format PNG idealnie nadaje się do przezroczystych obrazów, a SVG do logotypów.
- Zadbaj o responsywność obrazów: Nigdy nie wiadomo, na jakich urządzeniach odwiedzający będą przeglądali twoją stronę. Zawsze optymalizuj grafiki pod kątem różnych rozmiarów ekranów, aby zagwarantować spójne wrażenia wizualne.
- Optymalizuj rozmiary plików: Zdjęcia w wysokiej jakości i surowym formacie mogą mieć duże rozmiary. Takie pliki zajmują sporo miejsca na serwerze i spowalniają wczytywanie strony. Możesz zmniejszyć rozmiar obrazów za pomocą różnych narzędzi bez pogorszenia ich jakości.
Podsumowanie
Zmiana rozmiaru obrazów w HTML podnosi komfort użytkowania strony, czyni ją responsywną i pozwala zaoszczędzić miejsce na serwerze. Przedstawiłem kilka metod zmiany rozmiaru obrazów w HTML.
Mimo że wszystkie te metody są skuteczne, osobiście preferuję używanie właściwości CSS w osobnym pliku do zmiany rozmiaru obrazów. Czasem jednak, w przypadku niewielkich aplikacji i kilku obrazów, dodanie stylu bezpośrednio w kodzie HTML może być uzasadnione.
Zachęcam także do lektury naszego artykułu poświęconego zasobom CSS, aby lepiej zrozumieć ten język stylizacji.