Skompresowany duży obraz nadal jest duży
Małe miejsce na obraz nie zmniejsza pobieranego pliku. Gdy każdy odwiedzający otrzymuje tę samą pełnowymiarową fotografię, telefon może pobrać piksele niewykorzystywane w układzie. Kompresja i wybór responsywny rozwiązują różne części problemu.
Nasz proces przygotowania dla witryn omawia przygotowanie, a poradnik dostarczania obrazów łączy je z diagnostyką wydajności. Eksperyment śledzi zdjęcie od gotowych plików do rzeczywistego wyboru przeglądarki, bez sprowadzania wyniku do oceny punktowej.
Przygotuj kandydatów i obserwuj przeglądarkę
Przed kompresją wykonaliśmy proporcjonalne kopie w zewnętrznym edytorze; Bitinz nie zmieniał wymiarów. Dnia 2026-10-29 każdą kopię przetworzyliśmy lokalnie w trybie Zrównoważony. Zapisane wymiary, bajty i suma kontrolna identyfikują kandydata użytego w eksperymencie przeglądarki.
Lokalna strona oferowała kandydatów przez srcset z dopasowaną regułą sizes. Obserwacje zapisują szerokość obszaru widoku, gęstość pikseli i wybrany zasób. Mierzą dane obrazu, nie całe ładowanie strony ani symulowaną sieć mobilną. Dowody opisuje polityka redakcyjna.
Przygotowane pliki dostępne do wyboru
Porównaj rozmiary kandydatów, a potem sprawdź rejestr wyboru przeglądarki podlinkowany w źródłach. Przeglądarka może wybrać tylko pliki faktycznie oferowane przez stronę.
| Obraz | Piksele | Format | Poziom | Przed | Po | Oszczędność |
|---|---|---|---|---|---|---|
photo-4000.jpg | 4000 × 2667 px | JPG | Zrównoważony | 2032.6 KB | 595.9 KB | 70.7% |
photo-1600.jpg | 1600 × 1067 px | JPG | Zrównoważony | 393.1 KB | 129.0 KB | 67.2% |
photo-800.jpg | 800 × 533 px | JPG | Zrównoważony | 116.0 KB | 40.0 KB | 65.5% |
photo-400.jpg | 400 × 267 px | JPG | Zrównoważony | 34.2 KB | 12.4 KB | 63.7% |
Bitinz · 1 KB = 1000 bajtów.
Co przeglądarka faktycznie pobrała
| Obszar widoku (CSS px) | Gęstość pikseli | Szerokość wyświetlania (CSS px) | Wybrana szerokość (px) | Dane obrazu |
|---|---|---|---|---|
| 390 | 1× | 358 | 400 | 12.4 KB |
| 390 | 2× | 358 | 800 | 40.0 KB |
| 768 | 1× | 736 | 800 | 40.0 KB |
| 768 | 2× | 736 | 1600 | 129.0 KB |
| 1280 | 1× | 960 | 1600 | 129.0 KB |
| 1280 | 2× | 960 | 4000 | 595.9 KB |
Każdy wiersz pochodzi z nowego kontekstu przeglądarki z wyłączoną pamięcią podręczną. Najszerszy widok o dużej gęstości wybrał największy plik, bo w zestawie kandydatów była duża luka. Warto sprawdzić rozmiar pośredni; przeglądarka może wybrać tylko plik dostępny na liście.
Oceń wybrany obraz w użytecznej skali
Szczegół zdjęcia źródłowego
Szczegół skompresowanego zdjęcia
Obejrzyj zdjęcie na małym ekranie i wyświetlaczu o dużej gęstości. Najmniejszy kandydat nie jest automatycznie najlepszy, jeśli daje widoczną nieostrość. Duży plik nie jest też uzasadniony wyłącznie imponującym wynikiem kompresji.
Rejestr wyboru to obserwacja w podanym środowisku. Pamięć podręczna i decyzje przeglądarki mogą zmienić kolejne wizyty. Aby powtórzyć pomiar, użyj nowego kontekstu przeglądarki i sprawdź żądany obraz zamiast zgadywać na podstawie rozmiaru na ekranie.
Połącz przygotowanie z dostarczaniem
Użyj kompresora obrazów na przygotowanych kopiach, a następnie pozwól witrynie lub systemowi zarządzania treścią zaoferować odpowiednie warianty. Gdy wygenerowany kod kieruje wszystkie ekrany do jednego dużego pliku, sama kompresja tego nie zmieni.
Dopasuj sizes do układu CSS. Przeglądarka korzysta z tej wskazówki razem z kandydatami i gęstością ekranu; nie odczyta zamiaru autora z nazwy pliku. Sprawdź wybór po zmianie układu.
W powtarzalnym procesie API dla programistów może kompresować gotowe pliki podczas publikacji. Skalowanie pozostaje osobnym przygotowaniem. Poradnik jakości wyjaśnia, jak porównywać szczegóły przed podmianą obrazu.
Sprawdź miejsce na obraz na stronie
- Zmierz miejsce na obraz i ustal potrzebne proporcjonalne szerokości.
- Przygotuj i skompresuj kopie, zachowując edytowalny oryginał.
- Zaoferuj kandydatów z regułą
sizesdopasowaną do układu. - Sprawdź wybrany zasób i wygląd zdjęcia na różnych ekranach.
FAQ
- Czy ustawienie szerokości wyświetlania zmniejsza pobierany plik?
- Szerokość CSS zmienia układ, a nie bajty pojedynczego pliku. Zaoferuj odpowiednich kandydatów i sprawdź, który zasób wybiera przeglądarka.
- Dlaczego telefon o dużej gęstości wybiera szerszy obraz?
- Wyświetlacz o dużej gęstości może użyć więcej pikseli obrazu w tym samym widocznym miejscu. Wymiary kandydatów i wskazówka rozmiaru strony wpływają na wybór.
- Czy ten eksperyment mierzy szybkość strony?
- Rejestruje wyniki kompresji i wybór zasobu obrazu. Ładowanie całej strony zależy też od innych zasobów, sieci i pracy renderowania.