W jaki sposób serwis Apple.com osiąga progresywne ładowanie jpeg?

Question

Jeśli spojrzeć na stronach takich jak ten jeden

http://www.apple.com/watch/overview/

zobaczysz, że ich .jpgs obciążenie niekonwencjonalnie, począwszy od wersji piksele i powoli rośnie w rozdzielczości zamiast załadunkiem od góry do dołu.

W inspektorze obrazy nie wyglądają specjalnie dla mnie. Czy jest to określony sposób indeksowania samego pliku, aby przeglądarka otrzymywała dane w tej określonej kolejności?

Answer 1

Widziałem ten efekt również na innych stronach internetowych. Zależy to od typu obrazu, który zapisujesz jako. Według Wikipedia:

Przeplot (znany również jako przeplatanie) to metoda kodowania obrazu bitmapowego, dzięki czemu osoba, która częściowo go otrzymała, widzi zdegradowaną kopię całego obrazu. Kiedy komunikujesz się za pośrednictwem wolnego łącza komunikacyjnego, często lepiej jest zobaczyć idealnie czystą kopię jednej części obrazu, ponieważ pomaga to widzowi szybciej zdecydować, czy przerwać czy kontynuować transmisję.

Jest to tak zwane przeplatanie dla obrazów typu PNG i GIF oraz progresywny format dla obrazów JPEG.

Istnieje opcja w sekcji Save for Web... w Photoshopie:

Wskazówka pole wyboru Progressive.

Answer 2

To brzmi jak Progressive JPEG o która według Wikipedii:

Istnieje również przeplotem Format „Progressive JPEG”, w którym dane są kompresowane w wielu przejściach stopniowo wyższej szczegółowości. Jest to idealne rozwiązanie dla dużych obrazów, które będą wyświetlane podczas pobierania przez wolne połączenie, umożliwiając rozsądny podgląd po otrzymaniu tylko części danych. Jednak obsługa progresywnych plików JPEG nie jest uniwersalna. Gdy odbierane są progresywne JPEG przez programy, które ich nie obsługują (takie jak wersje Internet Explorera przed Windows 7) [13], oprogramowanie wyświetla obraz dopiero po jego całkowitym pobraniu.

Nie ma to nic wspólnego z JavaScript, HTML lub CSS, ale jest bardziej efektem użytych typów plików.

Answer 3

Progresywne JPEG i przeplatanie to dwie różne techniki udoskonalania obrazów. GIF i PNG przeplatają się (choć inaczej). Przeplot to jedynie nagranie kodowania pikseli według ustalonego wzorca.

Progresywny JPEG dzieli zakodowane dane na segmenty.

Aplikacja pobierająca strumień obrazów może wyświetlać dane etapami po ich otrzymaniu lub może czekać, aż wszystkie zostaną pobrane.

Jeśli zdecyduje się wyświetlać etapami, proces jest inny w przypadku przeplotu i progresywnego. W celu przeplotu dekoder musi powiększyć piksele, które ma do pikseli, które jeszcze nie otrzymał.

Dla progresywnego JPEG, każdy skan dodaje skompresowane dane. Dla każdej iteracji wyświetlania dekoder musi wykonać odwrotny DCT i konwersję z YCbCr na RGB. Istnieje pewne dekodowanie, które musi być powtarzane przy każdej iteracji ekranu, w przeciwieństwie do przeplatania.