Новости

Как правильно применять в JavaScript асинхронные функции: примеры работы с ES 2017
От автора: возможность писать на JavaScript асинхронные функции является важным обновлением в ES2017. Что такое асинхронные функции? Асинхронные функции — это функции, которые возвращают promise. Мы

WordPress JavaScript — как правильно подключить файл скрипта к шаблону сайта
Использование в шаблонах WordPress JavaScript скриптов давно стало обычным делом. Их подключение возможно несколькими способами, начиная с классического варианта с использование голого HTML. Но чтобы все

Как исправить JavaScript error "ВКонтакте"? Что делать при ошибках JavaScript в "ВКонтакте"?
"ВКонтакте" - это на сегодняшний день самый удобный русскоязычный ресурс, который является не только популярнейшей социальной сетью, но и сервисом для прослушивания аудиозаписей и просмотра видео. Здесь

Правильное использование Tor Browser
Tor Browser полностью анонимен – Миф или реальность? Многие считают, что Tor — это полностью анонимное и безопасное средство для интернет-серфинга, которое не дает никому возможность контролировать то,

Javascript error object is not a function вконтакте как исправить
"ВКонтакте" - это на сегодняшний день самый удобный русскоязычный ресурс, который является не только популярнейшей социальной сетью, но и сервисом для прослушивания аудиозаписей и просмотра видео. Здесь

Как исправить ошибку javascript error вконтакте
На сегодняшний день «Вконтакте» является наиболее удобным русскоязычным ресурсом, который представляет собой не только крупнейшую социальной сеть, но и сервис для просмотра видео и прослушивания аудиозаписей.

Что такое JavaScript и для чего он используется?
Подробности декабря 10, 2015 Просмотров: 20225 В интернете миллионы веб-страниц,

Практика javascript синтаксис написания
Javascript — это язык программирования, который активно используется для построения динамических веб страниц. Собственно с этой целью он и был изобретен. У нашего с вами языка еще есть такое интересное

JavaScript учебник
Код функций в JavaScript начинает выполнение после их вызова. Функции являются одним из наиболее важных строительных блоков кода в JavaScript. Функции состоят из набора команд и обычно выполняют

Рекомендации решившим начать изучать JavaScript
Если вы решили начать изучать JavaScript , то эта статья для вас. Надеюсь, что её прочтение избавит вас в будущем от множества ошибок и сделает его изучения более простым, быстрым и эффективным. В статье

Optymalizacja obrazu dla strony: przetwarzanie wsadowe przy użyciu jpegtran | optipng | pngout

  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.

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

Pamiętaj, jak długo jesteś na stronie po raz ostatni i jak długo na niej jesteś?
Czy muszę powiedzieć, że ważyli ciasto?
Po co więc optymalizować obrazy?
Ale czy każdy ma swoje strony na VPS lub stawki VIP?
Co tam jest, zawarta informacja?