Duże obrazy to powód numer jeden, dla którego strony ładują się wolno. Rozwiązaniem są niemal zawsze dwa kroki: nadaj obrazowi właściwe wymiary, a potem skompresuj to, co zostało. Zrób jedno i drugie, a zdjęcie 4 MB staje się zdjęciem 150 KB, które na ekranie wygląda identycznie.
Podstawmy do tego prawdziwe liczby.
Rozmiary docelowe, w które celować
Nie musisz zgadywać. Oto praktyczne budżety wagi, które trzymają strony szybko:
- Baner / element na pełną szerokość: poniżej 200 KB, idealnie ~100–150 KB.
- Zdjęcie w treści artykułu: 80–150 KB każde.
- Miniatura / awatar: 10–30 KB.
- Logo albo ikona (PNG/SVG): poniżej 30 KB; często znacznie mniej.
A wymiary:
- Baner na pełną szerokość: 1600–2000 px szerokości aż nadto dla większości układów (podwój tylko, jeśli celujesz w Retina i możesz sobie pozwolić na bajty).
- Zdjęcie w kolumnie: dopasuj do szerokości treści — często 800–1200 px.
- Miniatura: rozmiar, w jakim faktycznie się wyświetla, np. 300–400 px.
Jeśli jakikolwiek pojedynczy obraz na stronie przekracza ~300 KB, to zwykle błąd wart naprawy.
Krok 1: zmień rozmiar do prawdziwej szerokości wyświetlania
To ten krok, który ludzie pomijają, a jest największą dźwignią. Zdjęcie prosto z telefonu ma często ponad 4000 pikseli szerokości. Jeśli wyświetla się w kolumnie 800-pikselowej, wysyłasz 25 razy więcej pikseli, niż ekran pokazuje — a liczba pikseli napędza rozmiar pliku bardziej niż cokolwiek innego.
Skorzystaj z narzędzia do zmiany rozmiaru obrazu, żeby sprowadzić obraz do szerokości, w jakiej faktycznie się pojawia. Zmieniaj rozmiar w pikselach albo procentach, trzymaj zablokowane proporcje i pozwól zmniejszaniu wysokiej jakości utrzymać czyste krawędzie.
Sam właściwy rozmiar często tnie wagę pliku o 80–90%, zanim skompresujesz choć jeden bajt.
Krok 2: skompresuj to, co zostało
Teraz zmniejsz dane wewnątrz tych poprawnych wymiarów.
- Zdjęcia (JPG/WebP): ustaw suwak jakości na 75–85. To wizualnie bezstratne dla większości obrazów, a mocno tnie rozmiar.
- Pliki PNG (zrzuty ekranu, grafiki): narzędzie do kompresji redukuje je do palety 256 kolorów, zwykle oszczędzając 60–80% bez widocznej zmiany i zachowując przezroczystość.
Kompresor ogranicza też wynik do rozmiaru oryginału — nigdy nie odda czegoś większego — i ma opcjonalny limit szerokości, więc możesz właściwie zrobić oba kroki za jednym przejściem: ustaw limit na docelową szerokość i skompresuj naraz. Przetwórz wsadowo cały folder i pobierz go jako ZIP.
Przy okazji wybierz właściwy format
Jeśli Twoje obrazy będą podawane nowoczesnym przeglądarkom, konwersja zdjęć na WebP zwykle bije JPEG o kolejne 25–35% przy tej samej jakości. Płaskie grafiki zostają jako PNG (albo WebP). Nie zapisuj zdjęć jako PNG — to klasyczny błąd puchnięcia, spokojnie kara 5–10×.
Realistyczny proces
Dla wpisu na blogu z pięcioma zdjęciami:
- Zmień rozmiar każdego do szerokości Twojej kolumny (powiedzmy 1200 px).
- Skompresuj przy jakości 80 albo skonwertuj na WebP.
- Potwierdź, że każde ląduje poniżej ~150 KB.
- Sprawdź kadr 100% jednego obrazu, żeby mieć pewność, że jakość się utrzymała.
Pięć zdjęć, które zaczynały od łącznie 20 MB, wyląduje w okolicach 600 KB — strona, która ładuje się w mgnieniu oka zamiast się zacinać.
Prywatnie i offline
Wszystko powyższe działa w całości w Twojej przeglądarce dzięki Canvas i WebAssembly. Żaden obraz nie jest przesyłany na serwer, a po pierwszej wizycie narzędzia są w cache i działają offline. Możesz zoptymalizować obrazy z całego wpisu bez połączenia i bez tego, żeby cokolwiek opuściło Twoją maszynę.