Jeszcze bardziej przyspieszaj obrazy, korzystając z protokołu HTTP2 i progresywnego JPEG. Progresywny JPEG dla fotografów — efektywne wykorzystanie formatu PJPEG
- Tłumaczenie
Jeśli chodzi o przepustowość, obrazy to żarłoki. Przeciętnie pobierają one największy (62%) średni ruch na stronie i są najczęściej przesyłane wąskie gardło. Gdy obrazy się ładują, rozdzierają stronę, popychając inne elementy i powodując niezręczne przerysowywanie ( około. tłumaczenie: Oczywiście można się tego pozbyć, stosując określony układ, ale wtedy trzeba zakodować na stałe lub ograniczyć rozmiar obrazów). Ładowanie obrazu na stronę albo przypomina „tyk, tik, tik, tik, tik, gotowe”, albo na początku nie ma w ogóle nic, a potem nagle „bum!” i pojawia się znikąd. Każdy rozumie, co oznaczają słowa „tik, tik, gotowe” i „bum” i wszystkich nas to trochę irytuje, ponieważ czujemy, ile czasu zajmuje nasza kochana i kochana krótkie życie straciłem oczekiwanie na załadowanie zdjęć.
Przegapiona okazja
Zdjęcia są główną przyczyną powolnego renderowania. Są najczęściej wymaganym typem obrazu i średnio ważą więcej niż inne. Zawierają miliony kolorów, a liczba bitów na piksel stale rośnie. Są piękne i nie chcemy iść na kompromis w sprawie jakości.Zdjęcia zoptymalizowane pod kątem Internetu to JPEG, a JPEG dzieli się na dwa typy: podstawowy sekwencyjny (bazowy) i progresywny (progresywny). Sekwencyjny plik JPEG to pojedynczy skan obrazu od góry do dołu w pełnej rozdzielczości, natomiast progresywny plik JPEG to seria skanów o rosnącej jakości. Tak są renderowane - sekwencyjny jpeg rysowany jest od góry do dołu („tik, tik, tik, ...”), a progresywny szybko zaznacza swoje terytorium, a następnie poprawia (przez co najmniej tak to jest zamierzone).
Progresywny JPEG jest lepszy ponieważ jest szybszy. Pojawienie się szybciej oznacza bycie szybszym i prędkość postrzegana jest ważniejsza niż prędkość rzeczywista. Nawet jeśli skąpimy na dostarczanej przez nas treści, progresywny format JPEG dostarcza jak najwięcej i tak szybko, jak to możliwe. Pomaga nam w trudnym zadaniu dostarczania dużych i pięknych zdjęć.
W lokalnym eksperymencie - ilustracja na początku wpisu - na dławionym kanale na stronie pojawia się progresywny plik JPEG o rozmiarze 80 KB wcześniej niż sekwencyjny plik JPEG w rozdzielczości 5K (ten sam obraz, zmniejszony) w przeglądarce Firefox w systemie Windows, co powinno robić wrażenie. Oczywiście w pierwszym przebiegu progresywny plik JPEG ma niską rozdzielczość, ale zawiera tyle informacji, ile wynosi mały obraz lub nawet więcej. A jeśli na przykład na urządzeniu mobilnym zmniejszy się skalę strony, wówczas niska rozdzielczość nie będzie nawet zauważalna. Responsywne obrazy już się u nas sprawdzają ( około. tłumaczenie: odniesienie do responsywnego projektowania stron internetowych)!
Zasadniczo progresywny JPEG jest lepszy. Jaki jest najpopularniejszy typ pliku JPEG w Internecie? Zgadłem: spójny i to z bardzo dużym marginesem. W próbce tysiąca obrazów 92,6% jest spójnych.
Nie martw się, musimy tylko zadeklarować, że progresywny JPEG jest najlepsze praktyki i zaproś resztę świata na pokład. Ale żeby coś takiego ogłosić, trzeba mieć do tego pewność. Aby to zrobić, musisz najpierw zrozumieć, jak wygląda sytuacja dzisiaj, gdy przeglądarka obsługuje progresywny format JPEG.
Kontrola rzeczywistości nr 1
Progresywne pliki JPEG są renderowane we wszystkich przeglądarkach, więc nie martw się o to. To na czym nam zależy Jak są renderowane.Zachowanie progresywnych plików JPEG w przeglądarkach
| Przeglądarka (konkretna wersja) | Renderowanie progresywnych plików JPEG pierwszego planu | Rysowanie progresywnych plików JPEG tła (tło) |
|---|---|---|
| Chrome (wersja 25.0.1323.1 deweloperska Mac, 23.0.1271.97 m Win) | stopniowo (bardzo szybko!) | stopniowo (bardzo szybko!) |
| Firefox (wersja 15.0.1 Mac, 12.0 Win) | stopniowo (bardzo szybko!) | |
| Internet Explorer 8 | natychmiast po pobraniu pliku (powoli) | natychmiast po pobraniu pliku (powoli) |
| Internet Explorer 9 | stopniowo (bardzo szybko!) | natychmiast po pobraniu pliku (powoli) |
| Safari (wersja 6.0 na komputer stacjonarny, wersja 6.0 na urządzenia przenośne) | natychmiast po pobraniu pliku (powoli) | natychmiast po pobraniu pliku (powoli) |
| Opera (wersja 11.60) | UPD: stopniowo (bardzo szybko!)(dowód) | natychmiast po pobraniu pliku (powoli) |
Wyniki są rozczarowujące, ale ogólnie rzecz biorąc, udział w rynku przeglądarek z progresywnym renderowaniem progresywnych plików JPEG rośnie. Dotychczasowe wsparcie wynosi około 65% (Chrome + Firefox + IE9).
Niestety przeglądarki, które nie renderują progresywnych plików JPEG, renderują je stopniowo w całości po zakończeniu ładowania obrazu, co zasadniczo czyni je mniej progresywnymi. Stają się wolniejsze niż sekwencyjne pliki JPEG. Mimo że renderowanie sekwencyjne nie jest tak szybkie i płynne jak renderowanie progresywne, przynajmniej daje nam coś do zrobienia w oczekiwaniu, a „tik, tik” jest swego rodzaju wskaźnikiem ładowania (dobrze). Nie można lekceważyć pewności, jaką czują użytkownicy, gdy widzą, że coś się dzieje.
Wybierając progresywny plik JPEG, zapewniamy, że większość użytkowników będzie miała wspaniałe doświadczenia, a mniejszość – bardzo znacząca mniejszość – gorsze doświadczenia. Jednak wybranie sekwencyjnego pliku JPEG, ponieważ jest bardziej odpowiedni dla mniejszości wyświetleń, jest strasznym kompromisem. Musimy oferować użytkownikom to, co najlepsze i patrzeć w przyszłość.
Kontrola rzeczywistości nr 2
Możesz zapytać: „Czy progresywne pliki JPEG nie będą ważyć więcej niż zwykłe pliki JPEG? Czy nie płacimy za „warstwy”? W przypadku innych typów obrazów wielowarstwowych płacimy, ale nie w formacie JPEG. Progresywny plik JPEG jest zwykle o kilka kilobajtów mniejszy niż jego wersja sekwencyjna. Stoyan Stefanov, podczas planowania konwersji 10 000 losowych, sekwencyjnych plików JPEG na pliki progresywne, odkrył cenną praktyczną zasadę: pliki większe niż 10 KB będą najczęściej ważyć mniej w wersji progresywnej.Łatwiej byłoby przekonać, gdyby można było powiedzieć, że progresywne jpegi zawsze ważą mniej, więc zawsze należy ich używać. Stoyan nam w tym pomaga. Mówi: „Kolejna obserwacja dotycząca reguły 10 KB: w przypadkach, gdy waga kolejnego pliku JPEG jest mniejsza, jest ona mniejsza o niewielki margines. A kiedy jest mniej postępowy, zwykle jest znacznie mniejszy. Można więc powiedzieć, że zawsze powinieneś używać metody progresywnej, a wszystko będzie lepiej.
Właśnie to chciałem usłyszeć! W przypadku każdego przesłanego przez nas kolejnego pliku JPEG brakowało możliwości związanych z rozmiarem pliku i postrzeganą szybkością pobierania. Wybór opcji progresywnej jest korzystny dla obu stron i zawsze powinien być wyborem domyślnym. A gdy wszystkie pliki JPEG są progresywne, jeśli chcesz przeprowadzić dalszą optymalizację, możesz zaoszczędzić kilka bajtów i tylko na najmniejszych obrazach.
Powodem, dla którego sekwencyjne pliki JPEG są najczęstsze w Internecie, jest bez wątpienia to, że narzędzia do optymalizacji obrazów tworzą je domyślnie. Jednak wszystkie, na które patrzyłem - Photoshop, Fireworks, ImageMagick, jpegtran - mają możliwość zapisywania w wersji progresywnej. Aby więc wyświetlać progresywne pliki JPEG, należy świadomie modyfikować proces optymalizacji obrazu.
Na przykład Smushit może konwertować sekwencyjne pliki JPEG na progresywne. Nawiasem mówiąc, Smushit można uruchomić z wiersza poleceń i zintegrować z procesem optymalizacji obrazu.
Skąd wiesz, czy Twoje pliki JPEG są progresywne? Oto kilka sposobów identyfikacji typu JPEG:
- ObrazMagick- z linii poleceń uruchom: zidentyfikować -verbose tajemnica.jpg | grep Przeplot Wynik będzie miał postać „Przeplot: JPEG” lub „Przeplot: Brak”.
- Photoshopa- Otwórz plik. Wybierz Plik -> Zapisz dla Internetu i urządzeń. Jeśli jest to progresywny plik JPEG, pole wyboru Progresywne będzie zaznaczone.
- Dowolna przeglądarka- Sekwencyjne pliki JPEG będą ładowane od góry do dołu, natomiast pliki progresywne będą zachowywać się inaczej. Jeśli plik pobiera się zbyt szybko, może być konieczne ograniczenie przepustowości. Używam ipfw na Macu.
Kontrola rzeczywistości nr 3
Zgodnie z często zadawanymi pytaniami na temat kompresji JPEG, każdy przebieg renderowania progresywnego zużywa mniej więcej takie samo obciążenie procesora, jak renderowanie całego sekwencyjnego pliku JPEG. Nie ma to znaczenia na komputerze, ale może mieć znaczenie na urządzeniu mobilnym.Dodatkowe obliczenia są wadą, ale nie przeszkodą. Dostarczanie zdjęć słabych sprzęt komputerowy niezależnie od tego jest to trudne zadanie. Jestem tego świadomy, ponieważ piszę aplikację z galerią zdjęć ciągłe przesuwanie i spada na iPada. Podczas przetwarzania duża ilość obrazy włączone platformy mobilne złożone zadania w każdym razie się pojawi.
Jak widać w tabeli, mobilna przeglądarka Safari nie renderuje progresywnych plików JPEG w sposób progresywny, prawdopodobnie dlatego, że obciążają one procesor. Progresywny JPEG nie nowy format obrazu. Dlatego celowe i bez powodu niewspieranie progresywnego formatu JPEG nie jest opcją dla przeglądarek, nawet mobilnych. Mamy nadzieję, że przeglądarki mobilne wkrótce będą w stanie obsłużyć renderowanie progresywne, ale przyczyny obecnego braku wsparcia mają sens. Szkoda, bo po prostu urządzenia mobilne Zwiększenie prędkości i zmniejszenie rozmiaru pliku, jakie zapewnia progresywny JPEG, byłoby bardzo mile widziane. Wspomniano powyżej, że wydaje się to być rozwiązaniem obrazy adaptacyjne NA ten moment. Właściwie mógłby nim być, ale czas jeszcze nie nadszedł.
Patrząc w przyszłość
Miesiąc temu Google wkroczyło na rynek ze swoją usługą Mod_Pagespeed, czyniąc konwerter_jpeg_to_progressive głównym filtrem. SPDY również nadąża, domyślnie konwertując pliki JPEG powyżej 10 KB na pliki progresywne, zgodnie z praktyczną zasadą Stoyana. W rezultacie przeglądarki obsługujące renderowanie przyrostowe będą wyświetlane znacznie szybciej. Jak widać z powyższej tabeli, która obejmuje przeglądarkę Google Chrome, np Działania Google’a ma sens. Nie twierdzę, że jeśli „nie rób-żadnego-złego-przyspieszaj-sieć” Google wybrał progresywny JPEG jako najlepszą praktykę, to tym bardziej powinniśmy to zrobić. Ale to niepotrzebne potwierdzenie. A co najważniejsze, pokazuje, że progresywny JPEG – format, który przez dekadę znajdował się w czymś w rodzaju zamrażarki – zaczyna powracać.Nie wszystkie obecne przeglądarki obsługują progresywne renderowanie progresywnych plików JPEG. Mimo to ci, którzy go wdrażają, naprawdę na tym zyskują. A poza tym uzyskujemy oszczędności w rozmiarach plików. Dzisiaj jest najlepsza opcja i warto z tego korzystać. Progresywny format JPEG to przyszłość, a nie przeszłość.
Tagi: Dodaj tagi
Pokrojony bochenek. Świetnie komponuje się z barszczem na obiad
W Szkole Redaktorów jest nauczyciel - Nikołaj Towerowski. Żona często prosi go, żeby kupił chleb na obiad. Na tym przykładzie wyjaśnia różnicę między „robić” a „robić”.
Możesz ocalić świat w drodze do sklepu, wylądować w Indiach, znaleźć ostatni ocalały bochenek, odzyskać go od złych kosmitów, ale jeśli w końcu okaże się czerstwy lub spleśniały, to nie ukończyłeś zadanie. Zrobiłem to, ale tego nie zrobiłem.
Metoda progresywnego jeepingu to sposób, aby robić i być wykonywanym w tym samym czasie. Jej autor, Artemy Lebiediew, opisał istotę metody jednym obrazem:
Zdjęcie z paragrafu 167 kierownictwa studia Art. Lebiediewa
Zdaniem Lebiediewa należy dążyć do tego, aby w każdym momencie zadanie było w 100% gotowe. Pytanie tylko dotyczy stopnia szczegółowości. Jeśli masz czas i możliwości, dąż do perfekcji tak bardzo, jak tylko chcesz. Nie ma wystarczających środków na powtórkę — „nie ma problemu, zadanie zostało już ukończone, to znaczy wykonane.
Metoda przykuła moją uwagę, ale nie mogłam znaleźć dla niej zastosowania. Barszcz jest przygotowywany stopniowo, ładuje się jak zwykły jeep i można go zjeść dopiero wtedy, gdy jest w 100% gotowy. Brama na podwórze nie chce się otworzyć, dopóki nie usunę z niej 100% śniegu. Pies należy umyć dwoma szamponami, wysuszyć ręcznikiem, wyczesać i wysuszyć na 100% suszarką do włosów - dopiero wtedy będzie czysty.
Cierpiałam, ale nie przestawałam próbować. Na szczęście dla mnie rozpoczęłam naukę w Szkole Redaktorów. Pierwszy zadanie praktyczne dało mi możliwość ćwiczenia metody progresywnego jeepingu.
Zadanie z kursu „Zarządzanie i wyniki”. Musisz narysować dwie ośmiornice. Nogi ośmiornicy – moje umiejętności. Jedna ośmiornica ma kilka nóg i są krótkie — to ja dzisiaj. Druga ma większe nogi i są dłuższe to ja rok później.
Dla inspiracji dostaliśmy dwa zdjęcia:
Ośmiornica projektantki ma krótkie nogi – umiejętności
Kolejną rzeczą jest ośmiornica dyrektora artystycznego. Nawet wygląd się zmienił
Tutaj muszę się przyznać, że mam dyplom czwartej klasy z projektowania graficznego, ale nie umiem rysować na komputerze. Od słowa w ogóle.
Aby przestać panikować i się uspokoić, obejrzałem kreskówkę. Jeśli masz 10 minut, zajrzyj, nie pożałujesz.
Potem poszłam na konsultację z córkami. To moje boginie Photoshopa i tak dalej. Najstarszy poradził mi, żebym się nie martwił, narysował farbami na papierze, potem zrobił zdjęcie i tyle. Młodsza powiedziała: „Napisz, czego potrzebujesz, ile macek, jak długo, narysuję ci”. Ale stwierdziłam, że jestem już duża i sama powinnam odrabiać lekcje.
Pierwszy etap, 20%
Poszedłem do Dokumentów Google i utworzyłem tabelę. Wypisałem w kolumnie wszystkie umiejętności, które posiadam, dodałem te, które chcę rozwinąć do końca roku, wymyśliłem skalę wzrostu, pomalowałem komórki na różne kolory i dostałem ośmiornicę bez głowy. Spędziłem 30 minut.
Zadanie zostało ukończone. Jednak stopień opracowania pozostawia wiele do życzenia
Ucieszyłam się, wrzuciłam „Wyniki zadania” do szkolnej teczki i w nagrodę zjadłam kawałek ciasta.
Drugi etap, 60%
Postanowiłem przymocować do ośmiornicy jakąś głowę. Przeszukałem narzędzia arkusza kalkulacyjnego Google i znalazłem rysunek. Standardowe liczby Wystarczyło, że ośmiornica miała głowę, oko i usta.
To wciąż stół, ale trzeba przyznać, że wygląda jak ośmiornica
Myślałem, że na tym skończę, ale troskliwy kolega z klasy napisał, że lepiej byłoby zrobić zrzut ekranu. Ekran okazał się niechlujny, musiałem go oczyścić ze zbędnych szczegółów. Cały etap trwał około godziny.
Zrzut ekranu jeszcze bardziej przypomina ośmiornicę
Trzeci etap, 97%
Kontynuujemy rozpoczętą przez nas rozmowę na temat optymalizacji obrazu. Możemy optymalizować (kompresować) nie tylko obrazy innych firm, z którymi coś zrobiliśmy lub te, których jesteśmy autorami, ale także po prostu otwierać je w Photoshopie tylko w jednym celu - optymalizacji.
Mogą to być np. pamiątkowe zdjęcia z wakacji czy wakacji, które chcemy przechowywać na dysku samego komputera lub nośniki wymienne(dyski flash, zewnętrzne dyski twarde).
Mówienie o optymalizacji nie jest w żadnym wypadku wezwaniem do pośpiechu z optymalizacją (kompresją) zdjęć (danych graficznych) po powrocie z wakacji lub wakacji. Ale może warto, aby te same zdjęcia wzięły udział w procesie optymalizacji. Czy sensowne jest tworzenie i uzupełnianie elektronicznego albumu fotograficznego fotografiami, których wielkość w przeliczeniu na fizyczne miary długości liczona jest w metrach? Ogólnie rzecz biorąc, pomyślmy o tym, gdy pojawi się na to nastrój.
Photoshop to program zaspokajający potrzebę przetwarzania i tworzenia obrazów o różnym stopniu złożoności. W Photoshopie, podobnie jak w wielu innych programach, oraz w programy komputerowe och, ogólnie rzecz biorąc, wiele procesów zachodzi niezależnie. Ale my, jako użytkownicy, możemy wprowadzić pewne zmiany w tych procesach, co niewątpliwie jest wygodne.
Zatem obraz w Photoshopie jest gotowy do zapisania w formacie innym niż format Photoshopa, czyli optymalizacji. Jeśli w zakładce „Plik”. górne menu wybieramy opcję „Zapisz”, następnie powiedzmy, że to jest nasze dzieło, w którym zostanie zapisane formacie PSD, co oznacza, że plik będzie „podobny do Photoshopa”. Ale wybierając inną opcję, która jest obecna w zdecydowanej większości programów komputerowych i nazywa się „Zapisz jako”, w tym przypadku mamy możliwość wyboru, jaki typ pliku ma znajdować się nasze dzieło poza Photoshopem:
Dokonując wyboru z listy typów oferowanych przez edytor formatu pliku o nazwie JPG, mamy możliwość dostosowania poziomu kompresji (optymalizacji) w specjalnym oknie technicznym, które pojawi się automatycznie, wystarczy tylko wybrać ten format (typ) JPG:
To okno otworzy się przed nami z ustawieniami już zainstalowanymi przez sam Photoshop. Możemy, nie robiąc nic, zgodzić się z nimi, klikając przycisk „OK”. I dzięki tym działaniom możemy „spać spokojnie” (humor), procedura optymalizacyjna przebiegła pomyślnie. I możemy uczestniczyć w procesie optymalizacji. Zwiększmy skalę widoczności do 200% zamykając wcześniej otwarte okno regulacji poziomu kompresji:
(Lokalizacja przycisku wyboru skali dla wersji CS4, CS5).
Teraz ponownie będziemy musieli przejść ścieżkę, aż pojawi się okno regulacji poziomu kompresji (optymalizacji). Jeśli sami przekonamy się o przydatności optymalizacji obrazów, stając się jednocześnie głównymi bohaterami tego procesu (sami to regulujemy), to w przyszłości będziemy skalować obrazy przede wszystkim po to, aby uniknąć powtarzających się działań.
Zmiana skali widoczności została dokonana po to, aby lepiej zobaczyć co dzieje się z obrazem po zmianie ustawień. Możemy jeszcze zwiększyć procent skali, albo nie możemy tego zrobić wcale.
Zatem okno ustawień mamy przed oczami i możemy przystąpić do kompresji obrazu:
Aby zobaczyć jak zmienia się objętość pliku (obrazu) należy kliknąć lewym przyciskiem myszy i zaznaczyć puste pole obok słowa „Widok”. Następnie tymi samymi kliknięciami myszy wybierz taki lub inny rodzaj formatu (standard podstawowy, zoptymalizowany podstawowy, progresywny), dodatkowo zmieniając liczbę kroków (3,4,5):
We wszystkim co robimy nie możemy zapominać o samym obrazie. W końcu te zmiany są dla jego dobra. Dlatego nie skupiamy całej naszej uwagi tylko na wskaźniku głośności, ale przyglądamy się także zmianom, jakie zachodzą w obrazie.
Nasze działania związane z wyborem formatu optymalizacyjnego (kompresyjnego) można uzupełnić zmieniając inne parametry obrazu:
I znowu mamy możliwość wyboru jednego z kilku parametrów: Może to być Niski, Średni lub Wysoki, a może Najlepszy. Wystarczy jedno kliknięcie, a opcje są do naszej dyspozycji. Możemy nie otwierać listy opcji, a po prostu przesunąć suwak - będzie to ten sam wybór z listy opcji parametrów:
Monitorując zmiany obrazu i rozmiaru pliku, zmieniając parametry obrazu i rodzaj formatu, przestajemy dostosowywać w momencie, gdy uznamy to za konieczne. Oznacza to, że naszym zdaniem rozmiar pliku wystarczająco się zmniejszył i nie nastąpiła widoczna utrata jakości obrazu. Cóż, następnie kliknij przycisk „OK” w tym samym oknie.
Jeśli cofniemy się w naszych działaniach i zatrzymamy się w momencie, w którym właśnie otworzyło się okno regulacji poziomu kompresji, i przyjrzymy się warstwom, zobaczymy, że połączyły się one w jedną wspólną warstwę, co nie ma miejsca w przypadku wielowarstwowego obraz, który pozostaje plikiem PSD.
Wszystkie pliki mają swoje własne kodowanie (kod) i po kodzie są rozpoznawane różne programy I system operacyjny. Oznacza to, że pliki obrazów mają swój własny kod, pliki tekstowe mają swój własny i tak dalej. Kody te nie są jednakowo odbierane przez różne programy i systemy operacyjne, dlatego też możemy zauważyć niewielkie odchylenia w wyświetlaniu wartości parametrów.
Przykładowo skompresowaliśmy (zoptymalizowaliśmy) obraz, a jego objętość w Photoshopie wygląda następująco:
Zoptymalizowany plik JPG(image) Zapiszę na pulpicie mojego komputera. Po najechaniu kursorem na ikonę pliku system Windows wyświetli nieco inną wartość.
Dla miłośników fotografii sezon trwa przez cały rok. W tym czasie można nakręcić po prostu gigantyczną ilość materiału, zarówno jeśli chodzi o liczbę klatek, jak i całkowitą wagę plików na dysku.
Jest to typowe zarówno dla profesjonalnych fotografów, jak i amatorów. Zarówno pierwszą, jak i drugą łączy jedno wspólną cechą: głównymi sędziami dla fotografa są oczywiście odbiorcy.
Nie będziemy daleko od prawdy, jeśli powiemy, że fotograf to człowiek z aparatem, talentem i wiedzą, a także własny odbiorca.
Przecież nie tylko profesjonalni fotografowie chętnie prezentują swoje prace widzom, którzy też mogą nimi zostać potencjalni klienci następnie.
Dosłownie każdy, kto ma nowoczesne urządzenia, aktywnie eksploatuj sieć światowa aby przekazać ogółowi społeczeństwa zamrożone momenty rzeczywistości.
Zatem do przechowywania dużej ilości zdjęć na komputerze przydatny może okazać się format graficzny Jpeg2000 – pozwoli to zaoszczędzić miejsce na dysku.
Ale kiedy publikujesz zdjęcia Wysoka jakość w Internecie mogą pojawić się pewne trudności.
Ogólny obraz przy przyzwoitej prędkości kanałów internetowych pozostawia wiele do życzenia. A szybka transmisja danych typu stacjonarnego (optyka, ADSL itp.) i mobilnego (UMTS, WiMax, LTE) nie jest dostępna wszędzie.
Oto ironia losu: Yota wdraża obecnie w wielu regionach sieci 4G oparte na LTE Advanced. Natomiast jego poprzednik, 3G, przedstawiony jest dość fragmentarycznie, ograniczając się do megamiast i łączących je dużych arterii komunikacyjnych.
Imponujący odsetek wszystkich istniejących kanałów internetowych (radiowych i przewodowych) stanowią kanały o niskiej prędkości.
Utrudnia to korzystanie z usług fotograficznych takich jak Flick, Panoramio i innych, które zawierają pliki graficzne wysoka rozdzielczość z duży rozmiar same pliki.
Wyświetla zdjęcie w pełnym rozmiarze, gdy wolny internet może osiągnąć minuty. Czy jest coś, co można zrobić? Być może tak.
Progresywny JPEG - efektywne wykorzystanie PJPEG
Nie mówimy tutaj o kanałach i dostawcach, a nie o przypadkach, gdy zdjęcia z telefonu komórkowego są publikowane w Kontaktie. Jeśli jednak wrzucimy do Panoramio zdjęcia 16 MP, to wystarczy kilka kliknięć, aby znacząco poprawić zarówno szybkość ładowania zdjęć, jak i wygodę dla widzów.
Wszystko to przy tych samych rozmiarach plików i ramek.
Z reguły większość zdjęć jest wysyłana na serwer w formacie JPEG po wstępnej obróbce - korekcie kolorów i jasności, kadrowaniu itp.
I tu jest szansa na wpływ na sytuację. Podczas zapisywania zdjęcia w formacie JPEG domyślnie używana jest metoda Baseline. Utworzona za jego pomocą migawka jest „rozwijana” w przeglądarce sekwencyjnie od góry do dołu – w miarę wczytywania pliku.
Podczas oglądania lekkiego obrazu dzieje się to niezauważone przez wzrok i cierpliwość człowieka, ale zdjęcie o wysokiej rozdzielczości ładuje się w przeglądarce w następujący sposób:
I tak dalej, aż do gorzkiego końca. Często jednak użytkownik nie ma pojęcia, co znajduje się na przesłanym zdjęciu i czy jest mu to potrzebne.
Trzeba jednak poczekać, aż załaduje się objętość wystarczająca do zrozumienia istoty obrazu.
Użytkownikowi nie jest trudno uniknąć takich niedogodności: technologia JPEG ma inną metodę konstruowania obrazu - metodę progresywną lub Progresywny JPEG.
W nim całą tablicę danych można w specjalny sposób podzielić na kilka grup według częstotliwości lub cyfr wartości pikseli. Ilość takich grup można ustawić podczas zapisywania pliku.
Ponadto podczas wyświetlania migawki w przeglądarce wyświetlane są jedna po drugiej wydzielone grupy danych. Najpierw - odpowiadające niskim częstotliwościom lub cyfrom wyższego rzędu współczynników pikseli, następnie - wyższym wysokie częstotliwości lub kolejne cyfry w dół itp.
W tym przypadku cały obraz ładuje się od razu, ale o obniżonej jakości, ponieważ Przesyłana jest tylko część informacji. Nie czekając na wyniki wszystkich grup, możemy zdecydować, czy potrzebujemy tego zdjęcia, czy nie.
Zatem wszystkie grupy ładowane są sekwencyjnie jedna po drugiej (w standardzie nazywane są SKANAMI):
Każdy nowy przesyłany skan konsekwentnie poprawia jakość obrazu. Ostatecznie po przesłaniu kilku skanów wgrywane jest całe zdjęcie:
W ten sposób Progressive JPEG może zaoszczędzić czas na wolnych kanałach. Ponadto liczne eksperymenty potwierdziły skrócenie czasu załadowany do pełna obrazy w formacie Progressive JPEG w stosunku do linii bazowej. Nikomu nie jest trudno to zweryfikować.
Dzięki OptiPic Twoja witryna internetowa może prezentować lepsze technologie i szybciej wyświetlać pliki JPEG progresywny JPEG technologia.
Technologia progresywny JPEG pozwala zachować oryginalną jakość obrazu, ale prędkość ładowania takiego pliku jest znacznie większa niż w przypadku ładowania zdjęć z innymi danymi technicznymi. Rozważmy tę kwestię bardziej szczegółowo i bliżej, a także porozmawiajmy o tych aspektach, które wymagają większej uwagi.
Progresywny JPEG oznacza szybsze ładowanie JPEG
Zdjęcia zoptymalizowane do Internetu są w formacie JPEG. Ma pewną klasyfikację i jest reprezentowany przez dwie następujące kategorie:
- Sekwencyjny(baseline) – zapewnia zwykły obraz rozruchowy w jednej warstwie. Obrazy ładowane są od góry do dołu w pełnej rozdzielczości;
- Progresywny– obejmuje szereg kolejnych warstw o stopniowo poprawiającej się jakości.
Progresywny jpg najpierw po prostu zaznacza kontury przyszłego zdjęcia, a następnie ładuje obraz na warstwy - od warstwy o najgorszej jakości do ostatniej końcowej warstwy o maksymalnej jakości.
Zalety tego formatu są oczywiste i niezaprzeczalne. Takie zdjęcie pojawia się na ekranie znacznie szybciej, a jego objętość potrafi robić wrażenie. Prędkość ta ma pozytywny wpływ na ogólną prędkość pobierania strony internetowej jako całości.
Dla lepszego zrozumienia wystarczy przypomnieć sobie jeden prosty fakt. Nawet jeśli korzystasz z wolnego połączenia, plik w progresywnym formacie jpg o rozmiarze 80 KB będzie wyświetlany znacznie szybciej niż podobny obraz w sekwencyjnym formacie jpeg, który jest zmniejszony i ma tylko 5 KB. Czy to nie imponujące? O tak, to jest!
Podczas pierwszego przebiegu progresywny plik JPEG ma niższą rozdzielczość. Plik zawiera jednak ilość danych podobną do mniejszego obrazu. A wyświetlając obiekt na urządzeniu mobilnym, większość użytkowników nawet nie zauważy niskiej rozdzielczości.
Pomimo wszystkich zalety progresywnego JPEG, jego popularność jest dziś znacznie mniejsza niż tej. Ponad 90% wszystkich obrazów w Internecie ma spójny format wyświetlania.
Ale sytuacja stopniowo zmienia się w odwrotnym kierunku. Pierwsze kroki w tym kierunku stawia Google, wprowadzając nowe usługi pracy z progresywnym jpegiem i późniejszą jego promocję. Co więcej, przeglądarki różnych producentów stopniowo preferują ten format wyświetlania zdjęć. Technologia, która przez ostatnie kilka lat znajdowała się w swego rodzaju izolacji, obecnie staje się coraz bardziej popularna i poszukiwana.
Teraz progresywny JPEG ma szeroką gamę zalet i korzyści, które są niekwestionowane. Format ten z pewnością zajmie swoje miejsce w przyszłości i pod każdym względem jest znacznie lepszy od przestarzałych odpowiedników z poprzednich lat.