Temat 20: Przygotowanie grafik na potrzeby social media i stron WWW
📘 Teoria
🌐 Grafiki internetowe
Grafiki wykorzystywane w Internecie muszą być odpowiednio przygotowane, aby zapewnić:
- ⚡ szybkie ładowanie strony
- 🖥️ poprawne wyświetlanie na różnych urządzeniach
- 📱 czytelność w mediach społecznościowych
- 🎨 atrakcyjny wygląd
- 📷 dobrą jakość obrazu
📌 Zastosowania grafik internetowych
- posty social media
- banery reklamowe
- miniatury filmów
- grafiki na strony WWW
- reklamy internetowe
- logo i ikony
📱 Grafiki do social media
Każda platforma społecznościowa posiada własne wymagania dotyczące rozmiaru grafik.
📌 Popularne rozdzielczości
| Platforma | Typ grafiki | Rozdzielczość |
|---|---|---|
| post | 1200 × 630 px | |
| post kwadratowy | 1080 × 1080 px | |
| ▶️ YouTube | miniatura | 1280 × 720 px |
| 🎵 TikTok | wideo pionowe | 1080 × 1920 px |
| baner | 1584 × 396 px |
📌 Cechy dobrej grafiki social media
- czytelny tekst
- duży kontrast
- spójna kolorystyka
- krótki przekaz
- estetyczny układ
🖥️ Grafiki na strony WWW
Grafiki internetowe powinny być zoptymalizowane pod względem jakości i rozmiaru pliku.
📌 Najważniejsze zasady
| Zasada | Znaczenie |
|---|---|
| ⚡ Optymalizacja | szybsze ładowanie strony |
| 📱 Responsywność | poprawne wyświetlanie na telefonach |
| 🎨 Estetyka | spójny wygląd strony |
| 🖼️ Jakość | czytelny obraz |
| ♿ Dostępność | teksty alternatywne ALT |
📌 Tekst alternatywny ALT
Atrybut ALT opisuje grafikę dla:
- czytników ekranowych
- osób niewidomych
- wyszukiwarek internetowych
Przykład HTML:
<img src="logo.png" alt="Logo szkoły">
📂 Format plików graficznych
| Format | Zastosowanie | Cechy |
|---|---|---|
| 🖼️ JPG | zdjęcia | mały rozmiar pliku |
| 🎨 PNG | logo i grafiki | przezroczystość |
| 📐 SVG | ikony i logo | skalowanie bez utraty jakości |
| 🌐 WEBP | nowoczesne strony WWW | bardzo dobra kompresja |
| 🎞️ GIF | proste animacje | obsługa ruchu |
⚡ Optymalizacja grafiki
Optymalizacja polega na zmniejszeniu rozmiaru pliku bez dużej utraty jakości obrazu.
📌 Metody optymalizacji
- zmniejszenie rozdzielczości
- kompresja obrazu
- wybór odpowiedniego formatu
- przycinanie niepotrzebnych elementów
📌 Narzędzia do optymalizacji
| Narzędzie | Zastosowanie |
|---|---|
| 🌐 TinyPNG | kompresja PNG/JPG |
| 🖼️ Squoosh | optymalizacja online |
| 🎨 Canva | projektowanie grafik |
| 🖌️ Photopea | edycja i eksport |
📱 Responsywność grafiki
Grafiki powinny poprawnie wyświetlać się na komputerach, tabletach i smartfonach.
📌 Responsive Web Design
Responsywność oznacza automatyczne dopasowanie grafiki do rozdzielczości ekranu.
📌 Przykład CSS
img{
max-width:100%;
height:auto;
}
Dzięki temu obraz nie wychodzi poza szerokość ekranu.
🎨 Projektowanie atrakcyjnych grafik
📌 Zasady projektowania
- stosowanie kontrastu
- czytelne fonty
- maksymalnie 2–3 kolory
- wyróżnienie najważniejszych informacji
- stosowanie przestrzeni między elementami
📌 Najczęstsze elementy grafik social media
| Element | Przykład |
|---|---|
| 🖼️ Zdjęcie | produkt lub osoba |
| 📝 Nagłówek | krótkie hasło reklamowe |
| 🎨 Tło | gradient lub kolor |
| 📣 CTA | „Sprawdź”, „Kup teraz” |
| 🏷️ Logo | identyfikacja marki |
✅ Zalety dobrze przygotowanych grafik
- szybsze działanie strony
- większa atrakcyjność wizualna
- lepsza promocja w social media
- większa liczba odbiorców
- profesjonalny wygląd projektu
⚠️ Najczęstsze błędy
- zbyt duży rozmiar pliku
- nieczytelny tekst
- zbyt mała rozdzielczość
- brak responsywności
- używanie złego formatu pliku
- przeładowanie grafiki efektami
Błąd:
Baner 15 MB zapisany jako BMP.
Poprawnie:
Grafika zoptymalizowana do WEBP lub JPG.
🧠 Ćwiczenia
- Przygotuj grafikę na Instagram 1080×1080 px.
- Utwórz miniaturę YouTube.
- Dodaj tekst reklamowy do grafiki.
- Zastosuj kontrastowe kolory.
- Wyeksportuj grafikę do JPG.
- Przygotuj logo w formacie SVG.
- Dodaj atrybut ALT do obrazu HTML.
- Zoptymalizuj zdjęcie do Internetu.
- Porównaj PNG i WEBP.
- Przygotuj responsywną grafikę strony WWW.
- projekt kwadratowy
- 1280 × 720 px
- krótki slogan reklamowy
- ciemne tło + jasny tekst
- Eksport JPG
- format SVG
- alt="Opis grafiki"
- kompresja obrazu
- WEBP ma lepszą kompresję
- max-width:100%
📊 Zadania egzaminacyjne
Zadanie 1
Przygotuj grafikę reklamową na potrzeby Instagrama.
Zadanie 2
Zoptymalizuj grafikę do publikacji na stronie internetowej.
Zadanie 3
Dobierz odpowiedni format pliku dla logo, zdjęcia i animacji.
Zadanie 4
Wyjaśnij znaczenie responsywności grafik internetowych.
Zadanie 5
Przygotuj baner reklamowy zgodny z zasadami projektowania social media.
📝 Test – 10 pytań
1. JPG najlepiej nadaje się do:
2. SVG jest formatem:
3. WEBP charakteryzuje się:
4. Atrybut ALT służy do:
5. Responsywność oznacza:
6. Instagram preferuje grafikę:
7. PNG obsługuje:
8. TinyPNG służy do:
9. GIF umożliwia:
10. Dobra grafika social media powinna być:
📎 Materiały dodatkowe
👨🏫 Dla nauczyciela
Warto przeprowadzić ćwiczenie praktyczne polegające na przygotowaniu zestawu grafik dla social media szkoły. Uczniowie mogą tworzyć posty, banery oraz miniatury, a następnie optymalizować je do publikacji internetowej.