Praktyczny poradnik rozmiarów i formatów obrazów w internecie

Każdy obraz korzysta z sieci, dekodowania, pamięci i renderowania. Użyteczny budżet jest właściwy dla strony: uwzględnia rolę obrazu, odbiorców, pamięć podręczną, viewport i jakość. Poniższe zakresy są punktami startowymi do testów, nie uniwersalnymi granicami.

Budżety początkowe według zastosowania

Te zakresy pokazują oszczędny budżet dostawy internetowej. Wyniki JPEG, WebP lub AVIF mogą być wyższe albo niższe; dostosuj je do źródła, kodera, rozmiaru wyświetlania, wyników terenowych i oceny wizualnej.

Jak zamienić zakresy początkowe we własny budżet

Raport HTTP Archive o wadze stron podaje aktualny rozkład, ale globalna mediana nie opisuje Twojej grupy odbiorców. Opublikowany przez Google „dobry” próg LCP wynosi 2,5 sekundy na 75. percentylu wizyt. Użyj danych terenowych i wykresu ładowania, by podzielić czas na odpowiedź serwera, wykrycie zasobu, transfer, dekodowanie i opóźnienie renderowania.

Zacznij od budżetu transferu strony i przydziel więcej obrazom o największej wartości dla użytkownika. Ponownie oceniaj zakresy, gdy zmienia się układ, liczba obrazów, odbiorcy lub jakość.

Format jest jedną z głównych zmiennych

To samo źródło może dać bardzo różne rozmiary zależnie od kodera i celu jakości. Tabela pokazuje zachowanie do porównania, a nie uniwersalny benchmark zdjęcia 1200 pikseli.

WebP lub AVIF mogą w części porównań pokonać JPEG, ale stały procent nie obowiązuje wszystkich źródeł i koderów. Oba nowoczesne formaty obsługują przezroczystość. Zobacz poradnik WebP i AVIF.

Twórz kandydatów przez JPG na WebP, Konwersję na AVIF dla podanych wejść albo Konwersję masową dla formatów pokazanych w narzędziu.

Wymiary pikseli: ukryty mnożnik

Liczba pikseli, zawartość, głębia bitowa, metadane, format, koder i ustawienia wpływają na rozmiar. Usunięcie zbędnych wymiarów zwykle znacząco ogranicza dane, które koder musi przedstawić.

Obraz 4000 × 3000 ma 12 milionów pikseli; 1200 × 900 ma 1,08 miliona, o 91% mniej. Przy tej samej liczbie kanałów i precyzji mocno zmniejsza to nieskompresowany raster dla kodera, choć końcowa oszczędność bajtów nadal zależy od treści i ustawień.

Reguła responsywna: oferuj kandydatów blisko możliwych szerokości i gęstości wyświetlania. Jeśli obszar ma 720 pikseli CSS, kandydat 1440px może pasować do ekranu 2×, lecz zoom, kadr, zmiany układu i wyższa gęstość mogą zmienić wybór. Opisz opcje przez srcset i sizes.

Użyj narzędzia Vizua Zmień rozmiar, aby utworzyć kandydata zgodnego z układem. Następnie sprawdź odpowiednią kompresję JPEG lub PNG; zoptymalizowane źródło może się nie zmniejszyć.

Jakość kompresji: jak znaleźć złoty środek

Gdy obraz ma odpowiedni rozmiar i odpowiedni format, jakość kompresji to ostatnie pokrętło. Oto praktyczny scenariusz pokazujący, jak te trzy dźwignie działają razem:

Przykładowy proces: zacznij od pliku głównego 4000 × 3000 i przechowuj go poza zbiorem dostawy.

1. Zmień rozmiar do kandydata takiego jak 1200 × 900, jeśli pasuje do miejsca i gęstości
2. Wyeksportuj kandydata WebP z wybraną jakością początkową i sprawdź rzeczywisty plik
3. Wyeksportuj kandydata AVIF, jeśli stos go obsługuje, i porównaj rozmiar, wygląd oraz koszt kodowania

Wybierz najmniejszego kandydata spełniającego zastosowanie. Końcowa oszczędność i widoczna różnica wynikają z rzeczywistych źródeł i wyjść, nie tylko z przykładowych wymiarów.

Szczegółowe zalecenia dotyczące jakości dla każdego formatu znajdziesz w naszym poradniku: Jak kompresować obrazy bez utraty jakości.

Przypadki specjalne

Strony produktowe e-commerce

Zdjęcia produktów muszą być użyteczne przy powiększeniu obsługiwanym przez sklep. Generuj warianty responsywne z chronionego pliku głównego, testuj detale i ustal osobne budżety dla siatki, głównego widoku i zbliżenia. Wymagania platform sprzedażowych mogą różnić się od sposobu wyświetlania w sklepie.

Portfolio fotograficzne

Portfolio może dostarczać responsywne podglądy i oferować celowy widok wysokiej rozdzielczości. Wyprowadź wymiary i budżety bajtów z układu i oczekiwanych ekranów, a potem sprawdź tekstury, gradienty i profile kolorów.

Udostępnianie w mediach społecznościowych (Open Graph)

Zalecenia i akceptowane formaty Open Graph różnią się między platformami i mogą się zmieniać. JPEG lub PNG 1200 × 630 jest częstym punktem wyjścia, lecz sprawdź aktualne wskazówki i podgląd. Roboty pobierają te pliki niezależnie od leniwego ładowania strony.

Całkowity budżet obrazów na stronie

Zbuduj budżet strony z celu wydajności. Przykładowy początkowy podział do testu:

• 1 baner główny: ~150 KB
• 3-4 obrazy w treści: ~100 KB każdy, łącznie ~300-400 KB
• Miniatury, awatary i ikony: ~50 KB łącznie

Ten przykład nie gwarantuje szybkości. Galerie i siatki mogą odroczyć ładowanie obrazów znajdujących się poza ekranem, ale zasoby ładowane leniwie nadal zużywają dane po wysłaniu żądania i mogą wpływać na przewijanie. Mierz początkową i interaktywną wydajność na reprezentatywnych urządzeniach i sieciach.

Najczęściej zadawane pytania