Dlaczego Obrazy na Twojej Stronie Muszą Być Kompresowane | Bulk Image Compressor
Jeśli Twoja strona internetowa ładuje się dłużej niż kilka sekund, ludzie wychodzą. To nie opinia. Badania Google pokazują, że współczynnik odrzuceń wzrasta o 32%, gdy czas ładowania strony wzrasta z jednej sekundy do trzech sekund. A obrazy są prawie zawsze największym powodem, dla którego strony ładują się wolno.
Większość stron internetowych serwuje obrazy, które są znacznie większe niż potrzebują. Pojedynczy obraz bohatera prosto z aparatu lub strony z zdjęciami stockowymi może z łatwością mieć 5MB lub więcej. Na przyzwoitym łączu szerokopasmowym ten plik sam w sobie ładuje się kilka sekund. Na mobilnym połączeniu 3G mówimy o około 15 sekundach tylko na jeden obraz. Teraz wyobraź sobie stronę z pięcioma lub sześcioma takimi obrazami.
Jak duże są Twoje obrazy naprawdę?
Oto szybki test rzeczywistości. Otwórz narzędzia deweloperskie przeglądarki (F12), przejdź do zakładki Sieć, przeładuj stronę i filtruj według “Img.” Spójrz na rozmiary. Prawdopodobnie znajdziesz co najmniej kilka obrazów powyżej 1MB.
Dla porównania, oto jak wyglądają typowe nieskompresowane obrazy:
- Zdjęcie z lustrzanki użyte jako baner bohatera: 4 do 8MB
- Zdjęcie produktu ze smartfona: 2 do 5MB
- Zdjęcie stockowe pobrane w pełnej rozdzielczości: 3 do 10MB
- Infografika lub ilustracja zapisana jako PNG: 1 do 4MB
Po odpowiedniej kompresji te same obrazy mogą mieć 100KB do 300KB bez widocznej utraty jakości. To 90% lub większa redukcja rozmiaru pliku.
Szybkość strony i Core Web Vitals
Google używa Core Web Vitals jako sygnału rankingowego, a obrazy bezpośrednio wpływają na dwa z trzech wskaźników.
Largest Contentful Paint (LCP) mierzy, jak długo trwa załadowanie największego widocznego elementu. Na większości stron tym największym elementem jest obraz. Jeśli Twój obraz bohatera ma 5MB, Twój LCP będzie fatalny. Google uznaje wszystko powyżej 2,5 sekundy za słaby wynik LCP. Skompresowane obrazy rutynowo sprowadzają LCP poniżej tego progu.
Cumulative Layout Shift (CLS) mierzy stabilność wizualną. Obrazy bez określonych wymiarów powodują przesunięcia układu podczas ładowania. To bardziej kwestia atrybutów HTML niż kompresji, ale zbyt duże obrazy, które ładują się wolno, pogarszają problem, ponieważ strona renderuje treść wokół miejsca zarezerwowanego, które może nie pasować do końcowego rozmiaru obrazu.
Możesz sprawdzić swoje aktualne wyniki za pomocą Google PageSpeed Insights. Uruchom dla swojej strony głównej i kilku wewnętrznych stron. Jeśli Twój wynik wydajności jest poniżej 90, obrazy są prawdopodobnie dużą częścią problemu.
Związek z SEO
Szybkość strony jest potwierdzonym czynnikiem rankingowym Google. Jest nim od 2010 roku dla desktopów i od 2018 dla urządzeń mobilnych. Wprowadzenie Core Web Vitals w 2021 uczyniło to jeszcze bardziej bezpośrednim.
Ale wpływ wykracza poza sam sygnał szybkości. Wolne strony są rzadziej indeksowane przez Googlebota. Google przydziela “budżet indeksowania” każdej stronie, a jeśli Twoje strony są wolne, bot wydaje swój budżet na czekanie na odpowiedzi zamiast indeksowania większej ilości Twoich treści. W przypadku większych stron z setkami lub tysiącami stron ma to duże znaczenie.
Jest też pośredni efekt poprzez zachowanie użytkowników. Gdy ludzie odbijają się od wolnych stron, Google to zauważa. Wysokie współczynniki odrzuceń i niski czas spędzony na stronie wysyłają negatywne sygnały zaangażowania, które mogą wpłynąć na Twoje pozycje w czasie.
Doświadczenie użytkownika i współczynniki odrzuceń
Ludzie są niecierpliwi w internecie. Badanie Portent wykazało, że współczynniki konwersji spadają średnio o 4,42% za każdą dodatkową sekundę czasu ładowania. Jeśli Twoja strona e-commerce ładuje się pięć sekund zamiast dwóch, możesz tracić znaczący procent sprzedaży.
Użytkownicy mobilni są jeszcze mniej cierpliwi. Ponad połowa całego ruchu internetowego pochodzi z urządzeń mobilnych, a połączenia mobilne są zazwyczaj wolniejsze niż desktopowe. Twoje obrazy muszą być wystarczająco małe, aby ładować się szybko na telefonie korzystającym z sieci komórkowej.
Jest też czynnik percepcji. Szybka strona wydaje się bardziej profesjonalna i godna zaufania. Wolna strona wydaje się zepsuta, nawet jeśli wszystko ostatecznie się ładuje. Pierwsze wrażenia mają miejsce w milisekundach.
Koszty przepustowości się sumują
Jeśli jesteś na współdzielonym hostingu lub podstawowym planie, przepustowość może nie być czymś, o czym myślisz. Ale w przypadku stron z prawdziwym ruchem, przepustowość kosztuje pieniądze.
Zróbmy kilka obliczeń. Powiedzmy, że Twoja przeciętna strona ma 3MB obrazów i masz 100 000 odsłon miesięcznie. To 300GB danych obrazów przesyłanych miesięcznie. Po kompresji te same strony mogą mieć 400KB obrazów, zmniejszając transfer do 40GB. To znacząca redukcja kosztów hostingu i rachunków za CDN.
W przypadku stron o dużym ruchu, firm medialnych lub sklepów e-commerce z dużymi katalogami produktów, ta różnica może zaoszczędzić setki lub tysiące dolarów miesięcznie.
Jak pakietowo kompresować obrazy na stronie
Mógłbyś kompresować obrazy jeden po drugim w Photoshopie lub GIMP-ie, ale jeśli masz dziesiątki lub setki obrazów, to niepraktyczne. Kompresja wsadowa to właściwy sposób.
Dzięki Bulk Image Compressor możesz przeciągnąć wszystkie obrazy ze swojej strony naraz i skompresować je razem. Oto praktyczny przepływ pracy:
-
Wyeksportuj swoje obecne obrazy. Jeśli są już na stronie, pobierz je. Jeśli budujesz nową stronę, zbierz wszystkie obrazy, których planujesz użyć.
-
Wybierz format. Do zdjęć najlepsze są JPEG lub WebP. Do grafik z przezroczystością użyj PNG lub WebP. Jeśli nie jesteś pewien, który format wybrać, sprawdź nasz przewodnik po formatach obrazów dla wydajności stron.
-
Ustaw poziom jakości. W przypadku większości obrazów na stronie ustawienie jakości 75 do 85% daje dobry balans między rozmiarem pliku a jakością wizualną. Możesz zejść niżej w przypadku miniatur lub obrazów tła. Więcej szczegółów na temat tego kompromisu znajdziesz w naszym artykule zmniejszanie rozmiaru pliku bez utraty jakości.
-
Kompresuj i pobierz. Narzędzie przetwarza wszystko w Twojej przeglądarce, więc Twoje obrazy nigdy nie opuszczają komputera. Zastąp oryginały na swoim serwerze skompresowanymi wersjami.
-
Ustaw też wymiary. Nie serwuj obrazu o szerokości 4000px w kontenerze o szerokości tylko 800px. Zmień rozmiar obrazów, aby pasowały do rozmiaru wyświetlania przed lub podczas kompresji. To samo w sobie może drastycznie zmniejszyć rozmiary plików.
Szybki przykład przed i po
Oto jak kompresja wygląda w praktyce dla typowej strony internetowej:
| Obraz | Przed | Po | Oszczędności |
|---|---|---|---|
| Baner bohatera (JPEG) | 4,2MB | 210KB | 95% |
| Zdjęcie zespołu (JPEG) | 3,1MB | 185KB | 94% |
| Logo (PNG) | 890KB | 95KB | 89% |
| Miniatura bloga (JPEG) | 1,8MB | 120KB | 93% |
| Razem | 10MB | 610KB | 94% |
To różnica między stroną, która ładuje się w jedną sekundę, a taką, która ładuje się w osiem.
Nie zapominaj o nowych treściach
Kompresowanie istniejących obrazów to jednorazowa naprawa, ale potrzebujesz też procesu dla bieżących treści. Za każdym razem, gdy Ty lub Twój zespół dodajecie nowy wpis na bloga, stronę produktu lub stronę docelową, te obrazy powinny być skompresowane, zanim trafią na stronę.
Uczyń kompresję obrazów częścią swojego przepływu pracy publikowania treści. Zajmuje to kilka minut, a wpływ na szybkość strony i SEO jest realny i mierzalny.
Obrazy na Twojej stronie są prawdopodobnie pojedynczą największą poprawą wydajności, jaką możesz wprowadzić. Narzędzia są darmowe, proces jest szybki, a wyniki są natychmiast widoczne w wynikach szybkości strony.
Ready to compress your images?
Bulk compress JPEG, PNG, WebP, and AVIF images right in your browser. No uploads, no sign-ups.
Try Bulk Image Compressor