С каждым годом поисковые системы все жестче закручивают гайки во внешней оптимизации. И все больше внимания уделяют внутренним факторам сайта. Например скорость загрузки вашего сайта тоже влияет на рост ваших позиций в выдаче.
Конечно существует масса способов как ускорить свой сайт, но сегодня мы поговорим только об одном из них — это оптимизация изображений для сайта. Нет это не пресловутые метатеги — ALT и TITLE, речь пойдет о технических моментах.
В свое время я даже не задумывался о том, что можно как то оптимизировать изображения. Да и зачем? Ведь широкополосный, безлимитный, картинки с сайтов грузятся моментально. Что даст уменьшение размера картинки на 20 килобайт? Да ничего!
Но тренд мобильного трафика заставил задуматься над оптимизацией. Если посмотреть на график роста мобильного трафика, то по статистике, за 2014 год в интернет с мобильных девайсов входил каждый 3 человек. А это означает, что все больше людей будут посещать сайты и блоги с гаджетов.
А как известно, скорость мобильного интернета — та еще сказка. И если на вашем сайте имеются тяжелые изображения, то пользователь может вовсе не дождаться загрузки вашего сайта. Поэтому сейчас, тема оптимизации изображений для сайта весьма актуальна.
Я перед каждой своей публикацией занимаюсь оптимизацией, и поверьте, общий вес всех картинок уменьшается до 60% без потери их качества. Так что давайте взглянем на инструменты которыми я пользуюсь.
Инструменты для оптимизации изображений на сайте.
Самый распространенный и самый доступный для многих — это Photoshop. Скорее всего если вы блогер, вебмастер или человек тесно связанный с публикациями статей на своих сайтах, то данный софт у вас установлен.
Для оптимизации изображения в Photoshop, вам необходимо провести ряд несложных манипуляций. Заходите в меню Файл -> Сохранить для Web.
После чего видим окно с двумя вариантами изображений.
Верхнее — это изображение оригинал, нижнее — это то, что мы получим после обработки.
А теперь я вам покажу фокус. Смотрите на изображения и на стрелки на них.
Первая картинка — это сохранение при 100% качестве. Ее вес уменьшился на 85%.
Вторая картинка — это сохранение при 70% качестве. Ее вес уменьшился на 95%, при этом изображения выглядят идентичными.
А теперь представьте сколько времени пришлось бы потратить пользователю на загрузку картинки размером в 2 мегабайта, на мобильном устройстве. А если таких изображений в статье 5–10 штук? Вот почему важно оптимизировать изображения для сайта.
Но Photoshop инструмент не идеальный в вопросе массовой оптимизации изображений. Поэтому давайте переключимся на более специализированный софт.
PictureBeaver — друг для windows пользователя.
Я уже давненько перешел на MacOS и Windows использую в редких случаях. В основном это для сбора семантического ядра с помощью KeyCollector. Поэтому пришлось немножко потрудиться, чтобы найти действительно стоящую программу для оптимизации изображений. И чтобы она работала на Windows.
Как оказалось, есть замечательная программа PictureBeaver , которая не прихотливая к ресурсам, и работает на удивление быстро.
С программой работать очень просто. Открываете папку со скачанным скриптом, и перетаскиваете все изображения которые планируете оптимизировать, на файл optimize.wsf
После обработки изображений, появится папка с оптимизированными картинками, и файл отчета по каждой из них.
ImageOptim — друг яблоководов.
С данным софтом для MacOS проблем нет. Это связано в первую очередь с тем, что технику apple больше всего любили и любят дизайнеры. А они то уж любят поиграться с изображениями. Поэтому найти нужный софт не составит у вас труда.
Я же свой выбор остановил на бесплатной утилите ImageOptim , так как с основной задачей она справляется на ура. А это — массовая оптимизация изображений для сайта.
Принцип ее работы отличается от PictureBeaver. Она не создает никаких новых папок с готовыми изображениями. Она просто заменяет оригиналы оптимизированными изображениями.
Выглядит она вот так:
Окно куда необходимо перетащить изображение.
Окно после оптимизации.
Как видите, программе удалось уменьшить общий вес на 24,8%
Первое изображение было уже оптимизировано в фотошопе. Второе нет.
P.S. Мобильный интернет растет, так что задумайтесь об удобстве для своих пользователей.
Ilya is a Developer Advocate and Web Perf Guru
Изображения - те ресурсы, которые часто занимают много места на странице и весят больше всего. Благодаря их оптимизации мы можем значительно уменьшить количество скачиваемых данных и улучшить работу сайта. Чем больше сжато изображение, тем меньше пропускной способности канала занимает скачивание и тем быстрее браузер сможет показать страницу пользователю.
Оптимизация изображений - это одновременно наука и искусство. Мы можем назвать это искусством, потому что никто не может дать определенный ответ, как лучше всего сжать конкретное изображение. Однако это и наука, ведь в нашем распоряжении есть разработанные техники и алгоритмы, которые могут значительно уменьшить размер ресурса. Чтобы выбрать оптимальные настройки для изображения, необходимо учесть много факторов: возможности формата, закодированные данные, качество, количество пикселей и т. д.
Удаление и замена изображений
TL;DR
- Удалите ненужные изображения.
- При возможности применяйте эффекты CSS3.
- Используйте веб-шрифты вместо кодировки текста в изображениях.
Прежде всего задайте себе вопрос: действительно ли это изображение необходимо? Хороший дизайн должен быть простым и не ухудшать производительность. Лучше всего просто удалить ненужное изображение, поскольку оно весит гораздо больше байтов по сравнению с HTML, CSS, JavaScript и другими ресурсами на странице. При этом одно изображение в нужном месте может заменить длинный текст, поэтому вам нужно самостоятельно найти баланс и принять правильное решение.
После этого вы должны проверить, нельзя ли достигнуть желаемого результата более эффективным путем:
- Благодаря CSS-эффектам (градиентам, теням и т. д.) и CSS-анимации вы можете создать ресурсы, которые четко выглядят при любом разрешении и масштабе и весят гораздо меньше, чем изображения.
- Веб-шрифты позволяют использовать красивые надписи, сохраняя возможность выбирать и искать текст, а также менять его размер. Благодаря этому работа с вашим ресурсом станет ещё удобнее.
Избегайте кодирования текста в изображении. Красивые надписи необходимы для качественного дизайна, продвижения бренда и удобной работы с ресурсом, но текст в изображении только мешает всему этом. Его нельзя выбрать, найти, увеличить, скопировать, а также он плохо смотрится на устройствах с высоким разрешением. Конечно, веб-шрифтам также требуется оптимизация, но они помогут избежать вышеперечисленных проблем. Для отображения текста всегда выбирайте именно их.
Векторные и растровые изображения
TL;DR
- Векторный формат отлично подходит для изображений из геометрических фигур.
- Качество векторных изображений не зависит от масштаба и разрешения.
- Используйте растровый формат для сложных изображений с множеством нестандартных форм и деталей.
Если вы решили, что для достижения результата вам следует использовать именно изображение, выберите для него подходящий формат:
Векторное изображение
Растровое изображение
- В векторной графике для отображения картинки используются линии, точки и многоугольники.
- В растровой графике индивидуальные значения каждого пикселя в прямоугольной сетке кодируются, и на их основе показывается изображение.
У каждого формата есть свои достоинства и недостатки. Векторный формат идеально подходит для изображений из простых геометрических фигур (например, логотипов, текста, значков и т. д.). Они остаются четкими при любом разрешении и масштабе, поэтому используйте этот формат для больших экранов и ресурсов, которые должны быть показаны в разных размерах.
Однако векторные форматы не подходят для сложных изображений (например, для фотографий). SVG-разметки для описания всех фигур может стать слишком много, но полученное изображение все равно будет выглядеть нереалистично. В этом случае вам стоит использовать растровый формат изображений, например GIF, PNG, JPEG или новые форматы JPEG-XR и WebP.
Качество растровых изображений зависит от разрешения и масштаба: при увеличении оно становится размытым и распадается на пиксели. В результате вам может понадобиться сохранить несколько версий растрового изображения в разных разрешениях.
Оптимизация для экранов с высоким разрешением
TL;DR
- На экранах с высоким разрешением один CSS-пиксель состоит из нескольких экранных пикселей.
- В изображениях высокого разрешения пикселей и байтов гораздо больше, чем в обычных.
- Техники оптимизации можно применять к изображениям любого разрешения.
Говоря о пикселях, следует различать экранные и CSS-пиксели. CSS-пиксель может соответствовать одному или нескольким экранным. Это сделано для того, чтобы на устройствах с большим количеством экранных пикселей изображение было более четким и детализированным.
Конечно, на экранах с высоким DPI (HiDPI) графика выглядит очень красиво. Однако, чтобы хорошо смотреться в высоком разрешении, наши изображения должны быть более детализированными. Но у нас есть решение: векторные форматы идеально подходят для этой задачи. Они сохраняют четкость в любом разрешении. Даже если увеличатся затраты на отрисовку мелких деталей, мы по-прежнему используем один независимый от размера экрана ресурс.
С другой стороны, с растровыми изображениями возникает гораздо больше сложностей, потому что они кодируют данные изображения в каждом пикселе. Таким образом, чем выше число пикселей, тем больше размер такого ресурса. В качестве примера рассмотрим разницу между фотографиями размером 100х100 CSS-пикселей:
Когда мы вдвое увеличиваем разрешение экрана, общее количество пикселей возрастает сразу в четыре раза: в два раза по вертикали и в два по горизонтали.
Подведем итог. На экранах с большим разрешением графика выглядят очень привлекательно, поэтому вы сможете создать хорошее впечатление о вашем сайте. Однако для таких экранов нужны изображения с высоким разрешением. Выбирайте векторные форматы, потому что они четко выглядят на любых устройствах. Если необходимо использовать растровое изображение, добавьте несколько оптимизированных вариантов ресурса (см. далее).
Оптимизация векторных изображений
TL;DR
- SVG - это формат изображений на основе XML
- SVG-файлы нужно минифицировать для уменьшения размера.
- Сжимайте SVG-файлы с помощью GZIP.
Все современные браузеры поддерживают формат SVG (Scalable Vector Graphics). Это формат изображений на основе XML для двухмерной графики. Разметку SVG можно встроить прямо в страницу или на внешний ресурс. В свою очередь, файл SVG можно создать с помощью любого ПО для векторного рисования или вручную в текстовом редакторе.
Пример выше отрисовывает простую круглую форму с черной границей и красным фоном. Она была экспортирована из Adobe Illustrator. Легко догадаться, что она содержит множество метаданных, например информацию о слоях, комментарии и пространства имен XML, которые чаще всего не нужны для отобрадения ресурса в браузере. В результате, следует минифицировать файлы SVG с помощью инструмента svgo .
Например, svgo уменьшает размер приведенного выше файла SVG на 58% с 470 до 199 Б. Кроме того, поскольку SVG - это формат на основе XML, мы может применить сжатие GZIP для уменьшения его размера при передаче. Убедитесь, что на вашем сервере настроено сжатие SVG-ресурсов.
Оптимизация растровых изображений
TL;DR
- Растровое изображение - это сетка пикселей.
- В каждом пикселе закодирована информация о цвете и прозрачности.
- Чтобы уменьшить размер изображения, компрессоры используют различные методы для снижения количества битов на пиксель.
Растровое изображение - это просто двухмерная сетка отдельных пикселей. Например, изображение 100x100 пикселей - это последовательно из 10 000 пикселей. В каждом из пикселей содержатся значения RGBA: красного (R), зеленого (G) и синего (B) канала, а также альфа-канала, или канала прозрачности (A).
Браузер устанавливает 256 значений (оттенков) для каждого канала, которые в пере счете занимают 8 битов на канал (2 ^ 8 = 256) и 4 байта на пиксель (4 канала x 8 бит = 32 бита = 4 байта). Таким образом, зная размеры сетки, мы легко можем вычислить размер файла:
- Изображение 100 x 100 пикс. состоит из 10 000 пикселей
- 10 000 пикс. x 4 Б = 40 000 Б
- 40 000 Б / 1024 = 39 КБ
Может показаться, что 39 КБ - это совсем немного для изображения размером 100x100 пикселей. Однако при увеличении размера файл будет весить гораздо больше, и на его скачивание придется потратить много времени и ресурсов. Сейчас это изображение не сжато. Что можно сделать, чтобы уменьшить его размер?
Один из простых способов оптимизации изображения - снизить глубину цвета с 8 битов на канал, выбрав палитру меньшего размера. Установив глубину в 8 битов на канал, мы получаем 256 значений для канала и 16 777 216 (2563) цветов. Может, стоит уменьшить палитру до 256 цветов? Тогда нам будет нужно всего 8 бит для всех каналов RGB и только 2 байта на пиксель, а не 4, как раньше. Нам удалось сжать изображения в два раза!
Оптимизировав данные в отдельных пикселях, обратим внимания на соседние пиксели. Оказывается, цвет таких пикселей на многих изображениях, особенно на фотографиях, часто похож. Благодаря этому компрессор может применять дельта-кодирование . Вместо сохранения отдельных значения для каждого пикселя можно указать только разницу между соседними пикселями. Если они одинаковы, то дельта равна нулю, и нам нужно сохранить всего один бит. Но это ещё не все!
Мы часто не замечаем разницы в некоторых оттенках, поэтому мы можем оптимизировать изображение, уменьшив или увеличив палитру для этих цветов. У каждого пикселя в двухмерной сетке есть несколько соседей, поэтому мы можем усовершенствовать дельта-кодирование. Сконцентрируетесь не на непосредственных соседях пикселя, а на целых блоках похожих цветов и закодируйте их с помощью разных настроек.
Как вы видите, оптимизация изображения становится все сложнее и интереснее. На эту тему ведутся научные и коммерческие исследования, потому что изображения весят много байтов, и развивать новые техники сжатия выгодно. Если вы хотите узнать больше, прочитайте или ознакомьтесь с конкретными примерами в .
Итак, как весь этот сложный материал поможет нам оптимизировать изображения? Повторим: нам не нужно изобретать новые методы сжатия. Однако нам нужно знать о ключевых аспектах вопроса: пикселях RGBA, глубине цвета и разных техниках оптимизации. Это необходимо, чтобы продолжить разговор о растровых форматах.
Сжатие данных с потерями и без потерь
TL;DR
- Учитывая особенности человеческого зрения, для изображений можно применять сжатие данных с потерями.
- Для оптимизации изображения используется сжатие данных с потерями и без потерь.
- Разница в форматах изображений - это отличия в том, как и какие алгоритмы этих сжатий применяются для уменьшения размера ресурса.
- Не существует самого лучшего формата или настройки качества, которые подошли бы для всех изображений. При сочетании разных компрессоров и ресурсов мы никогда не получим одинаковый результат.
Для определенных типов данных, например исходного кода страницы или исполняемого файла, крайне важно, чтобы компрессор не удалял и не менял первоначальную информацию. Из-за пропавшего или неправильного бита данных может быть полностью искажено или уничтожено значение контента файла. Однако другие типы данных вполне можно передать в приблизительном виде.
Из-за особенностей человеческого зрения мы можем не заметить отсутствия какой-либо информации о каждом пикселе, например мы не увидим различия между некоторыми оттенками цвета. Поэтому мы можем использовать меньше битов для кодирования некоторых цветов и благодаря этому уменьшить размер ресурса. Таким образом, стандартная оптимизация изображения состоит из двух основных этапов:
- Сжатие изображения [с потерями](http://ru.wikipedia.org/wiki/Сжатие_данных_с_потерями) , при котором удаляются некоторые данные пикселей.
- Сжатие изображения [без потерь](http://en.wikipedia.org/wiki/Lossless_compression) , при котором данные пикселей сжимаются.
Выполнять первый шаг необязательно. Точный алгоритм зависит от определенного формата изображения, однако учтите, что каждое изображение можно сжать с потерей данных. На самом деле, разница между форматами изображений, например GIF, PNG, JPEG и т. д., состоит именно в комбинации различных алгоритмов сжатия данных с потерей и без потерь.
Как лучше всего совмещать сжатие с потерями и без потерь? Это зависит от самого изображения и других условий, например баланса между размером файла и шумами. Чтобы получить четкое детализированное изображение, вы можете не применять сжатие с потерями. Если же для вас больше важен размер файла, смело используйте этот метод оптимизации. Единого варианта настроек для всех изображений не существует. Вы сами должны определить желаемый результат и принять решение.
При использовании сжатия с потерями, например JPEG, вы сможете выбрать настройки качества (вроде ползунка Сохранить для Web в Adobe Photoshop). Обычно это значение от 1 до 100, которое определяет применение алгоритмов сжатия с потерями и без. Не бойтесь снижать качество: часто изображение по-прежнему хорошо выглядит, а размер файла становится значительно меньше.
Note: Обратите внимание, изображения с одинаковыми настройками качества, но в разных форматах будут отличаться. Это происходит из-за разницы в алгоритмах сжатия изображения. Например, JPEG и WebP с настройками качества 90 выглядят по-разному. На самом деле, даже изображения в одном формате и с одинаковыми настройками качества могут отличаться в зависимости от использованного компрессора.Выбор формата изображения
TL;DR
- Выберите подходящий стандартный формат: GIF, PNG или JPEG.
- Попробуйте установить разные настройки для каждого формата (качество, размер палитры и т. д.) и выберите наиболее подходящие.
- Для современных клиентов добавьте ресурсы в форматах WebP и JPEG XR масштабированные изображения:
- Масштабирование изображений - один из самых простых и эффективных методов оптимизации.
- Если вы используете изображения большого размера, пользователь может скачивать лишние данные.
- Reduce the number of unnecessary pixels by scaling your images to their display size Снизьте количество ненужных пикселей, уменьшив изображение до отображаемого размера.
Помимо алгоритмов сжатия с потерями и без потерь, в форматах изображения поддерживаются другие функции, например анимация и канал прозрачности (альфа-канал). Таким образом, при выборе подходящего формата вам нужно учесть желаемый визуальный эффект и требования к сайту или приложению.
| Формат | Прозрачность | Анимация | Браузер |
|---|---|---|---|
| GIF | Да | Да | Все |
| PNG | Да | Нет | Все |
| JPEG | Нет | Нет | Все |
| JPEG XR | Да | Да | IE |
| WebP | Да | Да | Chrome, Opera, Android |
Существуют три стандартных формата изображений: GIF, PNG и JPEG. Кроме них некоторые браузеры поддерживают новые форматы WebP и JPEG XR, для которых доступно большее сжатие и дополнительные возможности. Итак, какой формат выбрать?
- Изображение должно быть анимированным? Тогда выбирайте формат GIF.
- Цветовая палитра GIF состоит всего из 256 цветов. Это недостаточно для большинства изображений. Кроме того, формат PNG-8 лучше сжимает изображения с маленькой палитрой. Таким образом, выбирайте GIF, только если вам требуется анимация.
- Нужно сохранить все мелкие детали в самом высоком разрешении? Используйте PNG.
- В формате PNG не применяется сжатие с потерей данных, не считая выбора размера палитры. Благодаря этому изображение сохраняется в самом высоком качестве, но весит гораздо больше, чем файлы других форматов. Используйте этот формат только там, где это необходимо.
- Если изображение состоит из геометрических фигур, конвертируйте его в векторный (SVG-) формат!
- Избегайте текста в изображениях. Его нельзя выбрать, найти или увеличить. Если текст необходим для создания дизайна, используйте веб-шрифты.
- Вы оптимизируете фотографию, скриншот или изображение похожего типа? Используйте JPEG.
- В JPEG используется комбинация сжатия с потерями и без потерь для уменьшения размера файла. Чтобы выбрать лучшее сочетание качества и размера изображения, попробуйте установить несколько уровней качества JPEG.
Определив подходящий формат и его настройки для всех ресурсов, добавьте дополнительный вариант в WebP и JPEG XR. Это новые форматы, которые пока не поддерживаются во всех браузерах. Однако с их помощью может значительно уменьшить размер файла. Например, WebP сжимает изображение на больше, чем JPEG.
Поскольку WebP and JPEG XR поддерживаются не во всех браузерах, вам надо добавить дополнительную логику в приложения или на серверы, чтобы отправлять пользователю соответствующий ресурс.
- Некоторые сети доставки контента предоставляют услуги по оптимизации изображений, в том числе предоставление файлов в JPEG XR и WebP.
- Некоторые инструменты с открытым кодом, например PageSpeed для Apache и Nginx, автоматически производят оптимизацию, преобразование и доставку соответствующих ресурсов.
- Вы можете добавить дополнительную логику приложения, чтобы определить клиент и его поддерживаемые форматы, а затем отправить оптимальный вариант ресурса.
Обратите внимание, что если вы используете Webview для отрисовки контента в нативное приложении, тогда вы можете полностью управлять клиентом и использовать только WebP. В приложениях Facebook, Google+ и т. д. используются именно WebP-ресурсы, так как они действительно повышают производительность. Чтобы узнать больше об этом формате, посмотрите презентацию WebP: Deploying Faster, Smaller, and More Beautiful Images от Google I/O 2013.
Инструменты и выбор параметров
Не существует одного идеального формата, инструмента или алгоритма оптимизации, который бы подошел бы для всех изображений. Чтобы получить наилучший результат, вы должны выбрать формат и его настройки в зависимости от контента, а также визуальных и технических требований.
| Инструмент | Описание |
|---|---|
| gifsicle | создает и оптимизирует GIF-изображения |
| jpegtran | оптимизирует JPEG-изображения |
| сжимает PNG без потерь | |
| pngquant | сжимает PNG с потерями |
Не бойтесь экспериментировать с параметрами компрессоров. Установите разные настройки качества, выберите подходящий вариант и примените его к другим похожим изображениям на сайте. Но помните: не все графические ресурсы нужно сжимать одним и тем же методом!
Масштабирование передаваемых изображений
TL;DR
Warning: A tag here did NOT convert properly, please fix! ""Размер изображения - это сумма пикселей, умноженная на число байтов, используемых для кодирования каждого пикселя. Оптимизация изображения сводится к уменьшения этих двух составляющих.
Таким образом, один из самых простых и эффективных методов оптимизации - убедиться, что размер отправляемого изображения не больше, чем его отображаемый размер в браузере. Ничего сложного, но многие сайты совершают серьезную ошибку. Они размещают крупные ресурсы, и браузеру приходится самому масштабировать и отображать их в более низком разрешении. Помимо всего прочего, это увеличивает нагрузку на процессор пользователя.
Отправляя лишние пиксели и предоставляя браузеру самому масштабировать ресурс, мы упускаем возможность оптимизировать количество байтов, нужных для отрисовки страницы. Обратите внимание, что при масштабировании не только уменьшается количество пикселей, но и меняется исходный размер изображения.
| Исходный размер | Отображаемый размер | Ненужные пиксели |
|---|---|---|
| 110 x 110 | 100 x 100 | 110 x 110 - 100 x 100 = 2100 |
| 410 x 410 | 400 x 400 | 410 x 410 - 400 x 400 = 8100 |
| 810 x 810 | 800 x 800 | 810 x 810 - 800 x 800 = 16100 |
Обратите внимание, что во всех трех случаях отображаемый размер всего лишь на 10 пикселей меньше, чем исходный. Однако чем больше первоначальный размер изображения, тем больше лишних данных приходится кодировать и отправлять. Даже если вам не удастся установить полное совпадение исходного и отображаемого размеров, вы должны максимально сократить количество ненужных пикселей.
Список методов оптимизации
Оптимизация изображений - это одновременно наука и искусство. Мы можем назвать это искусством, потому что никто не может дать определенный ответ, как лучше всего сжать конкретное изображение. Однако это и наука, ведь в нашем распоряжении есть разработанные техники и алгоритмы, которые могут значительно уменьшить размер ресурса.
Помните о некоторых советах и техниках, которые помогут вам оптимизировать изображения:
- Выбирайте изображения в векторных форматах. Их качество не зависит от разрешения и масштаба, поэтому они подходят для больших экранов и разных типов устройств.
- Минифицируйте и сжимайте SVG-ресурсы. Многие графические приложения добавляют XML-разметку, которая часто содержит ненужные метаданные. Ее можно удалить. Убедитесь, что на серверах настроено GZIP-сжатие для SVG-ресурсов.
- Выбирайте наиболее подходящие растровые форматы. Определите необходимые требования к изображениям и выберите нужный формат для каждого ресурса.
- Пробуйте разные настройки качеств для растровых форматов. Не бойтесь снижать качество: часто изображение по-прежнему хорошо выглядит, а размер файла становится значительно меньше.
- Удаляйте ненужные метаданные. Многие растровые изображения содержат лишнюю информацию о ресурсе: геоданные, сведения о камере и т. д. Для их удаления используйте соответствующие инструменты.
- Масштабируйте изображения. Уменьшайте файлы на сервере, чтобы исходный и отображаемый размеры были практически одинаковы. Обратите особое внимание на большие изображения. Если их масштабирует браузер, производительность вашего сайта значительно снижается.
- Автоматизируйте. Используйте надежные инструменты и ПО, которые будут автоматически оптимизировать изображения на вашем сайте.
Except as otherwise noted, the content of this page is licensed under the Creative Commons Attribution 3.0 License , and code samples are licensed under the Apache 2.0 License . For details, see our . Java is a registered trademark of Oracle and/or its affiliates.
Обновлено Август 8, 2018
Было протестировано несколько самых известных программ для оптимизации изображений. Сразу оговорюсь: речь идёт об алгоритмах значительного уменьшения размера файла, «с потерями» («lossy»). Сжатие джипега без потерь особого интереса не представляет, в виду того, что JPEG - сам по себе формат для хранения изображений «с потерями», а lossless-сжатие любыми средствами даёт максимальный выигрыш в пределах 3-5%. Здесь же мы говорим о программах, способных уменьшить размер файла в несколько раз.
Кстати, оптимизация загруженных участниками файлов давно внедрена в Артклубе Gallerix, она осуществляется автоматически в два этапа: первый - сразу при загрузке (lossless, используется Jpegtran) и второй - спустя некоторое время программой JpegMini.
Если ваш домашний архив никогда не оптимизировался и занимает сейчас, например, 100 Гб - вполне реально уменьшить эту цифру в 2-2,5 раза (до 45-50 Гб) без вторжения в качество картинки и в 3-4 раза (до 20-25 Гб) с небольшим, не очень заметным снижением качества.
Немного о технической части вопроса. Если объяснять очень грубо, работу инструментов компрессии изображений можно сравнить с изобретением переменного битрейта для аудиофайлов. Более насыщенные различными звуками участки аудио кодируются с высоким битрейтом, тишина - с самым низким. В отличие от аудиофайлов с постоянным битрейтом, формат JPEG уже имеет встроенную оптимизацию, мощность которой определяется настройкой качества, устанавливаемой при сохранении файла из любой программы. Работа сервисов компрессии изображений так же основана на подходе переменного битрейта - выявлении фрагментов изображения, кодированием которых можно хитро пренебречь для экономии места на диске.
Для обозначенных целей на рынке представлено несколько коммерческих решений и, по мнению многих российских и зарубежных коллег, JpegMini - номер один по совокупности параметров. Задача этого теста - «столкнуть лбами» все коммерческие и бесплатные инструменты для оптимизации изображений, дабы освежить «табель о рангах».
Исходные файлы
Первый из них - снят с рук на мобильный телефон прошлых лет - Samsung Note II, с минимальным разрешением файла. Таких фотографий у любого из нас миллионы, качеством такие файлы не награждены, их очень много и они обычно немного размыты и очень зернисты.
Второй файл имеет полностью техническое происхождение - это градиентная таблица, сгенерированная средствами Adobe Photoshop и сохранённая со 100%-м качеством. Видимые изменения обработки этой таблицы послужат для оценки итогового качества.
Третий файл снят на «среднестатистическую» любительскую мыльницу Panasonic GF3 в автоматическом режиме с рук. Это бытовая системная камера, без зеркал, но со сменной оптикой. Благодаря оптической стабилизации, с резкостью здесь лучше, это не мобильник, но шум почти такой же.
Последний файл взят с сайта Unsplash.com, автор Karl Fredrickson. Выступает в качестве примера фото, полученного профессиональной камерой с дорогой оптикой.
Инструменты
JpegMini
JpegMini, платная программа. Есть версии за 20 и за 149 USD, а также дорогая серверная версия. Десктопные версии работают одинаково, младшая имеет два ограничения: в скорости обработки и в максимальном разрешении файла (28Мп), старшая ограничена размером файла (60Мп). Работает на Windows и Mac.
TinyJPG
Есть платная версия в виде плугина для Adobe Photoshop (50 USD) и бесплатная онлайн-версия с ограничениями на размер файла и количество загрузок в сутки (которое, впрочем, очень легко обходится). Плугин работает также на Windows и Mac. Первые 500 файлов в месяц через API бесплатно, далее 0,009 USD за файл.
Compressor.io
Известный онлайн-сервис. Ограничен только максимальный размер файла, 10Мб.
Kraken.io
Популярный на Западе профессиональный сервис с высокими тарифами и жёсткими квотами. Бесплатная онлайн-версия ограничена максимальным размером файла в 1 Мб и вряд ли может восприниматься как инструмент. Это не более, чем демо-версия - обычная любительская камера не в состоянии выдать файл меньше 2-3 Мб. Тарифы на использование API начинаются с 5 USD в месяц за входящий объём 500 MB.
ConvertImage.net
Комплекс онлайн-инструментов для обработки изображений, среди которых есть и Jpeg-компрессор. Полностью бесплатен.
Jpeg-Optimizer.com
Онлайн-сервис. Полностью бесплатен и без ограничений. Есть ручная настройка уровня компрессии.
Optimizilla.com
Бесплатный веб-сервис. Этот же движок встречается и на других доменах. Многоязычный интерфейс. Ручная установка уровня компрессии (настройка появляется после загрузки изображения). Не более 20 файлов за раз.
DynamicDrive.com
Набор бесплатных онлайн-инструментов для обработки изображений. Оптимизация с ограничением файла 2,8 Мб. Выдаёт несколько готовых изображений с разными уровнями компрессии на выбор.
ShortPixel.com
Некий новый сервис с обилием разных тарифных планов, есть подписка с месячной оплатой и пакетные тарифы (10 000 файлов за 9,99 USD). Работает по API или через веб-интерфейс (до 20 файлов за раз). Ограничение размера файла в бесплатной онлайн-версии - до 10Мб.
ACDSee Ultimate
ACDSee Ultimate 9, профессиональная программа для организации и обработки изображений для Windows. Сохранение с включением «Optimize Huffman codes» и «Color Component sampling», качество 70%. Программа платная, цена начинается с 40 USD за самую скромную версию, но похожие настройки есть во многих бесплатных программах. Это пример чистого сохранения с небольшой lossless-оптимизацией.
«Чистый» JPEG
Сохранение файла с качеством около 70% (9 из 12) из Adobe Photoshop CS6, разновидность формата «базовая». Здесь чистый JPEG с использованием только возможностей формата, «нижняя точка отсчёта», доступная бесплатно из любой программы, умеющей сохранять в формате JPG.
Теперь немного о тех, кого забыли и почему. Вы это обязательно найдёте в Гугле, если попробуете найти оптимизаторы самостоятельно, поэтому не сказать о них нельзя.
Думаю, что неискушённому юзеру с не очень качественным файлом, результат всех инструментов покажется приемлемым. Различия между исходным качеством и оптимизированным файлом с артефактами не стоят слов, если речь идёт о старых размазанных фото в домашнем архиве. Всё сказанное ниже касается в большей степени фото-эстетов. На любительском уровне все инструменты дают вполне годный результат, значение имеет только итоговый размер файла.
JpegMini и Kraken оказались в самом низу таблицы, отсортированной по размеру итогового файла, но только эти две технологии жмут файл, полностью честно сохраняя картинку. В категории «10 баллов» JpegMini выглядит со всех сторон привлекательнее.
При совсем чуть-чуть менее приемлемой картинке, оказалось, что Compressor.io жмёт лучше маленькие файлы, а Optimizilla.com - большие, но это очень условное заключение в рамках данного теста.
Принимая во внимание соотношение размер/качество, то что находится в таблице ниже девяток, но имеет меньшие оценки при большем размере файла - практического интереса не представляет. А выше «девяток» - всего два сервиса.
Интересен оказался самый свежий сервис - ShortPixel . Артефакты очень заметны, но если сжать картинку до такого размера средствами самого формата JPG - картинка получается заметно хуже. ShortPixel ориентирован в большей степени на работу через API и относительно недорог, но очень деструктивен по отношению к изображению.
TinyJPG в виде плугина жмёт скромнее, что, наверное, сделано правильно. Он всё-равно лучше всех остальных по размеру файла, но артефакты бросаются в глаза немного меньше, чем у его же онлайн-версии.
Интересная особенность TinyJPG в виде плугина: после обработки, файл может оказаться как в 8-10 раз меньше исходного по размеру, так и в полтора-два раза больше.
Тестовую картинку №2 лучше всего сжал ShortPixel , но на большинстве файлов с большим числом мелких деталей, победителем выходит веб-версия TinyJPG . Файл получается меньше, а исходное изображение уродуется не так сильно. Однако, TinyJPG допускает файл не более 5 MB, а ShortPixel , даже в бесплатной версии, принимает файлы до 10 MB.
Ещё один важный фактор замера (кроме итогового размера файла) - удобство использования на потоке. Например, если вы озадачились оптимизацией домашнего архива в 100 Гб в первый раз - обработать его полностью при помощи онлайн-сервисов будет очень трудоёмко и долго, из-за ограничений и необходимости порционной загрузки этого объёма на сервер и обратно. При том, что, за скромные 20 USD, с JpegMini для этого потребуется одно движение мыши (буквально: нужно только перетянуть корневую папку с изображениями в окно программы).
Кстати, плугин TinyJPG для фотошопа - выполнен не в виде фильтра, а в виде канала экспорта, т.е. для создания в PS сценария автоматизации он не годится. Поправка: с сайта производителя можно скачать скрипты для автоматизации, которые работают в любой версии Фотошопа, а в Photoshop CC экспорт через плугин встаёт как операция для пакетной обработки. Плугин не имеет никаких ограничений - проверено на файле с разрешением 130Мп (время обработки - около 7 минут на достаточно мощном компьютере).
Вообще, для массовой обработки есть только два варианта - это использование API и JpegMini . За обработку через API платить придётся за каждый обработанный файл.
Выводы
- Все инструменты, позволяющие получить относительно приемлемый файл меньшего размера, чем даёт JpegMini - или визуально ухудшают в картинку и проигрывают ему в удобстве использования или имеют менее привлекательную ценовую политику - повременная или пофайловая аренда против единоразовой покупки у JpegMini .
- Для случаев, когда качество картинки имеет первостепенное значение, если уменьшение размера файла за счёт визуальных ухудшений неприемлемо - JpegMini остаётся лучшим инструментом.
- Для случаев, когда качеством исходных файлов можно немного пренебречь в угоду компрессии, есть смысл использовать обе версии TinyJPG , в зависимости от задачи.
- Если выбирать только из бесплатных компрессоров, лучше всего выглядят Compressor.io и Optimizilla.com , которые почти не портят картинку, при том, что итоговый файл получается заметно меньше, чем у JpegMini .
- Владельцам новостных сайтов с большим потоком иллюстраций, претензии к качеству которых не так остры, есть смысл обратить внимание на ShortPixel и TinyJPG . Их преимущества - демократичные тарифы, рекордное сжатие и работа через API. А если качество имеет значение (а деньги нет), то через API имеет смысл подключать Kraken или, в случае очень больших объёмов, серверную версию JpegMini .
обзор
В нынешний век мобильных технологий оптимизация картинок в форматах 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. Если есть какие-то вопросы, дополнения, пишите в комментариях, обсудим
Здравствуйте, дорогие друзья. Сегодня я расскажу как оптимизировать изображения для ускорения загрузки сайта. Но, для начала расскажу, почему ни писал почти неделю. Эту неделю я боролся с бюрократией, пытался получить новый загранпаспорт. Вы просто не представляете, что сейчас творится в паспортных столах, — это просто кошмар (очереди, давка, скандалы). Ещё хуже, чем обычно. Всё очень медленно. У меня такое ощущение, что в первый раз я получил паспорт гораздо проще и быстрей.
В общем, «плюнул» я на это. Зашёл на просторы Интернета, зарегистрировался на портале госуслуг и оформил получение данной услуги, без очередей и траты драгоценного времени.
А к чему я это всё, а к тому, что эта ситуация напоминает мне положение дел с сайтами и блогами. Медленная загрузка сайта не только раздражает, но вообще заставляет многих посетителей закрыть сайт, не дождавшись загрузки. Посетители могут даже не узнать о вашем полезном контенте, если не дождутся загрузки сайта.
И хотя сегодня практически у каждого пользователя высокоскоростной интернет и видимая загрузка сайтов не так заметна, поисковики всё же учитывают параметр «Скорость загрузки страницы» , как один из факторов ранжирования сайта. Плюс ко всему скорость загрузки положительно влияет на поведенческие факторы, что тоже не маловажно.
Безусловно, параметров, влияющих на скорость загрузки сайта, достаточно, много. И в одной статье рассмотреть всё это не возможно. Поэтому начнём с самой распространённой причины, замедляющей скорость загрузки сайта, — не оптимизированные изображения.
Где узнать о причинах медленной загрузки сайта
Сервисов для проверки скорости загрузки сайта – много. Но мы поговорим о сервисах, которые показывают причины медленной загрузки.
Я использую два сервиса:
Для начала скачиваете изображение к себе на компьютер, редактируете, и закачивает обратно по тому же адресу. В WodrPress дальше делать ничего не надо. А вот если это самописная страница, не забудьте в HTML коде указать нужные параметры ширины (width=»200″) и высоты (height=»200″). Отсутствие этих параметров влияет на скорость загрузки сайта, о чём свидетельствует параметр «Specify image dimensions» при анализе сайта в GTmetrix.
Как видно на скриншоте в моей теме не хватает параметров (16х16, 32х32) для иконок комментариев, категорий, даты и так далее.
Как указать параметры ширины и высоты изображения в теме WordPress
Итак, разберём мой пример. В моей теме не указаны размеры вот этих изображений:
Изображения без указания размера
Значит нужно найти в шаблоне место, где выводятся эти изображения. А выводятся они на главной странице и на странице материала. За главную страницу отвечает файл (index.php ), а за материал отвечает файл (single.php ).
Так вот отрываем административную панель WordPress– «Внешний вид» > «Редактор» — нужный файл. И добавляем параметры ширины и высоты, на основе предложенных размеров в отчёте GTmetrix.
Вот и всё, нет ни каких хитростей. И так по аналогии вы дорабатываете все свои изображения. Но помните при работе с исходным кодом будьте очень аккуратны, внимательно смотрите, куда прописываете параметры. Ведь достаточно затереть кавычку и ничего не получится. В общем если не уверены, делай резервные копии редактируемых файлов. Это поможет всё исправить, если сделаете ошибку.
А ещё скорей всего у вас в отчёте будет низкий показатель по параметру «Combine images using CSS sprites». Это параметр сообщает, что на сайте есть одинаковые изображения, которые можно объединить в спрайты для ускорения загрузки сайта. Но в двух словах этого не рассказать. Поэтому об этом поговорим в следующих статьях. А пока у вас есть над чем работать.
Так же посмотрите видеоурок, в нём я наглядно показываю как пользоваться сервисами и как оптимизировать изображения.
На этом у меня сегодня всё. Желаю вам удачи, друзья. Оптимизируйте свои изображения, это первый шаг на пути к быстрой загрузке сайта.
До встречи в следующих статьях.
