Сайт без изображений — анахронизм. Так думают многие, и это не лишено здравого смысла. Вспомните, давно ли вы в последний раз попадали на такой сайт и как долго пробыли на нём.
Текстовые данные занимают гораздо меньший размер, нежели изображения. Но люди, как известно, любят глазами. Стало быть, картинки будут несомненным плюсом повествованию.
Вообще, говоря про текст мы подразумеваем и его содержание, и удобное визуальное представление, включающее абзацы, списки, цитаты, таблицы. Однако этого недостаточно, и даже новостные сайты стараются снабжать работы журналистов изображениями.
Давайте исходить из того, что изображения сайту нужны. Это могут быть фото, схемы, просто поясняющие картинки.
Давным-давно, когда Путин не казался вечным, делал я свой первый веб-портал медицинской направленности. Нужно было разместить картинки к атласу. Очевидно, что анатомическое строение тела без рисунков представить довольно сложно, и тем более описа́ть словами. И я, не мудрствуя, залил картинки в bmp (формат без сжатия). Нужно ли говорить, что весили они дофигища? Более того, часть браузеров не умела показывать такие картинки.
Так зачем же оптимизировать изображения? Простой пример — фото. Современные телефоны имеют камеры в 8, 12 и даже больше, мегапикселей. 12 МП соответствует изображению в 4000×3000 пикселей. В зависимости от сложности сцены, это соответствует размеру 2-5 мегабайт, и даже больше. Десяток фото — и размер страницы сильно раздувается. Изображение вписывается в область контента, значит браузер должен сначала всё скачать, отмасштабировать и лишь потом вывести. Для слабых процессоров или при небольшом размере оперативной памяти — катастрофа.
А теперь представим, что пользователь смотрит сайт с телефона. В этом случае загрузки страницы можно просто не дождаться. Значит, картинки нужно предварительно уменьшать.
Кто-то возразит, что смысла в этом никакого, современные CMS при загрузке изображений автоматически делают уменьшенные копии. Но все ли располагают свои сайты на VPS или VIP-тарифах? Загрузить одно 12 МП изображение может и выйдет, но для его обработки PHP потребуется выделить 35+ мегабайт (в теории, на деле больше) для хранения, а затем ещё невесть сколько для создания уменьшенной копии. Дешёвые тарифы сразу упрутся в превышение ресурсов. Хороший хостер попросит пользователя больше так не делать, плохой — проигнорирует, ибо для него важны только деньги, а не работоспособность сервисов.
И вот, мы решили действовать правильно. Сами предварительно уменьшаем изображения, после чего заливаем на сайт. Так и движку проще, и людям. Всё? Не совсем.
Многие редакторы сохраняют исходные чанки (мета-информация, части файла, не относящиеся к изображению), содержащие дополнительную информацию. Например, если сфотографировать что-то на телефон, перекинуть файл на комп, жмакнуть по нему правой клавишей и выбрать «Свойства → Подробно», увидим данные по устройству: на какую камеру фотографировали, выдержку, ISO и прочее. Для пользователя эта информация бесполезна, значит, от неё можно избавиться.
Ну подумаешь, один чанк. Что там, ворох информации что ли содержится? Представьте себе. Иногда получаешь изображения, в которых сотни килобайт таких данных. Буквально сегодня, прислали для размещения лого размером 584 КБ. При этом, полезная информация составляла всего 14 КБ! Как по мне, не совсем правильно заставлять посетителя качать 570 КБ сверху.
Давайте подведём промежуточные итоги. Для того, чтобы пользователям сайта сделать хорошо, нужно:
- Уменьшить размер изображения. В помощь любой графический редактор.
- Выбросить из файла ненужны части. По сути, пользователю нужна лишь картинка.
- Попытаться дополнительно уменьшить размер изображения.
Первый пункт подразумевает индивидуальную работу над каждым файлом. Это затратно по времени, зато приносит наилучший результат. Мы открываем каждый файл, обрезаем, уменьшаем, после чего сохраняем с приемлемым качеством.
А вот пункты 2 и 3 можно отдать на растерзание специальным программам. Софта для работы с изображениями множество. Гугл рекомендует следующие программы:
- jpegtran для изображений формата JPG.
- optipng и pngout для изображений формата PNG.
Немного про п. 3. Графические редакторы обычно не заморачиваются с этим. Они просто сохраняют изображение, выбирая загодя заложенные алгоритмы сжатия с одинаковыми настройками, коэффициентами квантования и прочим. К тому же, многие честно переносят имеющуюся мета-информацию и добавляют свою, дополнительно увеличивая размер файла.
Предпосылки
Год назад массово заговорили о сервисе PageSpeed Insights от Google. По сути, это рекомендации поискового гиганта на тему «как сделать хорошо». Просто вбейте адрес сайта и получите список предложений по оптимизации. Там же можно скачать уже оптимизированные ресурсы, включая изображения, для своего сайта. Правда, это актуально только для проверяемой страницы.
Если у Вас есть сайт, обязательно посмотрите эту статью. Особо полезно тем, кто используется WordPress.
Используем рекомендации для изображений
Вроде просто: скачать указанные Гуглом программы и прогнать все имеющиеся на сервере файлы через них. Проблема в том, что данные утилиты консольные. Они за раз принимают лишь 1 файл. Но мы же не зря в прошлой статье уделили время пакетным файлам, верно?
Информации из статьи вполне достаточно, чтобы создать свой обработчик файлов скопом, поэтому расписывать где что не буду. Просто предлагаю скачать готовую сборочку, которой пользуюсь сам.
Структура архива
В архиве содержится папка [OptimizeImg]. Для начала работы распакуйте её куда-нибудь. У меня размещена в c:\temp\ но это не принципиально. Главное, чтобы путь не содержал восклицательные знаки.
Далее. В этой папке содержится поддиректория [uploads]. Сюда нужно помещать файлы, требующие обработки. Самое приятное, что можно запихнуть хоть структуру папок/файлов.
Есть ещё 3 программы: jpegtran.exe | optipng.exe | pngout.exe — это те самые утилиты, рекомендуемые Гуглом. Скачаны с соответствующих официальных сайтов/репозитариев. Если сомневаетесь, или просто хотите обновить версию, скачайте из доверенного источника и замените имеющиеся.
И, наконец, сердце тулзы. Батнички:
- 1.bat
- 3.bat
- 3-go.bat
- 3-opti-to-out.bat
- 3-out-to-opti.bat
Первый файл — 1.bat — воссоздаёт структуру из [uploads]. Создаются 3 дополнительные папки: [jpg_jpegtran] [png_optipng] [png_pngout] с обработанными минимизированными файлами своего типа (jpg — только *.jpg-файлы, аналогично и с png).
3.bat последовательно запускает на исполнение три пакетных файла:
- 3-go.bat практически аналогичен 1.bat. Пропускает jpg/png файлы через минимизаторы. Результатом работы будут 3 папки (см. выше) с соответствующими изображениями.
- 3-opti-to-out.bat создаёт папку [png_optipng-to-pngout], в которую пишутся файлы, обработанные optipng + pngout (именно в такой последовательности).
- 3-out-to-opti.bat создаёт папку [png_pngout-to-optipng], в которую пишутся файлы, обработанные pngout + optipng. Аналогично предыдущему, только в иной последовательности.
В принципе, для наших нужд достаточно только 1.bat. Пакетники 3x появились в результате изысканий и ошибкам в работе предыдущей версии батника. Так получилось, что в ходе ошибки файлы для pngout брались из директории optipng. И каково же было моё удивление, когда запуск старой версии выдавал в 1.5 раза меньший размер, нежели в обновлённом батнике. В итоге оказалось, что двойная обработка может неплохо «доужать» картинки. Но это требует почти в 2 раза больше времени. Так что сами решайте, нужно ли оно.
Краткая инструкция по работе
- Скачать архив.
- Распаковать его.
- Зайти в свежераспакованную папку [OptimizeImg].
- Все файлы, требующие ужатия, скопировать в папку [upload].
- Запустить 1.bat и ждать. Если файлов много, и они png, ждать долго.
- Когда в чёрном окошке появится сообщение о необходимости нажать клавишу для продолжения — всё готово. Осталось взять содержимое созданных папок и скопировать на хостинг по фтп, перезаписывая старые файлы.
Для примера. Пусть у Вас блог на WordPress. Все изображения хранятся в [/wp-content/uploads/]. Заходим в папку сайта (по фтп), заходим в [wp-content] и просто копируем [uploads] в одноимённую папку OptimizeImg. Запускаем 1.bat и ожидаем. После окончания работы содежимое [jpg_jpegtran] (заходим туда!) заливаем на сервер. На запросы об имеющихся файлах отвечаем перезаписью. Аналогичный трюк для png, только сначала смотрим, какая папка — [png_optipng] или [png_pngout] — занимает меньше места, её содержимое и заливаем.
Не нужно бояться повредить остальные файлы. Батники работают только с jpg/png, и в новосозданные папки пишутся только изображения этих типов.
Надеюсь, кому-то будет полезно. Успехов!
Дополнения
- Путь к [OptimizeImg] не должен содержать восклицательных знаков ! и процентов %
- Запускать скрипты от имени администратора не нужно. Более того, в этом случае они могут не работать!
- …
днём интернета
шоколадкой для работы мозга
коробочкой ароматного чая для бодрости
продлением хостинга на +1 месяц
Автор публикации
(4 голосов, в среднем: 5,00 из 5)
Загрузка...
Здравствуй, Анди! Радуешь очередным, офигенно подробным и полезным мануалом. Мне даже захотелось все это попробовать, но руки не дойдут, наверное…
Попадись мне такая статья пару лет назад — я бы визжал и плакал от восторга. Суть ее очень полезнотворная. А в нынешнее время чего-то как-то накатилося всего… Не до чего…
Может, кто-нибудь из читателей блога — отпишется по использованию мануала? Такой труд не должен оставаться без внимания, ведь проделанная работа может существенно сократить размер детища любого блоговода…
Денис, приветствую.
Спасибо на добром слове)
Приветствую, x64 (aka andi). Благодарю за скрипт. Проверил его в работе. Мне понравился.
Для начала небольшое замечание: в папке в пути которой есть кирилические символы картинки не обработались. После переноса папки скрипта в корень диска файлы обработались.
После оптимизации размер картинок уменьшился почти на 40%. При этом сервис PageSpeed Insights сообщает, что можно сжать ещё на 20%. Интересно, почему так получается. Кстати, оценка сайта сервисом после оптимизации картинки существенно повышается.
Доброго дня.
По кириллице — да, был косяк. Вроде поправил, архив обновил, с этим должно быть ок.
По сервису, тоже сначала как-то убивался, но когда он показал, что файл можно сократить на 19 КБ (при этом размер файла был 12 КБ), поостыл. Глюки налицо.
Если говорится, что jpg можно уменьшить на столько, даже не знаю, что тут можно сделать.
А вот с png ситуация весьма забавная, и для этого случая в архиве есть 3.bat, который, помимо штатного прогона файлов через минимизаторы (pngout и optipng), прогоняет обработанные файлы через «соседей» (optipng и pngout соответственно). И получится может такая штука, как на скриншоте. Исходный файл весит 3172 байта, обработанный optipng + потом pngout — 1155 байт. Экономия почти 10% относительно одного лишь optipng. Мистика, не иначе) С другой стороны, проги не безупречны, и им явно есть куда улучшаться.
Спасибо!
Здравствуйте, уважаемый cefp!
Очень рад, что труды Анди не пропали даром и нашелся человек, который извлек из этого пользу. А самое главное в том, что Вы дали обратную связь, что для автора, на мой взгляд, является важным и мотивирующим фактором.
Ещё кое что заметил. Если запустить 3.bat после 1.bat или 3.bat, то он запрашивает подтверждение перезаписи каждого файла после его обработки. Чтобы не ждать, я просто оставил клавишу «y» и оставил компьютер работать. Если запустить файл 3.bat один раз, не запуская до него других то он не обрабатывает последовательно двумя программами. Поэтому приходится запускать 2 раза. Это все было в прежней версии скрипта.
По поводу максимально возможного сжатия, что выдаёт сервис гугла, есть одна догадка. Он выдаёт ссылки на программы для сжатия картинок. Как я понял они работают из под линукс. Может быть, что для анализа гугл пользуется результатами работы этих программ.
Здравствуйте, pessimist. У меня как и у Вас тоже много всяких дел, да и у многих наверно так. Иногда при мыслях об этом вспоминаю слова Кийосаки о крысинных бегах. Но ведь без дел тоже нельзя, приходится как-то оптимизировать.
Честно говоря, такое поведение и закладывал. В том смысле, что не придумал сценарий, когда понадобится производить запись поверх существующих файлов.
А вот про двойной запуск 3.bat — что-то странное. У меня при запуске создаётся 5 папок рядом с uploads, и в каждой свои «минифицированные» файлы. Может, от Виндузы зависит? Ибо не знаю, на что подумать. У меня win 8.1
У меня седьмая. Папки сначала создаёт пустые, для заполнения запускал повторно.
Тем временем продолжил изучить эту проблематику. Выяснил, что гугл всётаки не совсем правильно сообщает о возможной степени сжатия картинок. В низу страницы с отчётом о скорости страницы он предлагает посмотреть как по его мнению должны выглядеть картинки. Я их скачал и сравнив с исходными заметил, что искажение есть. Не вооруженным взглядом они лучше всего видны на картинках с небольшими красочными элементами. Гугл делает их обезцвеченными.
Ещё до того как увидел картинки от гугл возникло предположение с чем это может быть связно. Можно сжимать картинки с помощью цветовой субдескритизации. Суть которой заключается в сжатии цвета при сохранении качества яркости. Предполагается, что человек лучше воспринимает изменение яркости чем цвета. В jpegtran я не нашел такой функции. По открытой информации фильтр позволяет сократить объём на 17-20 %. Его часто используются для сжатия видеосигнала. Можно проверить эту теорию на практике, но увидев какое качество картинки получается, я пока приостановил изучение в этом направлении.
Таким образом, в советах от гугл можно увидеть не только полезные но и отчасти вредные составляющие, которые могут снизить качество отображения сайта до телевизионного уровня.
x64 (aka andi), не думали о прогрессивном сжатии? У меня складывается мнение, что оно лучше обычного. Так как почти не влияет на объём картинки и позволяет видеть её очертания до полной загрузки.
Кстати, скачал программу RIOT для сжатия с учетом цветовой субдескритизации и заметил, что при прогрессивной оптимизации у него объем картинки меньше чем при стандартной.
И ещё раз спасибо!
Папки пустые (структура каталогов) создаются предварительно, за это ответственна [i]xcopy[/i]. Попробую на виртуалке повторить этот финт. Вообще, весьма странно выходит, не наблюдал подобного поведения ни разу.
За прогрессивный формат — отдельное спасибо. К счастью, эта возможность есть, нужно добавить ключ -progressive к параметру jpegtran_params. Обновил архив с учётом данного ключа.
При желании, можно изменить качество выходного файла. В тот же параметр добавить ключ:
-quality val
где val — числовое значение от 5 до 95. Но это неминуемо приведёт к ухудшению качества изображения.
Благодарю за нововведение. Прогрессивный формат в jpegtran сжимает ещё лучше, чем обычный.
Качество 95 не сильно отличается от 100, на глаз не заметно, но объём уменьшается значительно. Такой вывод сделал экспериментально по разным программам. Я этот параметр не задаю, так как исходные картинки разного качества и боюсь как бы не увеличить размер пересжатых ранее картинок.
Благодаря Вам стало лучше) Вроде пустяк, а в глобальном плане может мегабайты высвободить.
Спа-си-бо!
Анди, привет
Тоже озадачена объемом картинок, у меня их много и не у всех допустимый формат. А как поведёт себя программа с теми, которые залиты как медиафайл? У меня таких достаточно в статьях о путешествиях это важно. Хочется передать красоту пейзажей. Не тронет их? Или они в отдельной папке хранятся?
Спасибо за статью.
Людмила, доброго дня! Рад видеть в добром здравии (:
Это не программа, а небольшой скрипт, правильнее будет так. Он пробегается по всем файлам и отдаёт на пережатие только *.jpg и *.png, более ничего не трогает. На выходе получается папка с тоже же структурой дерева каталогов и пожатыми файлами. Если Ни одной картинки не найдено, то не будет обработано ни одного файла.
Посмотрел статью по Крыму. Там файлики в стандартной папке: wp-content/uploads/
И, да, программы, которым скрипт скармливает файлики, не изменяют качество исходной картинки. Они просто подбирают коэффициенты квантования, выкидывают ненужные данные (мета-информацию), но сама картинка при этом не страдает. Иными словами: это для тех, кто хочет сделать изображения меньше, но при этом чтобы ничего визуально не изменилось. Как-то так)
Анди, благодарю за подробный ответ. По Крыму у меня уже всё ОК. я теперь за объёмом слежу, на старых статьях по незнанию чёрти что творится)). Давно озадачена этой проблемой, и вот как раз… вовремя…прочла.
О, проверила статью по Крыму, как всё запущено..
)) и старые и новые всё надо перерабатывать.
Людмила, всегда через какое-то время всплывает недовольство прошлыми работами. Ох уж этот перфекционизм)
Andi ! Хеллоу май френд
Я пользуюсь BlackBirdImage
Удобнее этой программы пока не нашел !
Ниже скринчик
Айк, спасибо!
У меня по старинке: для группового изменения с размерами — IrfanView, для уменьшения размера не меняя качество картинок — проги из статьи.
Если озадачусь сравнение провести, обязательно BBI включу. Увы, пока идей нет, как это более грамотно сделать(
Ух ты, как это я удачненько зашла!
Давеча тут обнаружила в своем блоге в одной из прошлогодних статетй кучу фото, которые каким-то образом залила, не оптимизированные (видимо, в бессознательном состоянии совсем была, когда пост писала). И задумалась глубоко и надолго: как бы так ух ужать, чтобы разом и не заморачиваясь со ссылками на новые фото — это ж если каждую вручную скачать, ужать, опять загрузить, проверить путь в статье — обалдеть можно… А тут у тебя вот такой прямо предновогодний подарок!
Сейчас ещё раз внимательно статью перечитаю, а то как-то не всё с первого раза поняла. И постараюсь выбрать время, чтобы применить твой скрипт. Благодарю!
Светлана, тем более это бесплатно. Чего бы не попробовать? ;)
Только здесь исключительно доужатие без потери качества. Если требуется фотки 4000×3000 пикселей в FullHD превратить, нужны дополнительные действия.
Попробую всенепременно! И даже отпишусь о результате. ;) Мне именно ужать надо, не full’ить
). Вот смотри, существуют всякие там плагины для создания бэкапов баз данных сайта (ну там на случай ядерной войны и глюков систем 
). А я, как большой любитель химичить в блоге, эти базы долго и скрупулёзно собираю, но недавно увидела, что у одного моего сайта вес архива стал почти 2 Мб. И всё бы ничего, но когда я загружала ранее архивы (после очередного «химичинья») через хостинговую консоль, там было сказано, что размер архива не может быть более 1Мб. То есть MySQL (если не путаю данные) вроде как не должно быть больше мегабайта.
Кстати, раз зашёл разговор про объемы. У меня вот ещё какой нестандартный вопрос к тебе есть (прости, если немного не по теме, но всё-таки к объему изображений он косвенно относится
Спрашивается, даже если я ужму картинки, рано или поздно (сайт ведь существует не год и не пять даже), архив всё равно будет занимать больше 1 МБ, и тогда как быть, если вдруг случится внештатная ситуация?
Светлана, доброго дня.
Картинки в базе не хранятся, так что с этим ок.
Максимальный размер баз зависит от используемой операционной системы и файловой структуры. В самом запущенном случае, это будет файл порядка 4 ГБ. То, что хостинг не разрешает более 1 МБ, так то хостинг такой.
Дефолтные настройки пыха не разрешают загружать файлы более 2 МБ. Если хостер по какой-то причине это не изменяет, значит пора задумываться о переезде. Сколько лет прошло, а у них всё такое ограничение. Провайдеры уже сотнемегабитные каналы предлагают.
Сократить базу на WP можно:
1. Удалив бекапы статей. Если статьи пишутся в админке, подобных может не один десяток насоздаватья.
2. Удалить спам-комментарии.
3. Если разрешена регистрация, почистить таблицу пользователей. Возможно, там почти тупо-боты, которые и нафиг не нужны.
4. Если установлены какие-то плагины, посмотреть, что от них в базе пишется. Может, логируются все действия всех юзеров.
В общем, достаточно зайти в phpMyAdmin. Там показываются размеры каждой таблицы, сразу будет видно, на что обратить внимание.
Странно, а мне казалось, что в БД пишется вообще всё-о…
Хостер-то нормальный, но вот в phpMyAdmin грузить БД больше 1 Мб сказано низя…
Во-о-от. Покопалась я в той самой php — ничо не поняла.
По спам-комментам — они у меня автоматом фильтруются-удаляются.
Дубликаты статей тоже чистятся регулярно.
Юзер один.
Там по большому счету пара файлов, которые имеют большое количество строк. Например, login_fails (если правильно понимаю, это журнал авторизации), lockdowns (это вроде ошибочные авторизации или блокировки?), а вот top_ten_daily (тут вообще самое большое количество строк) и postmeta — не знаю, за что они отвечают. Вопрос только, можно ли их безопасно почистить?
Прости, дорогой, что я тут это всё — может, не надо было? ;)
Светлана, доброй крайней пятницы! ;)
«Та самая php» — это почти как Эксель. Вообще, изначальная суть баз это манипулирование таблицами. Аналогии самые прямые:
— эксель-файл — база данных
— листы — таблицы
— содержимое листа — содержимое таблицы
Если примешь эту аналогию, сразу станет много проще. Но это к вопросу не относится)
Первые две указанные таблицы создаются плагином. Проверь его настройки, возможно, там есть кнопочка для чистки данных. Если нету, скорее всего можно очистить. Есть сомнения — предварительно сделать дамп.
С третьей таблицей, TTD которая, скорее всего аналогично.
А вот postmeta лучше не трогать. Ладно туда некоторые плагины данные пишут, это ещё и сам WP использует.
ЗЫ: комментарии действительно удаляются или переносятся в корзину? Ключевой момент, влияющий на размер таблицы)
Касаемо скрипта.
И это при том условии, что я их перед заливкой обычно «фотошоплю» специально для веба. Но тут, когда уже один раз прогнала картинки, до меня дошло — если в «фотошопе» нажать кнопдочку «прогрессивный» в окне сохранения для веба, то как раз объем файла становится меньше, а качество остаётся выставленным в настройках к файлу. Так что, тестируя твою программулину, Андрей, параллельно развивала мыслительные способности. 
Или слепить их в одну папку upload и потом только грузить? 
Потестила. Мне понравилось, как шустренько обработались мои 280 Мб картинок, из которых получилось 250 Мб.
И появился ещё вопрос, Анди-сан. Точнее, два вопроса.
А как же быть с gif-ками? ;) У меня нет-нет да проскальзывают и эти типы файлов.
И для тех, кто в бронепоезде, уточни, плиз. Вот после обработки у меня получается в папке jpegtran лежат jpeg’и, а в папке pngout лежат png’шки. Но при заливке на хостинг, мне заливать и то и другое по отдельности?
Светлана, хоть немножко, да ужалось ;)
С гифами всё проще: они почти не используются. Разве что в анимированных смайликах. В остальном png/jpg гораздо лучше.
Как заливать — сугубо личное дело каждого. Допускаю, кто-то и с флейшки по одному файлу перекидывает)
Операция копирования/замены совершенно стандартна, итоговой разницы между скинуть пофайлово или залить папку целиком — нет.