Похожие каналы на youtube что. Как попасть в похожие видео на ютубе. Так как же попасть в похожие видео

От автора: каждый разработчик знает, что в вопросе веб-производительности и пользовательского опыта важно каждое изображение. Изображения – это низко висящие плоды оптимизации производительности. Сжатие без визуальной потери качества может принести пользу организациям путем снижения веса страниц без ущерба для работы пользователя, что повышает производительность и привлекает все больше аудитории. Существует множество техник, для определения того, какое изображение необходимо загрузить, но эти «правильные изображения» еще необходимо создать. Целью веб-разработчиков и сервисов по повышению производительности должно быть обеспечение всех пользователей на всех типах устройств и во всех браузерах оптимальными изображениями. (Другой целью должна быть доступность, но это тема для отдельной статьи!).

Определение нужных изображений

Существует несколько front-end методов для обслуживания правильных изображений, среди которых можно выделить медиа запросы для фоновых изображений и теги и с атрибутом srcset для изображений переднего плана.

С помощью @media запросов можно задать, какое фоновое изображение использовать под определенное разрешение экрана и плотность экрана. Например, на старый лэптоп можно посылать изображение lowers.jpg, а на iPad Pro – hires.jpeg:

header { background-image: url(img/hires_header.jpg); } @media only screen and (min-device-pixel-ratio: 2) and (min-width: 1024px) { header { background-image: url(img/hires_header.jpg); } }

header { @ media only screen and (min - device - pixel - ratio : 2 ) and (min - width : 1024px ) { header { background - image : url (img / hires_header . jpg ) ;

А что с изображениями переднего плана?

Техника клоунской машины 2013 года работала на том, что SVG в медиа запросах использовал в качестве размеров окна ширину и высоту контейнера, а не браузера. К счастью, текущая поддержка в браузерах тега picture и атрибута srcset позволяет забыть про этот трюк и picturefill полифил.

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

Работа с picture, source и атрибутом srcset похожа на медиа запросы. Вы указываете, какое изображение переднего плана необходимо использовать под определенный размер окна и плотность экрана:

< picture > < source srcset = "small_lowres.jpg, small_highres.jpg 2x" media = "(max-width: 768px)" > < source srcset = "default.jpg, default_highres.jpg 2x" > < source srcset = "large_lowres.jpg, large_highres.jpg 2x" media = "(min-width: 1024px)" > < img src = "default.jpg" alt = "image descriptor" > < / picture >

Обратите внимание: всегда вставляйте стандартный тег img в picture, в том числе и атрибут alt с описанием изображения.

Можно сделать так, чтобы простой тег подбирал наилучшее изображение без родительского тега picture и смежного тега source. Для этого необходимо воспользоваться атрибутами srcset и sizes.

< img src = "default.jpg" srcset = "large.jpg 1024w, Medium.jpg 768w, Default.jpg 420w" sizes = "(min-width: 1024px) 1024px, (min-width: 768px) 90vw, 100vw" alt = "image descriptor" / >

При помощи атрибута type можно загружать изображения разных форматов:

< picture > < source srcset = "photo.jxr" type = "image/vnd.ms-photo" > < source srcset = "photo.jp2" type = "image/jp2" > < source srcset = "photo.webp" type = "image/webp" > < img srcset = "photo.jpg" alt = "My beautiful face" > < / picture >

Если код сверху для вас что-то новенькое, то JPEG-XR и старыйMIME-тип image/vnd.ms-photo используются для Windows Media Photo, проприетарного формата изображений Microsoft. Поддерживается в IE8+ и Microsoft Edge. JPEG 2000 – это jp2, будет отображаться в браузерах Safari при использовании разметки выше. WebP – формат изображений со сжатием без потери качества, работает в Opera и Chrome. Firefox выберет формат по умолчанию, PNG-A, SVG, GIF или JPEG.

В Firefox и IE8 необходимо прописывать JPEG или PNG фолбек. Firefox и Safari экспериментируют с поддержкой изображений формата WebP, однако по данным сайта CanIUse.com нет никаких намеков на ближайшую поддержку.

Если хотите разобраться в этих новых, но хорошо поддерживаемых функциях, а также научиться применять их, то по медиа запросам, picture и srcset есть несколько замечательных уроков.

Почти безграничная настройка

Одна из основных проблем кода в разделе выше заключается в том, что мы включили лишь малую часть возможных изображений, подходящих под медиа тип, размер и плотность пикселей. Прописать все брейкпоинты, разрешения и медиа типы для всех изображений можно, но сложно. Мне бы не хотелось писать все вручную. К счастью, задачу по созданию всех необходимых изображений под все возможные случаи можно автоматизировать.

Оптимальный вариант – написать на стороне сервера запрос на самое оптимальное изображение на основе трех из четырех критериев: размер окна, плотность пикселей на устройстве, поддерживаемый медиа тип в браузере и размер изображения относительно окна. Почему на основе трех из четырех? Потому что можно использовать то, что браузер и так понимает исходники, вам не нужно включать все возможные комбинации, просто парочку.

Если DOM записывается в браузер исключительно через клиентский JS, как бывает в большинстве React приложений, браузеру можно послать запрос на одно правильное изображение, однако пока код парсится, пользователь может наблюдать частично загруженный неинтерактивный экран (скриншот). В более общем сценарии, когда на сайте есть серверная часть, переписывать запрос на изображение в JS – неоптимальный вариант: браузер сначала загрузит оригинал при парсинге DOM, затем загрузит второе, уже оптимизированное изображение после обновления DOM.

Если вы используете технику прогрессивного улучшения, а вы должны, нужно отчетливо понимать, что как только распарсится HTML код изображения, будет загружен оригинал.

К сожалению, спецификация Client Hints, добавляющая информацию о соотношении пикселей на устройстве и ширине окна в поля заголовков HTTP запросов, реализована только в Blink браузерах (Chrome и Opera). Если знать браузер пользователя, разрешение и размер окна, обновление всех запросов на изображения можно автоматизировать, тем самым используя технику прогрессивного улучшения для серверных запросов. При помощи Client Hints можно подтвердить поддержку формата webP (Chrome и Opera поддерживают и клиентские подсказки и webP), разрешения и размера окна. На сайте Instart Logic есть скрипт Nanovisor, делающий то же самое для Client Hints. С его помощью можно посылать оптимизированные изображения в оптимизированных форматах, даже когда Client Hints не поддерживаются.

Техники по определению браузера не так умны, поэтому можно брать строку браузера из HTTP заголовков и таблицу поиска и с их помощью определять возвращаемый медиа тип на основе этих заголовков. Можно переписывать расширения изображения, а можно на каждый вызов изображения возвращать «правильный» тип изображения для всех браузеров, но с «неправильным» расширением. Например, если запрошено изображение foo.jpg, верните лучший медиа тип для браузера, но вызывайте foo.jpg, медиа тип не важен. На сайте Instart Logic мы возвращаем формат webP для бразуеров Chrome и Opera, JPEG-XR для Edge и т.д…. мы не переписываем путь к изображению. Мы просто используем расширение оригинала в имени файла, у нас это jpg. Мы пользуемся тем, что браузеры отрисовывают изображения тех медиа типов, которые они распознают, и не смотрят на расширения (или их отсутствие) в имени файла. В таком случае можно не менять разметку и DOM в JS, а также загружать всего одно изображение на один запрос.

Если вы собираетесь возвращать разные медиа типы на основе поддержки браузера, но с одним и тем же разрешением в имени файла, вам придется хранить правильное изображение на стороне сервера в базе данных, так как вам нужно будет обрабатывать разные версии изображения с одинаковым именем. На стороне клиента нужно было бы запрашивать правильное расширение (если знаете способ лучше или просто другой, дайте мне знать).

Автоматизация процесса по созданию файлов

Лучше всего предоставлять пользователям индивидуально подобранные изображения для индивидуально подобранных объявлений изображений, которые поддерживаются браузером. В предыдущем разделе мы узнали, как передать браузеру, чтобы тот использовал изображение определенного размера и типа на основе его функций. Однако нам все еще нужно создать изображения всех размеров для всех медиа типов с наилучшим уровнем сжатия для каждого отдельного изображения. Вопрос заключается в том, как создать все изображения?

Нам нужно автоматизировать сжатие и изменение размеров изображения во множество форматов, поддерживаемых различными браузерами, устройствами и операционными системами. Лучше всего, чтобы наилучшая степень и уровень сжатия определялись для каждого изображения индивидуально.

Оптимизация изображений может занять много времени на нестатических сайтах, где изображений могут быть тысячи, десятки тысяч и даже миллионы, все разных размеров, разрешений и медиа типов. В программе ImageMagick можно конвертировать изображения в PNG, JPEG, JPEG-2000, GIF, WebP и почти любой формат через командную строку:

В масштабе всего интернета для определения наилучшего качества для всех изображений нужна целая армия людей. Большинство конвертеров и сервисов снижают размер файла за счет снижения качества изображений по одному и тому же коэффициенту или уровню сжатия. К примеру, когда на моих сайтах было мало изображений, я мог вручную сжимать их. Качество менялось от низкого 35% до высокого 88%. Для галерей и других проектов с множеством изображений я использовал Adobe Fireworks для автоматизации сжатия и экспорта, сохраняя все в JPEG с качеством 78%. Как и я, большая часть инструментов по автоматизации сжатия используют одни и те же настройки качества, обычно это около 80%. Я выбрал 78% чисто случайно (немного основываясь на опыте). Волшебного значения качества, которое подойдет под все изображения, нет. Не существует магического уровня сжатия, который сжимает без потерь качества все изображения.

«Правильная» степень сжатия зависит от контента и того, как будет использоваться изображение. Уровень качества экспорта обычно зависит от деталей на изображении. В зависимости от контента подбирается разный уровень для каждого изображения. Зачастую чем больше деталей в изображении, тем ниже качество: пейзаж требует высокого качества под 90, а изображение с множеством деталей будет хорошо смотреться и на уровне ниже 50.

Автоматизировать настройку качества под каждое изображение все-таки можно. Сайт Instart Logic использует computer vision, машинное обучение и конвертер для оптимизации изображений с учетом содержимого, автоматизации процесса создания изображений, оптимизированных под разрешение устройства, браузер и сеть, а также для вычисления оптимального коэффициента сжатия без ущерба для работы пользователя. SmartVision – это алгоритмический подход, использующий машинное обучение для автоматизации адаптивных настроек под каждое изображение, сжимая изображение на максимум без потери качества (исключение составляют только первые несколько изображений, на которых происходит калибровка алгоритма машинного обучения). Продвинутые алгоритмы компьютерного зрения «заглядывают» в контент изображения и максимизируют уровень сжатия без ущерба для работы пользователя на уровне интеллекта. Парвиз Ахаммад объяснил свои алгоритмы для SmartVision намного лучше меня еще в 2014.

Браузеры далеко продвинулись за последние 6 лет, увеличился и средний вес сайтов. Изображения же – главный виновник медленной загрузки, а современные изображения – лишь часть решения. Время, потраченное на оптимизацию изображений, проведено не зря.

В нынешний век мобильных технологий оптимизация картинок в форматах PNG и JPG,JPEG стала снова актуальна, как это было актуальным в те времена, когда интернет только входил в нашу жизнь и был повсеместно медленным и диалапным. Мобильный интернет, конечно, не совсем корректно сравнивать с диалапом, но местами, где связь плохая, там и скорость доступа довольно маленькая. Да и в те времена пользователю было некуда деваться, и приходилось ждать загрузки страницы. Сейчас же интернет вырос, выбор сайтов большой. Пользователь стал капризным и нетерпеливым, и среднее время ожидания загрузки страницы сильно уменьшилось. Пользователю проще найти другой более шустрый сайт.
Да и поисковые гиганты навроде Google или Yandex начали обращать внимание на то, как быстро грузятся сайты, отдавая предпочтение в выдаче тем, что пошустрее. Не последнюю роль в этом играет и вес страницы, который, в свою очередь, сильно зависит от веса располагающихся на ней изображений. Довольно очевидно, что иметь компактные сжатые картинки выгодно всем. Поэтому здесь я хочу поговорить о том, как подготовить ваши PNG и JPG, JPEG файлы к заливке на хостинг.

Базовая оптимизация изображений

Тут подразумевается обрезка ненужных полей, уменьшение глубины цвета, удаление комментариев и сохранение изображения в подходящем формате. Для этого можете воспользоваться Adobe Photoshop, или, если у вас его нет, MS Paint или GIMP.
Даже элементарная обрезка изображения неплохо снизит его вес.

Как уменьшить изображение в MS Paint

Покажу на примере MS Paint, как уменьшить изображение до нужных размеров.
Возьмём для примера лого NGINX и его изображение nginx.png размером 2000×417 пикселей, которое нужно обрезать по ширине до 1024, т.к. это ширина вёрстки страницы, и делать больше нет смысла.

На выходе получаем картинку, которая прошла минимальную базовую оптимизацию. Пора переходить к сжатию её веса.

File Optimizer для сжатия PNG и JPG,JPEG

Наиболее простой и быстрый способ добиться оптимального сжатия изображений без потери качества — использовать программу File Optimizer

Официальный сайт и описание программы :

Скачать File Optimizer вы можете с

Описание . Является эффективным оптимизатором не только для изображений, но также и для.pdf, .docx, txt и иных текстовых, аудио- и видеофайлов, а также архивов. Полный список поддерживаемых расширений вы найдёте на официальной странице проекта.
Вот некоторые из утилит, используемых в работе: AdvanceCOMP, APNG Optimizer, CSSTidy, DeflOpt, defluff, Gifsicle, Ghostcript, jhead, jpegoptim, jpegtran, Leanify, mozjpeg, MP3packer, mp4v2, OptiPNG, PngOptimizer, PNGOUT, pngquant, pngrewrite, pngwolf, TruePNG, tidy-html5, ZLib, zRecompress . Думаю, даже этот неполный список довольно внушителен.

Установка и использование File Optimizer

Сначала скачиваете последнюю версию программы либо в виде инсталлятора, либо архива с файлами. Кстати, в архиве есть версия под 32-битную и 64-битную версии Windows.

Интерфейс довольно простой и интуитивно понятный.
В настройке не нуждается, но вы можете некоторые форматы настроить под себя с помощью кнопки Options...
Использование . Вы либо перетаскиваете нужные файлы и даже папки (каталоги) в окошко программы, либо выбираете нужные через меню Add files...
Для оптимизации файлов жмёте Optimize all files

Оптимизированные файлы заменят собой исходники, иерархия категорий также сохранится. Напротив каждого файла будет показана статистика, сколько в процентах от исходного размера файла весит оптимизированная версия.
После завершения работы внизу в статусной строке будет выведена статистика по количеству обработанных файлов, а также сколько получилось сэкономить.

На мой взгляд, File Optimizer свою работу выполняет очень качественно.
Единственный минус, если список файлов большой, ждать результатов можно долго, но оно стоит того.

Если вас интересуют подробности способов оптимизации, которые можно настроить на свой лад, далее пойдёт речь про настройку и использование утилит для сжатия изображений

Cжатие PNG без потери качества

Рассмотрим 3 программы для оптимизации PNG:

• Adobe Photoshop
• OptiPNG
• PNGOUT

Сравним их по качеству сжатия картинок. Сжимать будем nginx.png из предыдущего раздела. Вес оригинала 27,5 Кб.

Cжатие PNG с помощью Adobe Photoshop

Первый в списке — хорошо известный всем фотошоп. Многофункциональный комбайн для дизайнера, который умеет почти всё, в том числе и сжимать изображения.
В фотошопе открываем Файл-Cохранить для Web либо используем комбинацию Alt+Shift+Ctrl+S

В результате получаем 22,7 Кб, т.е. сжали на 17,5%

К сожалению, большинство графических программ не способны раскрыть весь потенциал алгоритмов, используемых для сжатия PNG. Главная причина в том, что для определения оптимальной стратегии сжатия они используют эвристические алгоритмы, которые позволяют без проведения компрессии прикинуть эффективность тех или иных параметров, что, в результате, даёт большой процент ошибок. Поэтому для сжатия PNG мы используем специально созданные для этого утилиты, а именно OptiPNG и PNGOUT.

Использование OptiPNG для сжатия PNG

Как установить и пользоваться OptiPNG

Скачали.exe, залили в C:\Windows, взяли нужный PNG-файл, положили в какую нибудь папку. Теперь с помощью FAR Manager либо другого файлового менеджера с поддержкой консоли зашли в эту папку и ввели команду в консоль

Optipng -o7 nginx.png

Команда заставляет сжать PNG в папке. Позже рассмотрим простой вариант, как делать сжатие в один клик.
Но сначала взглянем на результат.

18,8 Кб, т.е. сжали на 31,6%, почти на треть. Весьма недурно, неправда ли? У фотошопа получилось намного хуже.

Использование PNGOUT для сжатия PNG

Как установить и пользоваться PNGOUT

Всё точно так же, как и для OptiPNG. Скачиваете PNGOUT.exe, закидываете в C:\Windows, открываете в файловом менеджере, например, Far Manager папку с PNG, и в командной строке пишете

Pngout nginx.png

Результат ниже

Результат 23,4 Кб, т.е. удалось сжать на 15%. Весьма неплохо.

Вообще, скажу сразу, у меня были разные результаты с разными файлами, где-то PNGOUT работал эффективнее, где-то OptiPNG, поэтому советую прогонять изображения по очереди через обе утилиты.

Как быстро сжать PNG в OptiPNG и PNGOUT

Создаёте файл png.reg и записываете туда данные для реестра

Windows Registry Editor Version 5.00 @="Run OptiPNG on Folder" @="cmd.exe /c \"TITLE Running OptiPNG on %1 && FOR /r \"%1\" %%f IN (*.png) DO optipng -o7 \"%%f\" \"" @="Run PNGOUT on Folder" @="cmd.exe /c \"TITLE Running PNGOUT on %1 && FOR /r \"%1\" %%f IN (*.png) DO pngout \"%%f\" \""

Потом запускаете этот файл и записываете данные в реестр Windows.
Теперь при клике по папке с файлами PNG, которые нужно сжать, выбираете нужные вам команды, сжатие произойдёт автоматически и для всех изображений разом.

Чтобы удалить всё из контекстного меню, записываете нижеследующий код в png.reg и запускаете его

Windows Registry Editor Version 5.00 [-HKEY_LOCAL_MACHINE\SOFTWARE\Classes\Folder\shell\OptiPNG] [-HKEY_LOCAL_MACHINE\SOFTWARE\Classes\Folder\shell\OptiPNG\command] [-HKEY_LOCAL_MACHINE\SOFTWARE\Classes\Folder\shell\PNGOUT] [-HKEY_LOCAL_MACHINE\SOFTWARE\Classes\Folder\shell\PNGOUT\command]

Cжатие JPG, JPEG без потери качества

Для оптимизации JPG, JPEG по аналогии с PNG существуют свои утилиты: jpegtran и jpegoptim. Конечно, вы можете пользоваться фотошопом, однако для сжатия JPG, JPEG я настоятельно рекомендую пользоваться именно ими.

Как установить, настроить и использовать jpegtran

jpegtran — мощная утилита, позволяющая выполнить как просто сжатие JPG без потери качества, так и сжатие с определённым уровнем сглаживания, и даже преобразование в Progressive JPEG.
Скачать jpegtran можно тут http://jpegclub.org/jpegtran/ (ищете и качаете jpegtran.exe).

Как сжать JPG, JPEG с помощью jpegtran

Заливаете jpegtran.exe в C:\Windows
Потом открываете в Far Manager папку с нужным JPEG и в консоли вводите

Jpegtran -copy none -optimize -outfile min.1.jpg 1.jpg # Базовая оптимизация 1.jpg # -copy none убирает метаданные из JPG # -optimize оптимизирует изображение

Progressive JPG, JPEG

Это такой тип JPG, который при загрузке страницы сначала показывает общие очертания, потом догружается и доводит качество картинки до максимального. Очень удобно для медленного мобильного интернета, и потому его необходимо использовать.

Jpegtran -progressive -outfile 1.jpg 1.jpg # Трансформирует формат 1.jpg в Progressive

Как проверить, является ли изображение Progressive JPEG

Расширенные возможности jpegtran

Здесь рассмотрены все возможные варианты использования jpegtran

Jpegtran --help usage: jpegtran inputfile outputfile Switches (names may be abbreviated): -copy none Copy no extra markers from source file -copy comments Copy only comment markers (default) -copy all Copy all extra markers -optimize Optimize Huffman table (smaller file, but slow compression) -progressive Create progressive JPEG file Switches for modifying the image: -crop WxH+X+Y Crop to a rectangular subarea -flip Mirror image (left-right or top-bottom) -grayscale Reduce to grayscale (omit color data) -perfect Fail if there is non-transformable edge blocks -rotate Rotate image (degrees clockwise) -scale M/N Scale output image by fraction M/N, eg, 1/8 -transpose Transpose image -transverse Transverse transpose image -trim Drop non-transformable edge blocks -wipe WxH+X+Y Wipe (gray out) a rectangular subarea Switches for advanced users: -arithmetic Use arithmetic coding -restart N Set restart interval in rows, or in blocks with B -maxmemory N Maximum memory to use (in kbytes) -outfile name Specify name for output file -verbose or -debug Emit debug output Switches for wizards: -scans file Create multi-scan JPEG per script file

Как быстро на автомате сжать JPEG с помощью jpegtran в Windows

Через контекстное меню сжимать не получится из-за особенности работы утилиты, однако, настроить сжатие множества JPEG разом на автомате можно.
Для этого нам нужно создать файл с расширением.bat ( в помощь) и записать туда

Cd /d . for %%j in (*.jpg) do call:sheensay "%%~nxj" "%%~nj.jpg" goto:eof:sheensay jpegtran -copy none -optimize -progressive "%~1" "%~2"

Как установить, настроить и использовать jpegoptim

Как сжать JPG, JPEG с помощью jpegoptim

Заливаем jpegoptim.exe в C:\Windows. Потом открываем папку с JPG изображениями с помощью Far Manager и вводим в консоль

Jpegoptim *.jpg --strip-all --all-progressive

Как оптимизировать несколько JPG, JPEG разом с помощью jpegoptim

В отличие от jpegtran, утилита jpegoptim вполне замечательно позволяет работать с ней и из контекстного меню.
Создадим файл jpegoptim.reg, например, с помощью Far Manager, и запишем туда

Windows Registry Editor Version 5.00 @="Run jpegoptim on Folder" @="cmd.exe /c \"TITLE Running jpegoptim on %1 && FOR /r \"%1\" %%f IN (*.jpg) DO jpegoptim *.jpg --strip-all --all-progressive \"%%f\" \""

Запустили, внесли данные в реестр. Теперь можно сжимать множество JPEG файлов с помощью контекстного меню, просто складываете нужные изображения в одну папку, ПКМ и «Run jpegoptim on Folder».

Если хотите удалить jpegoptim из реестра и контекстного меню, записываете jpegoptim.reg

Windows Registry Editor Version 5.00 [-HKEY_LOCAL_MACHINE\SOFTWARE\Classes\Folder\shell\jpegoptim] [-HKEY_LOCAL_MACHINE\SOFTWARE\Classes\Folder\shell\jpegoptim\command]

Сохраняете, запускаете, вносите изменения в реестр.

Насколько качественно jpegtran и jpegoptim сжимают jpg, jpeg

Перейдём к испытаниям. Возьмём, к примеру, файл caching.jpg. В оригинале он весит 29,5 Кб

Испытания jpegtran на качество сжатия JPG, JPEG

jpegtran -copy none -optimize -progressive caching.jpg caching.jpg

На выходе получилось 29,1 Кб, сжатие сэкономило 1,36%

Испытания jpegoptim на качество сжатия JPG, JPEG

jpegoptim caching.jpg --strip-all

В проводнике Windows этого не видно, сжатие составило несколько сотен байтов.

Что ж, исходный файл был неплохо подготовлен, поэтому сжатие не дало видимого эффекта, но когда вы будете обрабатывать свои неоптимизированные изображения, порой будете удивляться, как хорошо можно сэкономить в размере.

Как настроить сжатие png и jpg, jpeg на автомате

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

Необходимо предварительно установить jpegtran , jpegoptim , optipng , pngout ю
Инструкция по установке есть выше.

Итак, для этого нам потребуется правильно собрать архитектуру папок. Допустим, у вас есть папка images со своей иерархией вложенных в неё папок с PNG и JPG, которые вам нужно обработать.
Создаём папку optimus , в неё закинем папку images со всеми вложенными папками и файлами.
Открываем , в нём открываем optimus, создаём там файл go.bat и записываем туда

@ECHO OFF CLS SetLocal EnableExtensions EnableDelayedExpansion set home_path=%~dp0:: Название папки, в которой лежат необработанные изображения set folder=images echo Обработка *.JPG файлов через jpegtran:: Создаём папку, в которой будут храниться сжатые jpg. В нашем случае, это jpeg_images xcopy /y /t /c /i "%folder%" "jpg_%folder%" :: Для каждого.jpg проводим оптимизацию с помощью jpegtran. Выходной.jpg будет записан в jpeg_images for /r %folder% %%a in (*.jpg) do (set fn=%%a& jpegtran -copy none -optimize -progressive -outfile %home_path%jpg_!fn:%~dp0=! %home_path%!fn:%~dp0=!) echo Обработка *.JPG файлов через jpegtran завершена:: Указываем, что теперь прогон нужно осуществлять в новой папке jpeg_images set folder = jpg_%folder% echo Обработка *.JPG файлов через jpegoptim for /r %folder% %%a in (*.jpg) do (set fn=%%a& jpegoptim %%~a --strip-all) echo Обработка *.JPG файлов через jpegoptim завершена echo Обработка *.PNG файлов через optipng xcopy /y /t /c /i "%folder%" "png_%folder%" for /r %folder% %%a in (*.png) do (set fn=%%a& optipng -o7 %%~a -out %home_path%png_!fn:%~dp0=!) echo Обработка *.PNG файлов через optipng завершена set folder=png_%folder% echo Обработка *.PNG файлов через pngout for /r %folder% %%a in (*.png) do (set fn=%%a& pngout %%~a) echo Обработка *.PNG файлов через pngout завершена pause

Код закомментирован в важных частях. По сути, ничего сложного, разберётесь, если вам это нужно.

Теперь сохраняем go.bat и запускаем его.

Если файлов много, сжатие изображений займёт какое-то время. Дождитесь, пока консоль не уведомит об окончании процесса.

Сжатие проходит с разделением файлов отдельно JPG, которые теперь располагаются в jpg_images , и PNG отдельно, которые располагаются в png_images .

Если нужно изменять качество или другие параметры, смотрите описание утилит выше и изменяйте код под свои нужды.

Как оптимизировать и сжать GIF

В заключение

В этой статье я постарался максимально развёрнуто охватить способы оптимизации PNG и JPG. Если есть какие-то вопросы, дополнения, пишите в комментариях, обсудим