Jaki format zdjęć na stronę internetową — JPG, PNG, WebP, AVIF, SVG | WebMajka

Jaki format zdjęć na stronę internetową — krótka odpowiedź

Krótko i konkretnie: dla zdjęć fotograficznych używaj WebP (fallback JPG), dla grafik z tekstem i przezroczystością PNG lub lepiej WebP, dla logotypów i ikon SVG, a dla nowych projektów eksperymentuj z AVIF. Tyle dla osób, które mają pięć sekund. Teraz dlaczego tak jest i co wybrać w konkretnych sytuacjach.

Format zdjęcia wpływa bezpośrednio na trzy kluczowe aspekty strony: wagę (a więc szybkość ładowania), jakość wizualną i wsparcie przeglądarek. Niewłaściwy format to albo rozmazana grafika, albo strona, która ładuje się 10 sekund na mobilnym połączeniu. W 2026 roku optymalizacja obrazków to jeden z najważniejszych czynników Core Web Vitals — a więc i SEO.

Popularne formaty zdjęć — porównanie

Różnice wagowe są spektakularne. Ta sama fotografia 1920x1080 w jakości wizualnej identycznej dla oka zajmuje mniej więcej:

• JPG — 350 KB (punkt odniesienia)
• WebP — 220 KB (-37%)
• AVIF — 140 KB (-60%)
• PNG — 2,8 MB (nie używaj dla fotografii!)

Dla zdjęć na stronę różnica 350 KB vs 140 KB mnożona przez 10 zdjęć = 2 MB oszczędności. Na wolnym 3G to 5-10 sekund ładowania mniej.

JPG (JPEG) — klasyczny wybór dla fotografii

Format JPG istnieje od 1992 roku i nadal króluje w fotografii internetowej. Używa kompresji stratnej — algorytm usuwa dane, których oko ludzkie nie zauważa. Idealny dla zdjęć z wieloma kolorami i płynnymi przejściami (portrety, krajobrazy, produkty).

Zalety:

• Bardzo mała waga przy dobrej jakości (typowo 50-500 KB).
• 100% wsparcie we wszystkich przeglądarkach.
• Prosty w obróbce — każdy edytor grafiki go otwiera.

Wady:

• Brak przezroczystości — tło zawsze musi być jakiegoś koloru.
• Każde kolejne zapisanie pogarsza jakość (generation loss).
• Artefakty kompresji na ostrych krawędziach i tekście.

Kiedy używać: zdjęcia portretowe, pejzaże, produkty na stronie sklepu, zdjęcia blogowe. Nie używaj dla zrzutów ekranu z tekstem, grafik wektorowych i obrazów z ostrymi kolorami.

Typowe ustawienia kompresji: jakość 80-85 dla zdjęć prezentacyjnych, 60-70 dla miniatur. Poniżej 60% artefakty są już widoczne.

PNG — przezroczystość i bezstratność

PNG (Portable Network Graphics) używa kompresji bezstratnej — plik jest większy od JPG, ale nic się nie traci przy wielokrotnym zapisywaniu. Ma dwa kluczowe wyróżniki: pełny kanał alfa (przezroczystość) oraz ostre krawędzie bez kompresji.

Kiedy używać PNG:

• Logotypy firmowe (jeśli nie masz wersji wektorowej).
• Zrzuty ekranu panelu, interfejsów, kodu.
• Grafiki z tekstem (nagłówki, bannery).
• Elementy UI wymagające przezroczystego tła.
• Grafiki z ostrymi kolorami (ikony, diagramy).

Kiedy NIE używać PNG: dla zwykłych zdjęć — PNG może być 5-10x większy od JPG przy identycznym wyglądzie. Waga strony rośnie dramatycznie.

PNG-8 vs PNG-24: PNG-8 ma tylko 256 kolorów i 1 bit przezroczystości (on/off) — jest mniejszy. PNG-24 ma 16,7 mln kolorów i pełny kanał alfa (256 poziomów przezroczystości). Dla większości grafik webowych wystarczy PNG-8.

WebP — nowoczesny standard Google

WebP to format opracowany przez Google w 2010 roku jako następca JPG i PNG. Łączy zalety obu: mniejszą wagę, przezroczystość i świetną jakość. Od 2020 roku wsparcie jest praktycznie uniwersalne (Chrome, Firefox, Safari 14+, Edge).

Dwa tryby WebP:

• Stratny — zastępuje JPG, typowo 25-35% mniej wagi przy tej samej jakości.
• Bezstratny — zastępuje PNG, do 30% mniejszy.

WebP wspiera również animacje (alternatywa dla GIF-ów, 10x mniejsze) oraz metadata EXIF. Google w Search Console jawnie zaleca WebP w raportach optymalizacji obrazów.

Konwersja do WebP:

• Online: squoosh.app (Google), cloudconvert.com.
• Lokalnie: narzędzie cwebp z linii komend.
• WordPress: wtyczki WebP Express, Imagify, ShortPixel automatyzują konwersję.

Fallback HTML dla starszych przeglądarek:

<picture>
  <source srcset="zdjecie.webp" type="image/webp">
  <img src="zdjecie.jpg" alt="Opis">
</picture>

AVIF — przyszłość formatów obrazkowych

AVIF (AV1 Image File Format) to najnowszy format, oparty na kodeku wideo AV1. Oferuje o 50% mniejszą wagę od JPG przy zachowaniu porównywalnej jakości — lepiej niż WebP. Wsparcie: Chrome od 85, Firefox od 93, Safari od 16 — w 2026 już praktycznie wszystkie nowoczesne przeglądarki.

Zalety AVIF:

• Najlepsza kompresja na rynku (małe pliki, dobra jakość).
• Wsparcie HDR (High Dynamic Range).
• Kanał alfa, animacje, 12-bit color depth.
• Licencja royalty-free.

Wady:

• Kodowanie jest wolne — 10-20x wolniejsze niż JPG. Dla batch processing na serwerze może być problem.
• Niektóre stare urządzenia (Android 11-) nie obsługują.
• Narzędzia edytorskie mają jeszcze słabe wsparcie.

Strategia na 2026: serwuj AVIF z fallback na WebP z fallback na JPG:

<picture>
  <source srcset="zdjecie.avif" type="image/avif">
  <source srcset="zdjecie.webp" type="image/webp">
  <img src="zdjecie.jpg" alt="Opis">
</picture>

SVG — logotypy i ikony w każdej rozdzielczości

SVG (Scalable Vector Graphics) to format wektorowy — obraz opisany matematycznie przez linie i krzywe, nie przez piksele. Skaluje się w nieskończoność bez utraty jakości. Plik SVG to tak naprawdę tekst XML.

Idealny dla:

• Logo jaki format — jednoznaczna odpowiedź: SVG. Logo będzie ostre na każdym ekranie, od iPhone'a SE po 8K TV.
• Ikony (Font Awesome, Feather Icons, Lucide — wszystkie oparte na SVG).
• Diagramy, wykresy, infografiki.
• Proste ilustracje z geometrycznymi kształtami.

Zalety SVG:

• Waga niezależna od rozdzielczości (typowo 1-20 KB).
• Można stylować przez CSS (kolor, grubość linii, animacje).
• Indeksowalny przez Google — tekst wewnątrz SVG jest widoczny dla SEO.
• Można embedować w HTML inline.

Uwaga bezpieczeństwa: SVG może zawierać JavaScript — zawsze sanityzuj pliki wgrywane przez użytkowników. WordPress domyślnie blokuje SVG w wp-content/uploads — odblokuj tylko świadomie.

Rozmiar zdjęcia na stronę internetową — jakie wymiary

Rozdzielczość zależy od miejsca użycia. Typowe wymiary dla strony responsywnej:

Reguła: zdjęcie nigdy nie powinno być większe niż miejsce, w którym zostanie wyświetlone. Obrazek 4000x3000 px wstawiony do miejsca 600x400 px to 16x marnotrawstwa wagi.

Srcset dla responsywności — serwuj różne rozmiary dla różnych ekranów:

<img src="small.jpg"
     srcset="small.jpg 400w, medium.jpg 800w, large.jpg 1600w"
     sizes="(max-width: 600px) 400px, (max-width: 1200px) 800px, 1600px"
     alt="Opis">

Przeglądarka sama wybierze najlepszy wariant dla danego urządzenia. Szczegółowo o tym w artykule responsywna strona.

Optymalizacja i kompresja zdjęć na stronę

Zanim wrzucisz zdjęcie na stronę, zoptymalizuj je. Najlepsze narzędzia:

• Online: squoosh.app (Google), tinypng.com, compressor.io, compressjpeg.com.
• Desktop: ImageOptim (Mac), FileOptimizer (Windows), Caesium.
• Linia komend: cwebp, avifenc, jpegoptim, pngquant, optipng.
• WordPress: Imagify, ShortPixel, EWWW Image Optimizer, Smush — automatyczna kompresja przy uploadzie.
• CDN: Cloudinary, imgix, Cloudflare Images — dynamiczna konwersja w locie.

Cel: obrazek JPG poniżej 200 KB, WebP poniżej 120 KB, AVIF poniżej 80 KB dla zwykłych zdjęć treściowych. Hero bannery mogą być większe (do 500 KB), ale kompresuj agresywnie.

Lazy loading (loading="lazy" na <img>) dodatkowo opóźnia ładowanie obrazków, które są poza viewport — kluczowe dla Core Web Vitals.

Format zdjęć a SEO

Google oficjalnie rekomenduje WebP i AVIF w PageSpeed Insights. Słabo zoptymalizowane obrazki obniżają:

• LCP (Largest Contentful Paint) — najczęściej największy element to właśnie zdjęcie bohater. Duży plik = wolny LCP = gorsze SEO.
• CLS (Cumulative Layout Shift) — obrazek bez zadeklarowanych width i height powoduje przeskoki layoutu.
• Mobile experience — na 4G duży obrazek to opuszczona strona po 3 sekundach.

Alt texty — każdy obrazek powinien mieć opisowy atrybut alt, istotny dla dostępności i dla pozycjonowania. Google używa ich do zrozumienia treści obrazu. Pisz naturalnie, bez keyword stuffingu.

Nazwa pliku też ma znaczenie — czerwona-sukienka-letnia.jpg jest lepsze od IMG_8473.jpg dla SEO.

Rekomendacje końcowe — co wybrać w 2026

Podsumujmy praktycznie, jaki format zdjęć na stronę internetową wybrać:

• Logo → SVG (fallback PNG).
• Ikony UI → SVG lub icon font.
• Zdjęcia produktowe w sklepie internetowym → WebP (fallback JPG).
• Zdjęcia blogowe → WebP 1200 px szerokości, kompresja 80%.
• Hero banner → AVIF + WebP + JPG przez <picture>.
• Zrzuty ekranu z tekstem → PNG lub WebP bezstratny.
• Animacje → WebP animowany lub mp4, nie GIF.
• Grafiki z przezroczystością → PNG lub WebP.
• Favicon → ICO + PNG 32x32, 192x192, 512x512.

W ramach tworzenia stron internetowych w WebMajka każda strona otrzymuje pełny pipeline optymalizacji obrazków: automatyczna konwersja do WebP i AVIF, lazy loading, responsywne srcset i kompresja ShortPixel — razem to przyspiesza LCP o 40-60% względem domyślnego WordPressa.