Jak prawidłowo dobrać rozmiar obrazów

Zmierz najszerszy rozmiar, w jakim obraz jest kiedykolwiek wyświetlany, podwój go dla ekranów o wysokiej gęstości pikseli i zmień rozmiar swojej biblioteki do tej wartości. Serwowanie zdjęcia o szerokości 4000 pikseli w miejscu przeznaczonym na 800 pikseli oznacza, że przeglądarka pobiera około 25 razy więcej danych pikseli, niż jest w stanie wyświetlić, po czym odrzuca resztę.

Przy połączeniu mobilnym odwiedzający płaci za to wszystko – swoim czasem i pakietem danych. Prawidłowe określenie rozmiaru obrazów to zazwyczaj najprostszy sposób na największą redukcję wagi strony, a wymaga jedynie przetworzenia jednej partii plików, a nie przebudowy całej witryny.

Dlaczego zbyt duże obrazy kosztują tak wiele

Rozmiar pliku skaluje się wraz z liczbą pikseli, więc zmniejszenie szerokości i wysokości o połowę usuwa około 75 procent danych. Zależność ta jest kwadratowa, a nie liniowa, dlatego marnotrawstwo rośnie tak szybko.

Pierwszy wiersz to częsty przypadek na stronach, gdzie redaktorzy przesyłają zdjęcia bezpośrednio z aparatu. Przeglądarka pobiera 4.2 MB, zmniejsza obraz i wyświetla odpowiednik pliku o rozmiarze 180 KB.

Jak zmierzyć rzeczywisty rozmiar wyświetlania

Kliknij prawym przyciskiem myszy na obraz na działającej stronie, wybierz Zbadaj i odczytaj wyświetlane wymiary zamiast wymiarów rzeczywistych. Przeglądarki podają obie te wartości, a różnica między nimi to właśnie marnotrawstwo.

Sprawdź najszerszy możliwy wariant wyświetlania, a nie ten typowy. Obraz wewnątrz kolumny artykułu może mieć szerokość 700 pikseli na komputerze i 380 na telefonie, więc to 700 jest kluczową liczbą. Testuj przy najszerszym oknie przeglądarki, jakiego realistycznie używają Twoi odbiorcy, ponieważ baner na pełną szerokość rośnie wraz z ekranem i wymaga innych obliczeń.

Zasada podwajania dla ekranów o wysokiej gęstości

Pomnóż szerokość wyświetlania przez 2 i na tym poprzestań, ponieważ ekrany o jeszcze większej gęstości nie dają żadnej zauważalnej poprawy jakości. Obraz wyświetlany w rozmiarze 700 pikseli powinien być wyeksportowany w rozmiarze 1400 pikseli.

Potrajanie rozdzielczości jest czasami sugerowane, ale rzadko uzasadnione. Różnica między dwukrotną a trzykrotną gęstością jest niewykrywalna przy normalnej odległości patrzenia, podczas gdy plik rośnie o ponad połowę. Mocniejsza kompresja przy dwukrotnej gęstości daje lepszy rezultat niż lekka kompresja przy trzykrotnej, ponieważ dodatkowe piksele maskują artefakty kompresji.

Typowe szerokości wyświetlania do zmiany rozmiaru

• Obraz w treści artykułu: wyświetla się w około 700 px, eksportuj w 1400 px.
• Baner hero na pełną szerokość: wyświetla się do 1920 px, eksportuj w 1920 px i skompresuj mocniej.
• Element na pół szerokości: wyświetla się w około 600 px, eksportuj w 1200 px.
• Miniaturka w siatce produktów: wyświetla się w około 300 px, eksportuj w 600 px.
• Zdjęcie autora lub profilowe: wyświetla się w około 80 px, eksportuj w 160 px.
• Logo w nagłówku: wyświetla się w około 180 px, eksportuj w 360 px lub użyj grafiki wektorowej.

Dlaczego obrazy na pełną szerokość są wyjątkiem

Baner na pełną szerokość nie ma stałego rozmiaru wyświetlania, więc ogranicz go do 1920 pikseli i skompresuj mocniej, zamiast podwajać rozmiar. Podwojenie obrazu na pełną szerokość do 3840 pikseli generuje plik, którego rozmiaru nie da się usprawiedliwić na żadnej stronie.

Banery są zazwyczaj oglądane z większej odległości i zawierają mniej drobnych szczegółów niż zdjęcia produktów, co oznacza, że agresywna kompresja jest na nich mniej zauważalna. Baner o szerokości 1920 pikseli przy jakości 70 w formacie WebP zazwyczaj waży poniżej 200 KB i wygląda poprawnie na każdym ekranie, podczas gdy wersja 3840 pikseli nie przynosi widocznych korzyści, ważąc 4 razy więcej.

Jak naprawić całą bibliotekę

Aby prawidłowo zmienić rozmiar obrazów na istniejącej stronie, wykonaj te 6 kroków.

1. Wypisz miejsca na obrazy w swoim szablonie – zazwyczaj jest to od 4 do 6 konkretnych rozmiarów, a nie dziesiątki.
2. Zmierz szerokość wyświetlania każdego miejsca za pomocą narzędzia zbadaj element w przeglądarce na działającej stronie.
3. Podwój każdą szerokość, aby uzyskać docelowy rozmiar eksportu.
4. Uporządkuj bibliotekę do folderów odpowiadających miejscom wyświetlania, ponieważ przetwarzanie wsadowe stosuje jeden rozmiar do wszystkich plików w folderze.
5. Zmień rozmiar każdego folderu do jego docelowej szerokości, a następnie skompresuj i przekonwertuj pliki w tym samym kroku.
6. Zastąp pliki na serwerze, zachowując te same nazwy, aby istniejące strony nadal działały poprawnie.

Podział na foldery to krok, który zamienia to zadanie w proces wsadowy. Większość stron używa znacznie mniejszej liczby różnych rozmiarów obrazów, niż się wydaje, a grupowanie według przeznaczenia eliminuje potrzebę ręcznej obróbki każdego pliku z osobna.

Obrazy responsywne i atrybut srcset

Użyj atrybutu srcset, aby zaoferować kilka rozmiarów i pozwolić przeglądarce wybrać odpowiedni dla danego urządzenia. Telefon pobierze wtedy plik o szerokości 400 pikseli, podczas gdy komputer pobierze plik 1400 pikseli z tego samego kodu strony.

Wygeneruj 3 szerokości dla każdego obrazu, najczęściej 400, 800 i 1600 pikseli, i umieść je w kodzie wraz z ich szerokościami, aby przeglądarka mogła dokonać wyboru. Większość systemów zarządzania treścią tworzy je automatycznie podczas przesyłania, więc sprawdź, co Twoja platforma już oferuje. Nawet w takim przypadku przesłanie prawidłowo przygotowanego oryginału poprawia jakość każdego wygenerowanego wariantu.

Zawsze najpierw zmieniaj rozmiar, potem kompresuj

Zmiana rozmiaru w pierwszej kolejności sprawia, że algorytm kompresji ma mniej pracy, dzięki czemu jakość może pozostać wysoka przy zachowaniu małego rozmiaru pliku. Kompresowanie najpierw, a następnie zmniejszanie obrazu powoduje utratę szczegółów, które i tak zostaną odrzucone.

Kolejność ta wpływa również na wygląd końcowy. Obraz skompresowany w pełnym rozmiarze zawiera artefakty, które stają się bardziej widoczne po zmniejszeniu obrazu, ponieważ artefakty skalują się wraz z nim. Zmiana rozmiaru na początku tworzy czystszy plik źródłowy dla kodera i daje zauważalnie lepszy rezultat przy tym samym rozmiarze pliku.

Co to daje dla szybkości strony

Prawidłowe dopasowanie rozmiaru obrazów zazwyczaj usuwa od 60 do 90 procent wagi grafiki na stronie, która nigdy wcześniej tego nie robiła. Poprawa ta jest większa niż jakakolwiek zmiana formatu i zazwyczaj większa niż wszystkie inne optymalizacje razem wzięte.

Efekt ten jest najbardziej odczuwalny dla użytkowników mobilnych, gdzie połączenia są wolniejsze, a transfer danych kosztuje. Wskaźnik Largest Contentful Paint ulega bezpośredniej poprawie, ponieważ o tym wyniku najczęściej decyduje jeden duży obraz. Rozwiązanie problemu zgłaszanego w audycie "Prawidłowo określ rozmiar obrazów" w Lighthouse często eliminuje 2 lub 3 powiązane ostrzeżenia w tym samym czasie.

Nigdy nie powiększaj obrazu, aby go dopasować

Powiększanie dodaje piksele, których aparat nigdy nie zarejestrował, przez co obraz staje się rozmyty, a plik rośnie bez żadnych korzyści. Zmniejszanie rozmiaru jest zawsze bezpieczne, natomiast powiększanie to jedyna operacja, która gwarantuje gorszy wygląd.

Gdy obraz źródłowy jest mniejszy niż miejsce, które musi zapełnić, najlepszym rozwiązaniem jest użycie go w jego naturalnym rozmiarze, dostosowanie układu strony lub wymiana obrazu. Powiększenie zdjęcia o szerokości 600 pikseli do 1600 pikseli daje rozmyty plik o wadze 4 razy większej niż oryginał, co negatywnie wpływa zarówno na jakość, jak i szybkość strony.

Sprawdzanie strony pod kątem zbyt dużych obrazów

Otwórz narzędzia deweloperskie, przejdź do zakładki Sieć (Network), przefiltruj wyniki według obrazów i odśwież stronę. Lista pokaże każdy obraz wraz z rozmiarem jego transferu, posortowana od największego.

Każdy pojedynczy obraz o rozmiarze powyżej 500 KB jest warty zbadania, a każda strona, na której łączna waga obrazów przekracza 2 MB, ma problem. Najedź kursorem na obraz w panelu Elementy, aby zobaczyć jego rzeczywisty i wyświetlany rozmiar obok siebie. Duża różnica między tymi dwiema liczbami to definicja nieprawidłowo dobranego rozmiaru obrazu, którą można zauważyć w kilka sekund.

Zmiana rozmiaru biblioteki w jednej partii

Ustaw docelową szerokość raz i zastosuj ją do każdego pliku w folderze, zamiast zmieniać rozmiar każdego obrazu z osobna. Biblioteka składająca się z kilkuset obrazów zmienia rozmiar w kilka minut, gdy praca jest wykonywana seryjnie.

Przeciągnij do 500 plików naraz lub upuść archiwum ZIP bezpośrednio do narzędzia, a następnie ustaw szerokość, format i docelową kompresję dla całego zestawu. Wszystko działa wewnątrz Twojej przeglądarki, korzystając z Twojego procesora, więc pliki klientów, zasoby robocze i niepublikowane galerie nigdy nie trafiają na serwer zewnętrzny. Nic nie jest przesyłane do sieci, co oznacza, że zmiana rozmiaru całej biblioteki odbywa się bez wysyłania choćby jednego pliku przez internet.