Optymalizacja obrazów

Silktide pobiera obrazy na Twoich stronach i sprawdza, czy można znacząco zmniejszyć ich rozmiar bez widocznej zmiany wyglądu. Obrazy, których rozmiar można zmniejszyć, są zgłaszane wraz z możliwą oszczędnością, aby umożliwić Ci nadanie priorytetu największym korzyściom.

Dlaczego to jest ważne

Obrazy zwykle stanowią większość rozmiaru strony internetowej, dlatego są zazwyczaj największą pojedynczą możliwością poprawy wydajności. Zbyt duże obrazy powodują wolniejsze wyświetlanie stron, co w mierzalny sposób zwiększa liczbę porzuceń — szczególnie w przypadku połączeń mobilnych — oraz zużywa transfer danych i baterię odwiedzających. Szybkość strony wpływa również na pozycjonowanie w wyszukiwarkach poprzez .

W przeciwieństwie do większości działań związanych z wydajnością optymalizacja obrazów rzadko wymaga kompromisów: prawidłowo skompresowany obraz wygląda i działa tak samo. To niemal darmowa poprawa wydajności.

Jak to naprawić

Skompresuj zgłoszone obrazy. Niemal każde narzędzie do obróbki obrazów umożliwia to podczas eksportu; zdjęcia powinny zazwyczaj być zapisane jako JPEG z jakością około 85%, co znacznie zmniejsza rozmiar pliku przy minimalnej widocznej utracie jakości.
Użyj odpowiedniego formatu: JPEG (lub WebP/AVIF) do zdjęć; PNG lub SVG do logo, ikon i innych grafik o jednolitych kolorach. Nowoczesne formaty, takie jak WebP i AVIF, są lepsze od obu tych formatów tam, gdzie Twoja platforma je obsługuje.
Zautomatyzuj ten proces. Większość , potoków kompilacji i może kompresować oraz konwertować obrazy podczas przesyłania lub dostarczania — naprawienie potoku zapobiega ponownemu występowaniu problemu.
Dostarczaj obrazy w rozmiarze, w którym są wyświetlane, używając obrazów responsywnych (srcset) zamiast wysyłać jeden ogromny obraz na każde urządzenie:

<img src="hero-800.jpg"
     srcset="hero-800.jpg 800w, hero-1600.jpg 1600w"
     sizes="(max-width: 800px) 100vw, 800px"
     alt="Winnica o zachodzie słońca">

Jak Silktide to testuje

Zbiera obrazy, które każda strona rzeczywiście ładuje.
Ponownie kompresuje każdy obraz technikami odpowiednimi dla jego formatu: progresywny JPEG z jakością 85%, stratna i bezstratna ponowna kompresja PNG, SVG oraz ponowna optymalizacja GIF.
Porównuje najlepszy wynik z oryginałem. Obraz jest zgłaszany tylko wtedy, gdy oszczędność jest znacząca: rozmiar jest mniejszy o ponad 20% i oszczędza się ponad 40 KB.
Podaje możliwe zmniejszenie dla każdego obrazu, aby największe oszczędności były wyraźnie widoczne.

Rozwiązywanie problemów

Obraz już wygląda na skompresowany

Zgłoszona oszczędność jest zmierzona, a nie szacowana — Silktide faktycznie utworzył mniejszy plik. Typowe przyczyny, dla których pozornie zoptymalizowany obraz nadal można zmniejszyć o 20%, obejmują osadzone metadane, nieprogresywne kodowanie JPEG oraz używanie PNG do zdjęć.

Używamy sieci CDN, która optymalizuje obrazy

Silktide testuje to, co strona rzeczywiście dostarczyła, więc jeśli zgłoszony obraz przeszedł przez Twoją sieć CDN, ta optymalizacja albo nie została zastosowana, albo była niewystarczająca. Sprawdź ustawienia sieci CDN dla ścieżek lub formatów, których dotyczy problem.

Oszczędność wydaje się niewielka

Obrazy, których rozmiar mieści się w granicy 20% lub 40 KB od optymalnego, nie są zgłaszane. Jeśli zgłoszona oszczędność wydaje się niewielka, pamiętaj, że dotyczy ona każdego wyświetlenia strony przez każdego odwiedzającego.