Jakie ustawienie jakości wybrać dla obrazów webowych?
Pojedyncze najbardziej wpływowe ustawienie obrazu to takie, które większość ludzi zostawia na domyślnym. Oto co faktycznie kontroluje suwak jakości i na co go ustawić.
Każde narzędzie do kompresji obrazów ma suwak jakości, zwykle od 0 do 100. Większość ludzi przesuwa go na jakąś okrągłą liczbę - 80, 85, może 90 - i idzie dalej. Ale ten suwak to dosłownie najbardziej wpływowa pojedyncza decyzja dotycząca rozmiaru pliku, a domyślne ustawienie jest prawie zawsze złe dla zastosowań webowych.
Co naprawdę kontroluje suwak jakości
W formatach stratnych - JPG, WebP, AVIF - ustawienie jakości kontroluje, jak agresywnie koder wyrzuca informację. Konkretnie: siłę kwantyzacji, czyli jak gruboziarniście zaokrąglane są komponenty częstotliwościowe każdego bloku obrazu.
Przy jakości 100 nic nie jest kwantyzowane (choć obraz wciąż jest transformowany stratnie - to nie to samo co bezstratny). Przy jakości 1 wyrzucane jest niemal wszystko: blokowe, rozmyte, przebarwione wyjście.
Ale uwaga - ten kompromis nie jest liniowy:
- Przejście z jakości 100 → 90 oszczędza ~50% rozmiaru pliku z niemal żadną widoczną zmianą
- Przejście z jakości 90 → 80 oszczędza kolejne ~20% z drobną degradacją
- Przejście z jakości 80 → 70 oszczędza kolejne ~15% z bardziej zauważalnymi zmianami
- Poniżej jakości 60 artefakty stają się trudne do zignorowania
- Poniżej jakości 40 obraz jest wyraźnie uszkodzony
Implikacja: jakość 75 daje ci 70% oszczędności rozmiaru z jakości 50 z ułamkiem widocznych uszkodzeń. Jakość 90 marnuje bajty bez widocznej korzyści.
Jak faktycznie wyglądają różne poziomy jakości
Przybliżona zasada dla zdjęcia JPG 1500×1000 px:
| Jakość | Rozmiar pliku | Wygląd wizualny |
|---|---|---|
| 100 | ~800 KB | Identyczny ze źródłem (efektywnie bezstratny) |
| 95 | 500 KB | Nieodróżnialny od źródła przy dowolnym zoomie |
| 85 | 260 KB | Nieodróżnialny z normalnej odległości oglądania |
| 75 | 170 KB | Drobne zmiękczenie w drobnej teksturze; niewidoczne w większości zdjęć |
| 65 | 120 KB | Lekkie zmiękczenie zauważalne przy bliskim oglądaniu |
| 55 | 90 KB | Widoczne zmiękczenie; akceptowalne dla miniatur |
| 40 | 60 KB | Wyraźne artefakty; tylko dla mocno rozmazanych teł |
| 20 | 35 KB | Oczywiste blokowanie i przebarwienia |
Twoje konkretne liczby będą się różnić - zdjęcie z dużą ilością drobnych szczegółów (liście, tkanina, tekstury) pokazuje artefakty wcześniej niż gładki obraz (portret na jednolitym tle).
Dopasowanie jakości do zastosowania
Zdjęcia hero i ujęcia produktów
To obrazy, na które użytkownicy faktycznie patrzą. Wypełniają ekran, przyciągają uwagę, niosą estetyczny ciężar twojej marki. Chcesz, żeby były ostre, ale nie marnotrawne.
Zalecane: jakość 80-85. Nawet obsesyjni na punkcie detali widzowie na ekranach retina nie zobaczą artefaktów, a oszczędzasz 40-60% vs jakość 95.
Miniatury galerii
Małe obrazy wyświetlane w 200-400 px szerokości. Użytkownicy spoglądają i klikają, jeśli zainteresowani. Drobne szczegóły są przy tym rozmiarze w dużej mierze niewidoczne.
Zalecane: jakość 65-75. Nie marnuj bajtów, żeby miniatury były ostrzejsze, niż rozdzielczość wyświetlania pozwoli zauważyć.
Zdjęcia tła hero z nakładką
Obrazy za tekstem lub gradientami. Większość obrazu jest zasłonięta lub wizualnie zdeemfazowana. Drobne szczegóły są prawie nigdy niezauważane.
Zalecane: jakość 55-70. Nakładka ukrywa artefakty. Tu rozmiar pliku ma większe znaczenie niż jakość, bo to często ogromne obrazy.
Loga i elementy graficzne
Te w ogóle nie powinny być w JPG. Powinny być w PNG lub SVG. Jeśli z jakiegoś powodu muszą być JPG, potrzebujesz jakości 90+, żeby uniknąć widocznego dzwonienia wokół ostrych krawędzi. Lepiej: przekonwertuj je do PNG.
Zrzuty ekranu i obrazy UI
Zawierają tekst lub ostre krawędzie - JPG je zmasakruje w dowolnej jakości. Zapisz jako PNG (bezstratnie) lub użyj bezstratnego WebP.
Obrazy, które będą ponownie edytowane i zapisywane
Każdy ponowny zapis kumuluje utratę jakości JPG. Jeśli obraz będzie edytowany przez twój zespół wielokrotnie, zapisz master jako PNG i eksportuj do JPG dopiero na końcu, jak najpóźniej.
Jakość percepcyjna vs liczbowa
Subtelność, o której często się zapomina: liczba jakości na suwaku nie mapuje się na skalę percepcyjną. JPG jakość 80, WebP jakość 80 i AVIF jakość 80 wyglądają bardzo różnie od siebie, bo każdy koder interpretuje tę liczbę inaczej.
Przybliżone tłumaczenie:
- JPG jakość 80 ≈ WebP jakość 75 ≈ AVIF jakość 65
Przy zmianie formatu przetestuj suwak od nowa - nie zostawiaj tej samej liczby.
Test porównania A/B
Niezawodny sposób na wybór ustawienia jakości dla twoich konkretnych obrazów:
- Weź reprezentatywny obraz (lub kilka)
- Wyeksportuj kopie w jakości 90, 80, 70, 60, 50
- Otwórz na pełnym ekranie obok siebie z oryginałem
- Znajdź najniższą jakość, w której nie potrafisz ich niezawodnie odróżnić
- Podnieś o 5 dla bezpieczeństwa
- To jest twoje ustawienie
Dla większości zdjęć na większości ekranów ten proces kończy się na jakości 70-80.
Jak dobrać jakość w naszym narzędziu
Nasz Image Compressor ma suwak jakości od 0 do 100 i pokazuje wynikowy rozmiar pliku na żywo, gdy go przesuwasz.
- Przeciągnij obraz
- Zacznij z suwakiem na 75
- Patrz na podgląd - czy jakość jest akceptowalna?
- Zjedź w dół, aż zobaczysz artefakty, potem wróć 5 punktów w górę
- Pobierz
Brak round-tripów na serwer oznacza, że możesz szybko iterować. Wypróbuj jakość 70 - dla większości zdjęć dosłownie nie zobaczysz różnicy, ale twoi użytkownicy dostają plik o 40% mniejszy.
Tabela TL;DR
| Typ obrazu | Zalecana jakość |
|---|---|
| Zdjęcie hero (eksponowane, widz na nie patrzy) | 80-85 |
| Zwykłe zdjęcie contentowe | 75 |
| Miniatura galerii | 65-75 |
| Obraz tła z nakładką | 55-70 |
| Rozmyte / dekoracyjne tło | 40-55 |
| Obraz, który będzie ponownie edytowany | Trzymaj jako PNG do finalnego eksportu |
| Logo, ikona, diagram, zrzut ekranu | Nie używaj JPG - użyj PNG |
Jeśli masz zapamiętać jedną liczbę, to 75. Właściwe domyślne ustawienie dla większości zdjęć webowych - oszczędza mniej więcej połowę rozmiaru pliku vs typowe 85-90.