Как оптимизировать все изображения на сайте

Последнее время «слухами земля полнится», о том, что Google, ранжируя страницы в своей поисковой выдаче, учитывает, среди прочего, скорость загрузки оных. А на скорость загрузки, безусловно влияют и изображения, имеющиеся на любом сайте. Поэтому все чаще можно услышать рекомендации о том, что изображения на сайте надо оптимизировать.

imgopt8

Оптимизировать — это значит используя специальное программное обеспечение обработать их таким образом, чтобы они занимали меньше места без потери качества (или с потерей в разумных пределах), что, безусловно, положительно отразится на скорости их загрузки. Но… Как это сделать, если сайт существует уже не первый год, и изображений на нем несколько сотен? Вот об этом и поговорим.

Итак, задача — максимально быстро и просто оптимизировать большое количество изображений. Форматы — JPEG и PNG. Вручную, конечно, не вариант — даже у меня, хотя пишу я не часто, за пару лет скопилось около 700 изображений.

Разумеется, есть инструменты, которые позволяют обработать все изображения скопом. И для начала мы ими обзаведемся — пойдем вот сюда: http://www.css-ig.net/index. Пусть вас не смущает французский язык — все что надо здесь сделать — это скачать утилиты ScriptPNG и ScriptJPG. Как ни сложно догадаться, одна из них предназначена для оптимизации изображений в формате PNG, а вторая — JPG.

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

Ваша следующая задача — загрузка папки с изображениями, скачаем ее по FTP и также поместим на рабочий стол. Если у вас WordPress, то это папка uploads. Если другая CMS — возможны варианты. Пусть вас не смущает, что внутри скачиваемой вами папки могут находится другие папки, а не сразу  изображения — это не имеет значения. Прежде чем мы начнем, давайте, на всякий случай, сделаем ее резервную копию (просто-напросто создайте на рабочем столе еще одну папку и скопируйте туда ваши изображения).

Итак, что мы должны иметь на данный момент:

imgopt

Следующим шагом мы откроем папку scriptpng, и уменьшим ее окно таким образом, чтобы оно не перекрывало нам обзор на другие папки. А затем возьмем папку с изображениями и просто-напросто перетащим ее на файл программы. Вот так:

imgopt2

Вы увидите вот такое окошко:

imgopt3

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

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

imgopt5

Как видите, в моем случае ей понадобился целый час. Теперь можете приниматься за файлы JPG. Берем ту же самую папку с нашими изображениями и перетаскиваем на файл ScriptJPG. Окошко, на этот раз, будет вот таким:

imgopt4

Я выбрал первый вариант. Получаем результат:

imgopt6

Для примера покажу, насколько мне самому удалось «ужать» изображения:

imgopt7

Довольно сильно, если задуматься. Можете также ради интереса сравнить объем обработанной папки с резервной копией. Осталось не забывать обрабатывать картинки всякий рез, прежде чем они попадут на сайт.

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

Добавить комментарий

banner