Jak pracować z obrazami i biblioteką mediów

Ten przewodnik pomoże Ci efektywnie zarządzać obrazami i innymi plikami mediów w systemie CMS.

Dostęp do biblioteki mediów

1. Kliknij "Media Library" w menu po lewej stronie
2. Zobaczysz wszystkie przesłane pliki - obrazy, dokumenty, pliki PDF
3. Możesz przeglądać pliki w widoku siatki lub listy

Przesyłanie nowych obrazów

Metoda 1: Przeciągnij i upuść
1. Otwórz Media Library
2. Przeciągnij pliki z Eksploratora plików/Findera bezpośrednio na stronę
3. Pliki zostaną automatycznie przesłane

Metoda 2: Przycisk Upload
1. Kliknij przycisk "Add new assets" w prawym górnym rogu
2. Wybierz "From computer"
3. Wybierz pliki do przesłania
4. Kliknij "Upload" aby potwierdzić

Zalecane rozmiary obrazów

Hero Section (Sekcja powitalna):
- Szerokość: minimum 1920px
- Format: JPG lub PNG
- Rozmiar pliku: maksymalnie 500KB (zoptymalizowany)

Feature Cards / Steps Grid (ikony):
- Używaj ikon z Lucide (wbudowane w system)
- Nie trzeba przesyłać własnych ikon

Image + Text Section:
- Szerokość: 1200-1600px
- Proporcje: 16:9 lub 4:3
- Format: JPG (dla zdjęć) lub PNG (dla grafik z przezroczystością)
- Rozmiar pliku: maksymalnie 300KB

Logotypy i grafiki:
- Format: PNG z przezroczystością
- Szerokość: 400-800px (w zależności od użycia)
- Rozmiar pliku: maksymalnie 100KB

Optymalizacja obrazów przed przesłaniem

WAŻNE: Zawsze optymalizuj obrazy przed przesłaniem!

1. Użyj narzędzi online:
- TinyPNG.com - kompresja PNG i JPG
- Squoosh.app - zaawansowana kompresja z podglądem
- ImageOptim (Mac) lub FileOptimizer (Windows)

2. Zmniejsz rozmiar obrazu do rzeczywistych wymiarów wyświetlania
3. Dla zdjęć użyj jakości JPG 80-85%
4. Usuń metadane EXIF jeśli nie są potrzebne

Dodawanie obrazu do strony

Podczas edycji sekcji Image + Text:

1. Kliknij pole "image" w sekcji
2. Wybierz "Select from Media Library"
3. Przeglądaj i kliknij na wybrany obraz
4. Kliknij "Finish" aby potwierdzić wybór

Lub przesłanie nowego obrazu bezpośrednio:

1. Kliknij pole "image"
2. Wybierz "From computer"
3. Wybierz plik z dysku
4. Obraz zostanie przesłany i automatycznie przypisany

Edycja informacji o obrazie

1. W Media Library kliknij na obraz
2. Po prawej stronie zobaczysz panel szczegółów
3. Możesz edytować:
- Nazwę pliku
- Alternative text (ALT) - WAŻNE dla dostępności!
- Caption (podpis)

Alternative Text (ALT) - najlepsze praktyki

ALT text jest kluczowy dla:
- Dostępności (czytniki ekranu dla osób niewidomych)
- SEO (wyszukiwarki indeksują opisy obrazów)
- Wyświetlanie gdy obraz się nie załaduje

Jak pisać dobry ALT text:

✓ DOBRZE:
- "Zespół DoFaktur pracujący przy biurkach w nowoczesnym biurze"
- "Screenshot tworzenia faktury w aplikacji DoFaktur"
- "Wykres pokazujący wzrost liczby użytkowników o 150%"

✗ ŹLE:
- "obraz1.jpg" lub "IMG_1234"
- "Kliknij tutaj"
- Puste pole ALT
- Zbyt długie opisy (ponad 125 znaków)

Zasady:
- Opisuj co WIDAĆ na obrazie, nie co oznacza
- Bądź konkretny ale zwięzły
- Nie zaczynaj od "Obraz przedstawia..." (to jest oczywiste)
- Dla ikon dekoracyjnych użyj pustego ALT: alt=""

Organizacja plików

Tworzenie folderów:
1. Kliknij "Create new folder" w Media Library
2. Nazwij folder logicznie, np.:
- "homepage" - obrazy ze strony głównej
- "blog-images" - zdjęcia do artykułów
- "logos" - logotypy i ikony
- "team" - zdjęcia zespołu

Przenoszenie plików do folderów:
1. Zaznacz jeden lub więcej plików (checkbox)
2. Kliknij "Move to folder"
3. Wybierz folder docelowy

Wyszukiwanie obrazów

1. Użyj paska wyszukiwania w górnej części Media Library
2. Szukaj po nazwie pliku lub ALT text
3. Filtruj według:
- Typu pliku (obrazy, dokumenty, filmy)
- Daty przesłania
- Rozmiaru pliku
- Folderu

Zastępowanie istniejącego obrazu

Jeśli chcesz zaktualizować obraz na stronie:

Opcja 1: Zamień plik (zachowuje tę samą URL):
1. W Media Library znajdź stary obraz
2. Kliknij przycisk "Replace media"
3. Przesłany nowy plik
4. Obraz zostanie zaktualizowany wszędzie gdzie jest używany

Opcja 2: Wybierz inny obraz:
1. Edytuj stronę
2. Kliknij na pole obrazu w sekcji
3. Wybierz "Change"
4. Wybierz nowy obraz z biblioteki

Usuwanie obrazów

UWAGA: Usunięcie obrazu z Media Library usunie go ze WSZYSTKICH stron gdzie był używany!

1. Zaznacz obraz w Media Library
2. Kliknij "Delete"
3. Potwierdź usunięcie
4. Sprawdź czy obraz nie był używany na ważnych stronach

Najczęstsze problemy

Problem: Obraz jest niewyraźny/pixelowany
Rozwiązanie: Przesłany obraz ma zbyt małą rozdzielczość. Użyj obrazu o większych wymiarach.

Problem: Obraz nie ładuje się
Rozwiązanie: Sprawdź czy plik nie jest zbyt duży (powinien być < 1MB). Skompresuj obraz.

Problem: Nie widzę przesłanego obrazu
Rozwiązanie: Odśwież stronę lub poczekaj kilka sekund - przesyłanie może trwać.

Problem: Nie mogę usunąć obrazu
Rozwiązanie: Obraz może być używany na opublikowanych stronach. Najpierw usuń go ze stron, potem z biblioteki.

Wskazówki i najlepsze praktyki

1. Zawsze używaj opisowych nazw plików PRZED przesłaniem
- ✓ "zespol-dofaktur-biuro.jpg"
- ✗ "IMG_1234.jpg"

2. Nigdy nie przesyłaj obrazów bezpośrednio z aparatu telefonu (za duże)

3. Używaj spójnego systemu nazewnictwa dla podobnych obrazów

4. Regularnie przeglądaj i usuwaj nieużywane obrazy

5. Dla każdego obrazu ZAWSZE wypełnij pole Alternative Text

6. Zapisuj oryginalne, nieskompresowane wersje obrazów poza CMS jako backup

7. Testuj jak obrazy wyglądają na urządzeniach mobilnych

8. Przesyłaj obrazy przed rozpoczęciem edycji strony, żeby były gotowe do użycia