1. Wymagania wstępne
2. Używamy zaleceń dotyczących obrazów
3. Struktura archiwum
4. Krótka instrukcja pracy
5. Dodatki
6. x64 (alias andi)

Strona bez obrazów - anachronizm. Tak wielu ludzi myśli i nie jest pozbawione zdrowego rozsądku. Pamiętaj, jak długo jesteś na stronie po raz ostatni i jak długo na niej jesteś?

Dane tekstowe są znacznie mniejsze niż obraz. Ale wiadomo, że ludzie kochają swoje oczy. Dlatego zdjęcia będą niewątpliwą zaletą tej historii.

Mówiąc ogólnie o tekście, mamy na myśli zarówno jego treść, jak i wygodną prezentację wizualną, w tym akapity, listy, cytaty, tabele. Jednak to nie wystarczy, a nawet serwisy informacyjne próbują dostarczać wizerunki dziennikarzy.

Zacznijmy od założenia, że ​​potrzebne są obrazy. Mogą to być zdjęcia, diagramy, po prostu objaśnianie zdjęć.

Dawno temu, kiedy Putin nie wydawał się wieczny, stworzyłem swój pierwszy portal medyczny. Konieczne było umieszczenie zdjęć w atlasie. Jest oczywiste, że trudno sobie wyobrazić anatomiczną budowę ciała bez obrazów, a tym bardziej opisać słowami. Bez zbędnych ceregieli przesłałem zdjęcia do bmp (format nieskompresowany). Czy muszę powiedzieć, że ważyli ciasto? Ponadto niektóre przeglądarki nie wiedziały, jak wyświetlać takie zdjęcia.

Po co więc optymalizować obrazy? Prostym przykładem jest zdjęcie. Nowoczesne telefony mają kamery w 8, 12 i nawet większej liczbie megapikseli. 12 MP odpowiada obrazowi 4000 × 3000 pikseli. W zależności od złożoności sceny odpowiada to wielkości 2-5 megabajtów, a nawet więcej. Kilkanaście zdjęć - a rozmiar strony bardzo się puchnie. Obraz pasuje do obszaru zawartości, co oznacza, że ​​przeglądarka musi najpierw pobrać wszystko, skalować i dopiero wtedy wyświetlić. Dla słabych procesory lub z niewielką ilością pamięci RAM - katastrofa.

Teraz wyobraź sobie, że użytkownik ogląda witrynę z telefonu. W takim przypadku ładowanie strony nie może po prostu czekać. Tak więc zdjęcia muszą zostać wstępnie zredukowane.

Ktoś będzie twierdził, że nie ma sensu, nowoczesne CMS automatycznie tworzy miniatury podczas pobierania obrazów. Ale czy każdy ma swoje strony na VPS lub stawki VIP? Pobierz jeden obraz MP, który może się pojawić, ale aby go przetworzyć, PHP będzie musiał przeznaczyć ponad 35 megabajtów (teoretycznie więcej) na przechowywanie, a następnie nadal wiedzieć, ile utworzyć mniejszą kopię. Tanie taryfy natychmiast pogrążają się w nadmiarze zasobów. Dobry host poprosi użytkownika, aby już tego nie robił, zły zignoruje go, ponieważ tylko pieniądze są dla niego ważne, a nie wykonanie usług.

Dlatego zdecydowaliśmy się działać poprawnie. Wstępnie zmniejszamy obrazy, a następnie przesyłamy je na stronę. Więc silnik jest łatwiejszy, a ludzie. Czy wszystko Nie do końca.

Wielu redaktorów zachowuje oryginalne fragmenty (meta-informacje, niezwiązane z obrazem części pliku) zawierające dodatkowe informacje. Na przykład, jeśli zrobisz zdjęcie w telefonie, prześlij plik do komputera, kliknij go prawym klawiszem i wybierz „Właściwości → Szczegóły”, zobaczysz dane na urządzeniu: aparat, który sfotografowałeś, czas otwarcia migawki, ISO i tak dalej. Dla użytkownika ta informacja jest bezużyteczna, więc możesz się jej pozbyć.

Pomyśl o tym, jeden kawałek. Co tam jest, zawarta informacja? Wyobraź sobie. Czasami dostajesz obrazy, w których setki kilobajtów takich danych. Właśnie dzisiaj wysłali logo o wielkości 584 KB, aby pomieścić. Jednocześnie użyteczne informacje to tylko 14 KB! Jeśli chodzi o mnie, nie jest całkowicie poprawne zmuszanie gościa do pobrania 570 KB z góry.

Podsumujmy sumy częściowe. Aby użytkownicy witryny mieli się dobrze, musisz:

1. Zmniejsz rozmiar obrazu. Aby pomóc każdemu edytorowi graficznemu.
2. Wyrzucanie części pliku jest zbędne. W rzeczywistości użytkownik potrzebuje tylko obrazu.
3. Spróbuj jeszcze bardziej zmniejszyć rozmiar obrazu.

Pierwszy akapit obejmuje indywidualną pracę nad każdym plikiem. Jest to czasochłonne, ale przynosi najlepsze rezultaty. Otwieramy każdy plik, wycinamy, zmniejszamy, a następnie zapisujemy z dopuszczalną jakością.

Ale paragrafy 2 i 3 można wydać na łaskę specjalnych programów. Oprogramowanie do pracy z zestawem obrazów. Google zaleca następujące programy:

• jpegtran dla formatu obrazu jpg.
• optipng i pngout dla obrazów PNG.

Trochę o str. 3. Redaktorzy graficzni zwykle nie przejmują się tym. Po prostu zapisują obraz, wybierając przed czasem algorytmy kompresji z tymi samymi ustawieniami, współczynnikami kwantyzacji i innymi rzeczami. Ponadto wielu uczciwie przekazuje dostępne meta-informacje i dodaje własne, co dodatkowo zwiększa rozmiar pliku.

Wymagania wstępne

Rok temu zaczęli masowo rozmawiać o usłudze. PageSpeed ​​Insights z google. W rzeczywistości są to zalecenia giganta wyszukiwania „jak zrobić dobrze”. Wystarczy wpisać adres witryny i uzyskać listę sugestii dotyczących optymalizacji. Tam możesz również pobrać już zoptymalizowane zasoby, w tym obrazy, dla swojej witryny. To prawda, dotyczy to tylko zaznaczonej strony.

Jeśli masz stronę internetową, spójrz ten artykuł . Szczególnie przydatne dla osób korzystających z WordPress.

Używamy zaleceń dotyczących obrazów

Wydaje się proste: pobierz programy określone przez Google i uruchom za ich pośrednictwem wszystkie pliki na serwerze. Problem polega na tym, że te narzędzia są konsolowe. Biorą tylko 1 plik na raz. Ale nie jesteśmy na próżno ostatni artykuł poświęciłem trochę czasu na pliki wsadowe, prawda?

Informacje z artykułu są wystarczające, aby stworzyć własną aplikację do obsługi plików, więc nie będę malować tam, gdzie to jest. Po prostu proponuję pobrać gotowy zespół, którego sam używam.

Pobierz archiwum (212 KB)

Struktura archiwum

Archiwum zawiera folder [ OptimizeImg ]. Aby rozpocząć, rozpakuj go gdzieś. Mam to zlokalizowane w c: h, ale to nie ma znaczenia. Najważniejsze jest to, że ścieżka nie zawiera wykrzykników.

Dalej. Ten folder zawiera podkatalog [ uploads ]. Tutaj musisz umieścić pliki wymagające przetwarzania. Najlepsze jest to, że możesz wypchnąć przynajmniej strukturę folderów / plików.

Istnieją jeszcze 3 programy: jpegtran.exe | optipng.exe | pngout.exe jest bardzo użytecznym narzędziem polecanym przez Google. Pobrano z odpowiednich oficjalnych witryn / repozytoriów. W razie wątpliwości lub po prostu uaktualnij, pobierz z zaufanego źródła i zastąp istniejące.

I wreszcie serce Tulzy. Batnichki:

• 1.bat
• 3.bat
• 3-go.bat
• 3-opti-to-out.bat
• 3-out-to-opti.bat

Pierwszy plik, 1.bat, odtwarza strukturę z [upload]. Tworzone są 3 dodatkowe foldery: [jpg_jpegtran] [png_optipng] [png_pngout] z przetworzonymi zminimalizowanymi plikami ich typu (jpg - tylko pliki * .jpg, takie same z png).

3.bat uruchamia kolejno trzy pliki wsadowe do wykonania:

• 3-go.bat jest prawie taki sam jak 1.bat. Pomiń pliki jpg / png przez minimalizatory. Rezultatem pracy będą 3 foldery (patrz wyżej) z odpowiednimi obrazami.
• 3-opti-to-out.bat tworzy folder [png_optipng-to-pngout], w którym zapisywane są pliki przetwarzane przez optipng + pngout (dokładnie w tej kolejności).
• 3-out-to-opti.bat tworzy folder [png_pngout-to-optipng], w którym zapisywane są pliki przetwarzane przez pngout + optipng. Podobnie jak poprzedni, tylko w innej kolejności.

W zasadzie tylko 1.bat jest wystarczający dla naszych potrzeb. 3x worki pojawiły się w wyniku badań i błędów w poprzedniej wersji pliku wsadowego. Tak się złożyło, że podczas błędu pliki dla pngout zostały pobrane z katalogu optipng. I jakie było moje zdziwienie, gdy uruchomienie starej wersji dało 1,5 raza mniejszy rozmiar niż w zaktualizowanym pliku wsadowym. W rezultacie okazało się, że podwójne przetwarzanie może dobrze „dogonić” zdjęcia. Ale zajmuje to prawie 2 razy więcej czasu. Więc zdecyduj sam, czy jest to potrzebne.

Krótka instrukcja pracy

1. Pobierz archiwum .
2. Rozpakuj.
3. Przejdź do nowo otwartego folderu [OptimizeImg].
4. Wszystkie pliki wymagające pieczenia, skopiuj folder [upload].
5. Uruchom 1.bat i poczekaj. Jeśli jest wiele plików i są png, zaczekaj długo.
6. Gdy w czarnym oknie pojawi się komunikat o konieczności naciśnięcia klawisza, aby kontynuować, wszystko jest gotowe. Pozostaje pobranie zawartości utworzonych folderów i skopiowanie do hostingu za pośrednictwem FTP, nadpisując stare pliki.

Na przykład. Pozwól sobie na blog na WordPressie. Wszystkie obrazy są przechowywane w [ / wp-content / uploads / ]. Przejdź do folderu witryny (przez ftp), przejdź do [ zawartość wp ] i po prostu skopiuj [ załaduj ] do folderu OptimizeImg o tej samej nazwie. Uruchom 1.bat i poczekaj. Po zakończeniu pracy zawartość [jpg_jpegtran] (idziemy tam!) Jest przesyłana na serwer. Żądania dotyczące istniejących plików są odbierane przez nadpisywanie. Podobna sztuczka dla png, ale najpierw przyjrzymy się, który folder - [png_optipng] lub [png_pngout] - zajmuje mniej miejsca, wypełnij go swoją zawartością.

Nie bój się uszkodzić innych plików. Batniki działają tylko z jpg / png i tylko obrazy tych typów są zapisywane w nowo utworzonych folderach.

Mam nadzieję, że ktoś będzie przydatny. Sukcesy!

Dodatki

1. Ścieżka do [OptimizeImg] nie powinna zawierać wykrzykników ! i procent %
2. Uruchom skrypty jako administrator nie jest konieczne. Ponadto w tym przypadku mogą nie działać!
3. ...

Wydawca

nie online 13 godzin

x64 (alias andi)

Komentarze: 2846 Publikacje: 395 Rejestracja: 02-04-2009