Grafika • przewodnik
PNG, JPG, SVG czy PDF/X?
Formaty grafiki bez tajemnic
TL;DR: Logo/ikony — SVG Zdjęcia WWW — WebP (fallback JPG) Przezroczystość — PNG/WebP Druk — PDF/X (CMYK, 300 DPI, spady)
Szybki wybór — drzewko decyzji
Logo, piktogramy, ilustracje wektorowe
- SVG (wektor, skaluje się bez utraty jakości)
- Wariant jasny/ciemny + favicon 32×32
Zdjęcia / mockupy na WWW
- WebP lub AVIF; fallback JPG 70–85%
- srcset + sizes (responsive images)
Grafika z przezroczystością
- PNG (lub WebP z alpha, jeśli wspierane)
- Uważaj na wagę — kompresuj
Druk (ulotki, plakaty, etykiety)
- PDF/X, CMYK, 300 DPI, spady 2–3 mm
- Fonty osadzone, profil ICC z drukarni
Tabela porównawcza formatów
| Format | Najlepsze do | Zalety | Na co uważać |
|---|---|---|---|
| SVG | logo, ikony, ilustracje | wektor, minimalna waga, ostre w każdym rozmiarze | osadzony CSS/JS — higiena bezpieczeństwa |
| PNG | przezroczystość, ostre krawędzie | brak strat kompresji, przewidywalne | większa waga niż JPG/WebP |
| JPG | zdjęcia (fallback) | lekki, szeroko wspierany | straty kompresji; nie nadaje się do alfa |
| WebP | WWW/social | duża oszczędność wagi, alfa | starsze systemy – zapewnij fallback |
| AVIF | WWW (nowoczesny) | jeszcze mniejsza waga niż WebP | kodowanie wolniejsze, wsparcie wciąż rośnie |
| PDF/X | druk | CMYK, spady, fonty — standard poligrafii | nie do WWW; ciężkie pliki |
Tip: do Retina/HiDPI trzymaj szerokość obrazu ~2× większą niż CSS, ale zawsze kompresuj.
Druk — CMYK, DPI, spady (checklista)
- Kolor: CMYK (profil ICC drukarni, np. FOGRA39/51)
- Rozdzielczość: 300 DPI w skali 1:1
- Spady: 2–3 mm; margines bezpieczeństwa 3–5 mm
- Eksport: PDF/X-1a lub PDF/X-4 z osadzonymi fontami
Uwaga: jeśli Twoje materiały powstają w RGB, zrób kontrolowaną konwersję do CMYK na końcu i sprawdź newralgiczne kolory (np. jaskrawe zielone/niebieskie).
WWW & social — eksport i przykładowy kod
Obrazy responsywne
<picture>
<source type="image/avif" srcset="hero.avif" />
<source type="image/webp" srcset="hero.webp" />
<img src="hero.jpg"
alt="Minimalistyczna grafika promocyjna"
width="1600" height="900"
loading="lazy" decoding="async" />
</picture>Parametry eksportu (praktyka)
- WebP/AVIF: jakość 60–80 (wizualna ocena > narzędzia)
- JPG fallback: 70–85% + progresywny
- PNG: optymalizacja (np. oxipng, pngquant)
Dla ikon i logotypów trzymaj SVG (zminimalizowany). Dodaj width i height, aby zapobiegać skokom layoutu (CLS).
Dostępność i SEO obrazów
- alt opisuje znaczenie obrazu, nie „słowa kluczowe”.
- Ustawiaj width/height lub styl z
aspect-ratio— stabilny układ (CLS). - Używaj lazy-loading poza ekranem; krytyczne obrazy ładuj natychmiast.
- Trzymaj sRGB dla WWW (spójne kolory).
Zobacz również
• Grafika (Photoshop/Vector) —
projekty do WWW i druku
• Logo & identyfikacja — logotypy w SVG, księga znaku
• Strony WWW — szybkość, CWV, SEO start
FAQ — krótkie odpowiedzi
Jak zapisać logo?
Główny plik: SVG. Dodatkowo PNG (ciemne/jasne tło) i małe favicony (16–64 px).
Jaki profil kolorów do WWW?
sRGB. Wyłącz egzotyczne profile — unikniesz „wypranych” barw na różnych urządzeniach.
Czy AVIF zastąpi WebP?
Bywa lżejszy, ale kodowanie jest wolniejsze, a wsparcie niepełne. W produkcji trzymaj WebP + testuj AVIF.
Co najczęściej psuje druk?
Brak spadów, RGB zamiast CMYK, fonty nieosadzone, zbyt cienkie linie/negatywy < 0,25 pt.