Używamy cookies, żeby zwiększyć Twoje doświadczenia na stronie

Logowanie/Rejestracja->

Optymalizacja obrazów

Od samego początku dobrze zadbać o elementy, które mogą być ogromne i nie zmieszczą się na urządzeniach mobilnym.

Możemy uniemożliwić wyświetlanie obrazów szerszych niż szerokość ekranu:

1img {
2  max-width: 100%;
3}

W przypadku kiedy obraz ma 500px szerokości, a rozmiar tabletu 767px obraz zobaczymy w oryginalnym rozmiarze. W przypadku kiedy obraz ma 500px szerokośći, a rozmiar telefonu 320px - obraz będzie wyświetlał się posiadając szerokość 320px.

Alternatywą do

max-width

jest

max-height

. Istnieją również odpowiedniki:

min-width

jest

min-height

Dobrze jest nie ustalać wysokości sekcji i divów używając height, a lepiej

min-height

. Kiedy mamy w sekcji trzy kolumny będziemy dążyć do tego żeby jedna wyświetliła się pod drugą. Starajmy się nie ustawiać stałej wysokości rodzica.

Atrybut srcset w HTML5 pozwala określić różne wersje obrazu dla różnych rozdzielczości ekranu. Przeglądarka automatycznie wybierze odpowiedni obraz w zależności od rozmiaru ekranu i gęstości pikseli.

1<img  srcset="image-small.jpg 500w,
2             image-medium.jpg 1000w,
3             image-large.jpg 1500w"
4      src="image-medium.jpg" alt="Przykładowy obraz">

Tag <picture>

Za pomocą tagu <picture> możemy zdecydować z poziomu HTML jaki obrazek wczytamy w danej szerokości:

1<picture>
2  <source media="(min-width: 960px)" srcset="image-large.jpg">
3  <source media="(min-width: 575px)" srcset="image-medium.jpg">
4  <img src="image-small.jpg" alt="image">
5</picture>

Nasz element picture posiada source z atrybutem media i regułą media queries (o tym za chwilę).

Dla przedziału powyżej 960px wyświetlimy image-large.jpg. Dla przedziału powyżej 575px wyświetlimy image-medium.jpg. Przedział, który nie sprełnia powyżysz warunków to przedział poniżej 575px - w takim przypadku wyświetlimy image-small.jpg.qwe spełnia

3. Kompresja i Optymalizacja Formatu

Przed wrzuceniem obrazów na stronę, zaleca się ich skompresowanie. Istnieją narzędzia i serwisy online, które mogą pomóc w tym zadaniu. Wybór odpowiedniego formatu obrazu, takiego jak JPEG, PNG, lub nowsze formaty jak WebP, może również wpłynąć na rozmiar pliku.

Warto wiedzieć, że elementy wektorowe nie tracą jakości przy skalowaniu. Mała ikona na stronie może zostać przeskalowana jako reklama wieżowca. Skalując obrazy jpg, png (bitmapa) do ogromych rozmiarów otrzymamy widoczne piksele: img

Zadanie: Optymalizacja Obrazów na Stronie WWW

W tym zadaniu nauczysz się, jak efektywnie zarządzać obrazami na stronie internetowej, aby poprawić jej wydajność i responsywność. Zastosujemy różne techniki, takie jak używanie właściwości CSS, atrybutów HTML oraz tagu

<picture>

, aby dostosować obrazy do różnych urządzeń i rozdzielczości ekranów.

Krok 1: Stwórz podstawową strukturę dokumentu HTML

Utwórz nowy plik HTML i dodaj podstawową strukturę dokumentu HTML. Dodaj kilka obrazów w różnych sekcjach strony.

1<!DOCTYPE html>
2<html lang="pl">
3<head>
4  <meta charset="UTF-8">
5  <meta name="viewport" content="width=device-width, initial-scale=1.0">
6  <link rel="stylesheet" href="styles.css"> <!-- Podłącz plik CSS -->
7  <title>Optymalizacja Obrazów</title>
8</head>
9<body>
10  <header class="header">
11    <h1>Galeria Obrazów</h1>
12  </header>
13  <main class="main">
14    <section class="gallery">
15      <h2>Obrazy z atrybutem srcset</h2>
16      <img srcset="image-small.jpg 500w, image-medium.jpg 1000w, image-large.jpg 1500w"
17           src="image-medium.jpg" alt="Przykładowy obraz">
18    </section>
19    <section class="gallery">
20      <h2>Obrazy z użyciem tagu <picture></h2>
21      <picture>
22        <source media="(min-width: 960px)" srcset="image-large.jpg">
23        <source media="(min-width: 575px)" srcset="image-medium.jpg">
24        <img src="image-small.jpg" alt="Przykładowy obraz">
25      </picture>
26    </section>
27  </main>
28  <footer class="footer">
29    <p>&copy; 2023 Galeria Obrazów. Wszelkie prawa zastrzeżone.</p>
30  </footer>
31</body>
32</html>

Krok 2: Stwórz plik CSS

Otwórz lub utwórz nowy plik CSS i zapisz go jako

styles.css

Krok 3: Stylizacja podstawowa

Dodaj podstawowe style dla elementów

.header

.main

.gallery

.footer

1body {
2  font-family: Arial, sans-serif;
3  margin: 0;
4  padding: 0;
5  background-color: #f0f0f0;
6}
7
8.header {
9  background-color: #333;
10  color: #fff;
11  padding: 20px;
12  text-align: center;
13}
14
15.main {
16  padding: 20px;
17}
18
19.gallery {
20  margin-bottom: 40px;
21}
22
23img {
24  max-width: 100%;
25  height: auto;
26}
27
28.footer {
29  background-color: #333;
30  color: #fff;
31  text-align: center;
32  padding: 10px;
33}

Krok 4: Dodaj Kompresję i Optymalizację Formatów Obrazów

Przed umieszczeniem obrazów na stronie, skompresuj je i zapisz w odpowiednich formatach, takich jak JPEG, PNG, lub WebP. Możesz użyć narzędzi online, takich jak TinyPNG, ImageOptim, lub Squoosh, aby zoptymalizować rozmiar plików obrazów bez znaczącej utraty jakości.

Przykłady zastosowania:

Atrybut srcset:

1<img srcset="image-small.jpg 500w,
2             image-medium.jpg 1000w,
3             image-large.jpg 1500w"
4      src="image-medium.jpg" alt="Przykładowy obraz">

Tag <picture>:

1<picture>
2  <source media="(min-width: 960px)" srcset="image-large.jpg">
3  <source media="(min-width: 575px)" srcset="image-medium.jpg">
4  <img src="image-small.jpg" alt="Przykładowy obraz">
5</picture>

Krok 5: Dodaj Elementy Wektorowe

Używaj elementów wektorowych, takich jak SVG, kiedy to możliwe, aby obrazy były skalowalne bez utraty jakości. Dodaj przykładowy plik SVG do sekcji.

1<section class="gallery">
2  <h2>Obraz wektorowy SVG</h2>
3  <img src="example.svg" alt="Przykładowy obraz wektorowy">
4</section>

Plik HTML (index.html) - Finalna wersja:

1<!DOCTYPE html>
2<html lang="pl">
3<head>
4  <meta charset="UTF-8">
5  <meta name="viewport" content="width=device-width, initial-scale=1.0">
6  <link rel="stylesheet" href="styles.css"> <!-- Podłącz plik CSS -->
7  <title>Optymalizacja Obrazów</title>
8</head>
9<body>
10  <header class="header">
11    <h1>Galeria Obrazów</h1>
12  </header>
13  <main class="main">
14    <section class="gallery">
15      <h2>Obrazy z atrybutem srcset</h2>
16      <img srcset="image-small.jpg 500w, image-medium.jpg 1000w, image-large.jpg 1500w"
17           src="image-medium.jpg" alt="Przykładowy obraz">
18    </section>
19    <section class="gallery">
20      <h2>Obrazy z użyciem tagu <picture></h2>
21      <picture>
22        <source media="(min-width: 960px)" srcset="image-large.jpg">
23        <source media="(min-width: 575px)" srcset="image-medium.jpg">
24        <img src="image-small.jpg" alt="Przykładowy obraz">
25      </picture>
26    </section>
27    <section class="gallery">
28      <h2>Obraz wektorowy SVG</h2>
29      <img src="example.svg" alt="Przykładowy obraz wektorowy">
30    </section>
31  </main>
32  <footer class="footer">
33    <p>&copy; 2023 Galeria Obrazów. Wszelkie prawa zastrzeżone.</p>
34  </footer>
35</body>
36</html>

Plik CSS (styles.css) - Finalna wersja:

1body {
2  font-family: Arial, sans-serif;
3  margin: 0;
4  padding: 0;
5  background-color: #f0f0f0;
6}
7
8.header {
9  background-color: #333;
10  color: #fff;
11  padding: 20px;
12  text-align: center;
13}
14
15.main {
16  padding: 20px;
17}
18
19.gallery {
20  margin-bottom: 40px;
21}
22
23img {
24  max-width: 100%;
25  height: auto;
26}
27
28.footer {
29  background-color: #333;
30  color: #fff;
31  text-align: center;
32  padding: 10px;
33}

Zadanie dodatkowe

Dodaj więcej obrazów do galerii i eksperymentuj z różnymi wartościami
```
srcset
```
i
```
<picture>
```
, aby zobaczyć, jak zmienia się układ obrazów.
Przetestuj swoje umiejętności, dodając obrazy w różnych formatach (JPEG, PNG, WebP) i sprawdź, jak wpływa to na wydajność strony.
Dodaj różne style do obrazów, np. zmieniając kolory, rozmiary czcionek i inne właściwości elementów, aby lepiej zrozumieć, jak działają różne opcje CSS.
Dodaj animacje do obrazów, aby dodać interaktywność i lepsze doświadczenie użytkownika.

Przejdź do CodeWorlds→