Responsywne obrazy

Silktide ładuje Twoje strony w rzeczywistej przeglądarce i porównuje rzeczywiste wymiary każdego obrazu z rozmiarem, w jakim jest wyświetlany. Zgłaszane są obrazy znacznie większe niż te widoczne na ekranie, wraz z ilością danych zmarnowanych przez nadmiarową rozdzielczość.

Dlaczego to jest ważne

Częsty scenariusz: przesyłane jest zdjęcie o szerokości 4000 pikseli, a strona wyświetla je z szerokością 400 pikseli. Odwiedzający pobierają plik w pełnej rozdzielczości — potencjalnie o rozmiarze kilku megabajtów — aby zobaczyć coś, co znacznie mniejszy plik wyświetliłby identycznie. Marnotrawstwo jest największe na telefonach, które mają najmniejsze ekrany i często najwolniejsze oraz najdroższe połączenia. Szybsze strony zatrzymują więcej odwiedzających i wpływają na pozycję w wynikach wyszukiwania poprzez .

Jak to naprawić

Udostępnij każdy obraz w kilku rozmiarach i pozwól przeglądarce wybrać odpowiedni dla urządzenia:

<!-- Przeglądarka pobiera tylko potrzebny rozmiar -->
<img src="flower-800.jpg"
     srcset="flower-400.jpg 400w, flower-800.jpg 800w, flower-1600.jpg 1600w"
     sizes="(max-width: 600px) 100vw, 50vw"
     alt="Stoisko z kwiatami na targu">

Zautomatyzuj zmianę rozmiaru. Większość generuje wiele rozmiarów podczas przesyłania, a mogą zmieniać rozmiar przy dostarczaniu — oba rozwiązania zapobiegają ponownemu występowaniu problemu.
Jako minimum zmieniaj rozmiar jednorazowo używanych obrazów do wartości zbliżonej do rozmiaru, w jakim są wyświetlane, przed ich przesłaniem.

Jak Silktide to testuje

Załaduj stronę w rzeczywistej przeglądarce i zapisz rozmiar, w jakim wyświetlany jest każdy obraz, uwzględniając wyższą ostrość ekranów nowoczesnych urządzeń.
Porównaj go z wymiarami faktycznie pobranego pliku obrazu.
Zgłoś obrazy, w przypadku których nadmiar jest istotny, wraz z liczbą bajtów, które zaoszczędziłby obraz o odpowiednim rozmiarze, zaczynając od największych.

Rozwiązywanie problemów

Czym różni się to od innych kontroli obrazów?

Ta kontrola dotyczy wymiarów: dostarczania obrazu fizycznie większego niż ten wyświetlany na stronie. Kompresja obrazów i Optymalizacja obrazów dotyczą zmniejszania pliku przy zachowaniu tych samych wymiarów, a Nowoczesne formaty obrazów dotyczą konwersji do WebP lub AVIF. Ten sam obraz może występować w kilku kontrolach — poprawki wzajemnie się uzupełniają.

Obraz wygląda ostro dzięki ekranom o wysokiej rozdzielczości

Nowoczesne ekrany rzeczywiście potrzebują więcej pikseli, niż sugeruje rozmiar wyświetlania, a pomiar to uwzględnia. Obrazy są zgłaszane tylko wtedy, gdy przekraczają to, co może wykorzystać nawet ekran o wysokiej rozdzielczości.