Jak kompresować obrazy na stronę internetową

Według raportu Web Almanac 2025 przygotowanego przez HTTP Archive mediana wagi strony głównej na urządzeniach mobilnych wyniosła 2,56 MB, z czego 911 KB stanowiły obrazy. Na komputerach mediana strony zawierała 1058 KB obrazów. To także na obrazy czekają odwiedzający: największy element widoczny na ekranie podczas ładowania strony, czyli Largest Contentful Paint (LCP), był obrazem na 76% stron mobilnych.

Lżejsze obrazy szybciej wczytują się przy wolnym połączeniu, zużywają mniej danych komórkowych twoich odwiedzających i kosztują cię mniej transferu. LCP to jeden ze wskaźników Core Web Vitals, którymi Google ocenia wrażenia z korzystania ze strony, więc ciężkie obrazy mogą kosztować więcej niż kilka sekund cierpliwości.

Kompresja nie uratuje obrazu, który jest znacznie większy niż miejsce, które zajmuje. Zdjęcie z aparatu o szerokości 4000 pikseli, wyświetlane w kolumnie o szerokości 800 pikseli, ma 25 razy więcej pikseli, niż strona może wykorzystać. Jak zauważa web.dev, wysyłanie na telefony obrazów w rozmiarze przeznaczonym dla komputerów może zużywać 2–4 razy więcej danych, niż potrzeba.

• Banery na całą szerokość: w większości układów wystarczy około 1600–2000 pikseli szerokości.
• Obrazy w kolumnie artykułu: mniej więcej dwukrotność szerokości kolumny, by pozostały ostre na ekranach o dużej gęstości pikseli (np. 1400 pikseli dla kolumny o szerokości 700 pikseli).
• Miniatury i awatary: dwukrotność wyświetlanego rozmiaru, często 200–400 pikseli.

Format decyduje o tym, jak wydajnie można zapisać obraz. W skrócie: do zdjęć pasuje JPG lub WebP; do logo, zrzutów ekranu i wszystkiego z przezroczystością — PNG lub WebP. Nasze porównanie JPG, PNG i WebP wyjaśnia, kiedy który z nich wygrywa.

Około 97% używanych przeglądarek wyświetla WebP, a pliki w tym formacie są często zauważalnie mniejsze. Aby to sprawdzić, przekonwertuj obraz za pomocą JPG do WebP lub PNG do WebP i porównaj wynik z oryginałem: przekonwertowany plik nie zawsze jest mniejszy, zwłaszcza w przypadku prostych grafik.

Kompresja usuwa dane, których brak oko raczej nie zauważy. W kompresorze obrazów Bitinz możesz upuścić całą partię plików JPG, PNG lub WebP i wybrać jeden z trzech poziomów:

• Szybki: liczy się szybkość, dla dużych partii.
• Zrównoważony: poziom domyślny, dobrze sprawdza się przy większości obrazów na stronach internetowych.
• Maksymalny: trwa nieco dłużej, ale daje mniejsze pliki; warto go użyć przy obrazach, które pojawiają się na każdej podstronie, takich jak banery i tła.

Gdy zachowujesz format, Bitinz nigdy nie zwróci pliku większego od przesłanego. Porównaj wynik z oryginałem w pełnym rozmiarze, zwłaszcza obrazy z drobnym tekstem lub płynnymi gradientami, a potem pobierz te, które ci odpowiadają.

Nawet dobrze skompresowany obraz może spowolnić stronę, jeśli wczyta się w złym momencie lub w złym rozmiarze. Większość pracy wykonuje kilka atrybutów HTML:

• Ustaw width i height dla każdego obrazu, aby przeglądarka mogła zarezerwować miejsce, a układ nie przeskakiwał podczas ładowania.
• Dodaj loading="lazy" do obrazów położonych niżej na stronie, aby wczytywały się dopiero wtedy, gdy odwiedzający przewinie stronę w ich pobliże.
• Nigdy nie stosuj leniwego ładowania do głównego obrazu na górze strony. Zamiast tego web.dev zaleca dla niego fetchpriority="high", najwyżej dla jednego lub dwóch obrazów.
• Użyj srcset i sizes, aby udostępnić ten sam obraz w kilku szerokościach, dzięki czemu telefony pobiorą mniejszy plik niż duże ekrany.
• Udostępniaj obrazy z długim czasem przechowywania w pamięci podręcznej, przez CDN, jeśli z niego korzystasz, aby powracający odwiedzający nie pobierali ich ponownie.

Przetestuj stronę w PageSpeed Insights lub w panelu Lighthouse w Chrome. Od wersji Lighthouse 13 testy obrazów są zebrane w jednej analizie, „Improve image delivery”, która wymienia obrazy, które można by mocniej skompresować, udostępnić w nowoczesnym formacie lub zmniejszyć. Obrazy, które dałyby oszczędność mniejszą niż 4 KiB, nie są wymieniane, więc krótka lista to dobry znak.

Potem obejrzyj stronę samodzielnie na telefonie. Problemy z kompresją najpierw widać na ostrych krawędziach, tekście w obrazach i odcieniach skóry.

Jeśli na twojej stronie codziennie przybywa obrazów, na przykład przez system zarządzania treścią lub sklep internetowy, kompresuj je podczas przesyłania lub publikacji zamiast ręcznie. API dla programistów Bitinz przyjmuje obraz przez HTTP i zwraca link do skompresowanego pliku, więc może działać w skrypcie lub w potoku budowania. Każde konto ma darmowy limit miesięczny.

1. 01Zmniejsz każdy obraz do mniej więcej dwukrotności rozmiaru, w jakim jest wyświetlany.
2. 02Do zdjęć używaj JPG lub WebP, a do grafik i przezroczystości PNG lub WebP.
3. 03Kompresuj na poziomie Zrównoważony, a przy największych obrazach wypróbuj Maksymalny.
4. 04Porównaj wynik z oryginałem, zanim go podmienisz.
5. 05Ustaw szerokość i wysokość, stosuj leniwe ładowanie dla obrazów poza pierwszym ekranem i nigdy dla głównego obrazu.
6. 06Ponownie sprawdź stronę w PageSpeed Insights.

Przesyłasz obrazy gdzieś indziej niż na własną stronę? Każda platforma ma własne zasady: zobacz wymagania dotyczące rozmiaru obrazów w e-mailach i sklepach internetowych.