Jak skompresować grafikę do artykułu sponsorowanego?

Grafika do artykułu sponsorowanego ma zrobić trzy rzeczy naraz: wyglądać dobrze, nie psuć układu strony i nie ciągnąć wyniku w PageSpeed Insights w dół. Problem zaczyna się zwykle od pliku źródłowego. Sponsor wysyła zdjęcie z paczki prasowej, często w rozmiarze 4000–6000 px szerokości, z metadanymi i wagą kilku megabajtów. Redaktor wrzuca je do WordPressa, licząc, że motyw albo wtyczka „jakoś to ogarnie”.

Czasem ogarnie. Częściej tylko przerzuci problem w inne miejsce: zostawi ciężki plik full size, wygeneruje za duże miniatury, zużyje limit optymalizacji albo opóźni ładowanie głównego obrazu.

Najbezpieczniejszy schemat jest prosty: najpierw kadr, potem rozmiar, na końcu kompresja. Dla typowej grafiki głównej w artykule sponsorowanym dobrym punktem startowym jest 1000×667 px, czyli proporcja zbliżona do 3:2. Ten wymiar dobrze pasuje do zdjęć produktowych, lifestyle’owych i ilustracji w klasycznej kolumnie blogowej. Nie jest jednak świętą zasadą. Jeśli motyw pokazuje obraz jako szeroki hero na całą szerokość ekranu, przygotuj większy wariant, np. 1600×1067 px, żeby uniknąć rozmycia na dużych monitorach.

Kadrowanie i rozmiar grafiki: kompresja zaczyna się przed eksportem

Największa oszczędność nie bierze się z magicznego przycisku „compress”. Bierze się z decyzji, co zostaje w kadrze. Jeśli źródłowe zdjęcie ma 5000 px szerokości, a w artykule będzie wyświetlane na 900–1000 px, kompresowanie oryginału jest stratą czasu, transferu i często limitów w narzędziach.

W praktyce najpierw ustawiam kadr w proporcji 3:2, pilnuję produktu, twarzy, logo i marginesów, a dopiero później eksportuję plik do docelowego rozmiaru. Przy szerokości 1000 px wysokość 667 px jest po prostu praktycznym zaokrągleniem proporcji 3:2 do pełnych pikseli. W grafice cyfrowej nie pracujemy na ułamkach pikseli, więc nie ma sensu rozpisywać tego matematycznie w każdym miejscu.

Przed kompresją przejdź krótką checklistę:

• Nie powiększaj słabego źródła. Jeśli sponsor wysłał grafikę 800 px szerokości, nie eksportuj jej na 1000 px. Plik będzie większy, a ostrość gorsza.
• Nie docinaj logo do krawędzi. WordPress, motyw, archiwum wpisów i podgląd social mogą później przyciąć miniaturę inaczej niż główny widok artykułu.
• Zostaw margines bezpieczeństwa. Minimum 5–8% szerokości po bokach zmniejsza ryzyko, że miniatura utnie produkt albo napis.
• Nie zapisuj zdjęć jako PNG bez powodu. PNG zostaw dla przezroczystości, ikon, zrzutów ekranu i grafik z ostrym tekstem.
• Usuń metadane EXIF, jeśli nie są potrzebne. Potrafią zwiększać plik i ujawniać informacje o aparacie, dacie wykonania, a czasem lokalizacji.

Dla grafiki głównej w artykule sponsorowanym rozsądny cel wagowy wygląda tak:

• JPG/WebP ze zdjęciem: zwykle 80–180 KB,
• grafika z dużą liczbą detali, tekstem albo trudnym światłem: 150–250 KB,
• PNG z przezroczystością: tyle, ile wymaga projekt, ale przy 400–500 KB warto sprawdzić WebP z alfą albo uprościć grafikę.

Jeśli plik 1000×667 px waży 600–900 KB, najpierw sprawdź format. Bardzo często problemem nie jest „za słaba kompresja”, tylko zapisanie zdjęcia jako PNG albo zostawienie zbyt dużego oryginału.

JPG, PNG, WebP czy AVIF: format wybieraj po zawartości obrazu

Format pliku powinien wynikać z tego, co jest na grafice, a nie z przyzwyczajenia redaktora.

JPG nadal dobrze sprawdza się przy zdjęciach. Jest przewidywalny, lekki i szeroko obsługiwany. W artykułach sponsorowanych nadaje się do zdjęć produktowych, zdjęć ludzi, wnętrz, jedzenia, samochodów, elektroniki i większości materiałów lifestyle’owych. Minusem są artefakty przy zbyt mocnej kompresji: rozmyte detale, brudne krawędzie napisów, schodki przy kontrastowych elementach.

WebP jest zwykle lepszym wyborem dla publikacji internetowych, jeśli CMS, motyw i CDN poprawnie go obsługują. Przy podobnej jakości potrafi ważyć mniej niż JPG, a dodatkowo obsługuje przezroczystość. To dobry format dla większości grafik sponsorowanych: zdjęć, ilustracji i prostych kreacji promocyjnych.

AVIF bywa jeszcze lżejszy, ale nie wdrażałbym go bez testu całego procesu publikacji. Trzeba sprawdzić, czy WordPress, wtyczka optymalizacyjna, CDN, cache i realne przeglądarki użytkowników obsługują go bez problemów. AVIF jest świetny technicznie, ale w redakcji ważniejsza jest przewidywalność niż wynik laboratoryjny na jednym pliku.

PNG zostaw dla grafik, które naprawdę tego wymagają: przezroczyste tło, interfejsy, screeny, logo, ikony, wykresy i elementy z ostrymi krawędziami. Przy zdjęciach PNG najczęściej tworzy niepotrzebnie ciężki plik.

Tu jest ważny niuans: narzędzia typu TinyPNG mogą stosować kompresję stratną również na plikach PNG. W praktyce takie narzędzia często redukują paletę kolorów, zbliżając plik do PNG-8. Przy ikonach, prostych grafikach i screenach daje to świetny efekt. Przy gradientach, cieniach, zdjęciach produktowych albo tłach z delikatnymi przejściami może pojawić się banding, czyli widoczne pasy zamiast płynnych przejść tonalnych. Dlatego po kompresji PNG zawsze otwórz wynik w 100% powiększeniu i sprawdź tło, cienie, gradienty oraz drobny tekst.

Decyzja jest prosta:

Typ grafiki	Najlepszy format startowy	Na co uważać
Zdjęcie produktu	WebP albo JPG	detale etykiety, ostrość logo, artefakty
Zdjęcie lifestyle	WebP albo JPG	twarze, skóra, światło, rozmycie tła
Logo z przezroczystością	PNG albo WebP z alfą	krawędzie, tło, zgodność z motywem
Screenshot	PNG albo WebP	czytelność tekstu i ikon
Grafika z gradientem	WebP/JPG, czasem PNG	banding po mocnej kompresji
Prosta ikona	SVG, PNG albo WebP	skalowanie i ostrość

WordPress po przesłaniu pliku tworzy własne rozmiary obrazów, ale to nie zwalnia z przygotowania sensownego oryginału. Jeśli wrzucisz plik 5000 px szerokości i 6 MB wagi, CMS może wygenerować mniejsze warianty, ale pełny oryginał nadal zostanie w bibliotece. Wtyczka optymalizacyjna nie zastępuje decyzji redaktora o kadrze, proporcji i formacie.

Narzędzia do kompresji i WordPress: tabela zamiast klikania w ciemno

Narzędzia webowe są najlepsze, gdy masz jedną lub kilka grafik do szybkiej publikacji. Programy instalowane wybieraj przy większych paczkach, materiałach poufnych albo pracy redakcyjnej. Wtyczki WordPress traktuj jako drugi poziom zabezpieczenia, a nie jako ratunek dla źle przygotowanych plików.

Narzędzie	Format wyjściowy	Zaleta	Kiedy wybrać
TinyPNG / Tinify	WebP, JPG, PNG, AVIF	szybka kompresja bez ręcznego ustawiania jakości	gdy chcesz szybko zmniejszyć gotowy plik po kadrowaniu
Squoosh	WebP, AVIF, JPG, PNG	podgląd różnicy i kontrola jakości	gdy optymalizujesz ważny obraz główny i chcesz widzieć artefakty
iLoveIMG	JPG, PNG, WebP i inne	kompresja plus resize, crop, konwersja, watermark	gdy potrzebujesz prostych operacji w jednym miejscu
ImageCompressor.com	JPG, PNG, WebP, GIF, SVG	prosta regulacja jakości suwakiem	gdy obrabiasz pojedyncze pliki bez rozbudowanego workflow
Photopea	zależnie od eksportu	kadrowanie i edycja w przeglądarce	gdy trzeba poprawić kadr, a nie tylko zmniejszyć wagę
ImageOptim	głównie JPG, PNG, GIF, SVG	czyszczenie metadanych i lekka kompresja lokalnie	gdy pracujesz na macOS i chcesz finalnie „odchudzić” plik
Caesium Image Compressor	JPG, PNG, WebP	kompresja paczek z podglądem	gdy przygotowujesz kilka lub kilkadziesiąt grafik naraz
XnConvert	setki formatów	presety, masowa konwersja i powtarzalność	gdy redakcja potrzebuje stałego schematu eksportu
GIMP	JPG, PNG, WebP i inne	pełna edycja obrazu przed eksportem	gdy trzeba poprawić grafikę, tło, jasność albo elementy kadru
TinyPNG WordPress	WebP, AVIF, JPG, PNG	prosty automat po uploadzie	dla małych stron i kilku publikacji miesięcznie
ShortPixel	WebP, AVIF, JPG, PNG, PDF	bulk optimization i obsługa dużych bibliotek	przy większych serwisach i wielu obrazach historycznych
Imagify	WebP, JPG, PNG	prosta konfiguracja dla redaktorów	gdy liczy się minimum ustawień w WordPressie
EWWW Image Optimizer	WebP, AVIF, JPG, PNG	większa kontrola, także optymalizacja lokalna	gdy administrator wie, co pozwala robić hosting
Smush	JPG, PNG, WebP/AVIF w wybranych wariantach	łatwy start i lazy load	gdy chcesz prostą wtyczkę, ale kontrolujesz limity
Optimole	format dobierany dynamicznie	CDN, automatyczny rozmiar pod urządzenie	gdy problemem są różne ekrany, mobile i wydajność obrazów

Najprostszy workflow dla jednego artykułu sponsorowanego wygląda tak:

1. Otwórz plik źródłowy.
2. Ustaw kadr pod miejsce publikacji, najczęściej 3:2.
3. Eksportuj grafikę do 1000×667 px albo większego wariantu zgodnego z motywem.
4. Zapisz jako WebP albo JPG. PNG wybierz tylko wtedy, gdy masz ku temu powód.
5. Skompresuj plik.
6. Otwórz wynik w 100% powiększeniu i sprawdź logo, twarze, napisy, gradienty oraz tło.
7. Dopiero wtedy wgraj grafikę do WordPressa.
8. Po publikacji sprawdź konkretny adres URL w PageSpeed Insights albo DevTools.

Najgorsza decyzja to wrzucanie wszystkiego w oryginale i wiara, że wtyczka załatwi temat. Wtyczka może pomóc przy miniaturach, WebP, AVIF, CDN i lazy loadzie, ale nie podejmie decyzji za redaktora. Nie wie, czy logo sponsora jest za blisko krawędzi. Nie wie, czy tekst na opakowaniu musi być czytelny. Nie wie też, czy grafika główna jest najważniejszym elementem widocznym po wejściu na stronę.

To ostatnie ma duże znaczenie dla Core Web Vitals. Obrazek wyróżniający, czyli hero image, często znajduje się nad linią zgięcia strony, czyli above the fold. Jeśli jest największym elementem widocznym w pierwszym widoku, bardzo często staje się elementem liczonym jako LCP — Largest Contentful Paint. Innymi słowy: to właśnie on decyduje, kiedy użytkownik zobaczy główną część strony.

Dlatego funkcja Lazy Load nie powinna opóźniać ładowania głównego obrazu artykułu sponsorowanego. Lazy load ma sens dla grafik niżej w treści, galerii, miniaturek i obrazów poza pierwszym ekranem. Jeśli obejmie hero image, przeglądarka może odkryć obraz zbyt późno, a wynik LCP poleci w dół mimo tego, że plik jest poprawnie skompresowany. Dla głównego obrazu lepsza decyzja to: brak lazy loadu, poprawny rozmiar, szybkie wykrycie w HTML, a w razie potrzeby priorytet ładowania przez fetchpriority="high" albo preload wdrożony przez motyw, wtyczkę lub dewelopera.

W praktyce po publikacji sprawdzam nie tylko wagę pliku, ale też zachowanie strony:

• czy hero image nie ma loading="lazy",
• czy nie ładuje się dopiero po CSS/JS,
• czy WordPress nie podaje za dużego wariantu obrazu,
• czy srcset wybiera sensowny rozmiar dla mobile,
• czy obraz nie jest blokowany przez CDN, cache albo opóźnione skrypty,
• czy PageSpeed Insights wskazuje ten obraz jako element LCP.

Jeśli PageSpeed pokazuje problem z LCP, nie zaczynaj od kompresowania całej biblioteki mediów. Najpierw znajdź konkretny obraz LCP na konkretnym URL-u. Dopiero potem popraw format, rozmiar, priorytet ładowania i lazy load.

FAQ: najczęstsze pytania o kompresję grafiki do artykułu sponsorowanego

Czy 1000×667 px wystarczy do każdego artykułu sponsorowanego?
Nie. To dobry wymiar dla typowej grafiki głównej w klasycznej kolumnie blogowej. Jeśli motyw pokazuje obraz na pełną szerokość ekranu, przygotuj większy wariant, np. 1600×1067 px.

Jaki format wybrać: JPG, PNG, WebP czy AVIF?
Do zdjęć wybierz WebP albo JPG. Do grafik z przezroczystością wybierz PNG albo WebP z alfą. AVIF testuj wtedy, gdy cały stos strony poprawnie go obsługuje: WordPress, motyw, CDN, cache i przeglądarki użytkowników.

Czy TinyPNG wystarczy do profesjonalnej publikacji?
Tak, jeśli plik jest wcześniej dobrze przycięty i zmniejszony. TinyPNG nie powinien być pierwszym etapem pracy z obrazem o szerokości 5000 px. Najpierw kadr i rozmiar, potem kompresja.

Czy kompresja PNG może pogorszyć jakość?
Tak. Przy mocnej kompresji stratnej PNG narzędzie może ograniczyć paletę kolorów, co przy gradientach i cieniach powoduje banding. Dlatego po kompresji PNG sprawdź przejścia tonalne, tło i drobny tekst.

Czy usuwać metadane EXIF?
Zazwyczaj tak. W artykule sponsorowanym metadane aparatu nie pomagają czytelnikowi, a mogą zwiększać wagę pliku i ujawniać niepotrzebne informacje. Wyjątkiem są sytuacje, gdy sponsor wymaga zachowania danych copyright/IPTC.

Czy wtyczka WordPress zastąpi ręczną kompresję?
Nie w pełni. Wtyczka jest automatem dla miniatur, WebP, AVIF, lazy loadu albo CDN. Nie zastąpi decyzji o kadrze, rozmiarze, marginesie logo i czytelności produktu.

Czy obrazek wyróżniający powinien mieć lazy load?
Nie, jeśli jest widoczny od razu po wejściu na stronę i może być elementem LCP. Lazy load zostaw dla obrazów niżej w treści. Główny obraz artykułu powinien ładować się szybko, bez sztucznego opóźniania.

Jaki rozmiar pliku jest dobry dla grafiki 1000×667 px?
Dla zwykłego zdjęcia celuj w 80–180 KB. Przy dużej liczbie detali, napisach albo trudnych gradientach 200–250 KB nadal może być rozsądne. Plik 600 KB przy takim wymiarze zwykle oznacza zły format albo brak realnej kompresji.

Czy można kompresować grafiki sponsorowane w narzędziach online?
Można, ale przy materiałach poufnych lepiej użyć narzędzia lokalnego albo rozwiązania działającego w przeglądarce bez wysyłania plików na zewnętrzny serwer. Przy materiałach objętych NDA nie wrzucaj grafik do przypadkowego darmowego kompresora.

Od czego zacząć, jeśli biblioteka WordPressa jest już pełna ciężkich obrazów?
Najpierw sprawdź najważniejsze wpisy sponsorowane i obrazy widoczne nad linią zgięcia. Potem zrób kopię zapasową i dopiero wtedy uruchamiaj bulk optimization. Nie zaczynaj od całej biblioteki, jeśli nie wiesz, ile miniatur generuje motyw i czy wtyczka nie nadpisze plików bez możliwości cofnięcia zmian.

Pierwszy błąd do usunięcia jest prosty: przestań wrzucać do WordPressa oryginały z paczek prasowych. Przytnij grafikę do właściwej proporcji, ustaw docelowy rozmiar, zapisz ją jako WebP albo JPG, sprawdź jakość po kompresji i dopiero wtedy publikuj. Wtyczka ma dopracować proces, nie ratować źle przygotowany plik źródłowy.