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

Здравствуйте уважаемые начинающие оптимизаторы. Продолжим тему Работа с изображениями.

В этой статье узнаем про более продвинутый способ облегчения картинок.

Более продвинутый — это графический редактор GIMP. Именно его рекомендует Google для оптимизации изображений.

И эта рекомендация не безосновательна.

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

Помимо базовой оптимизации, выполняемой редактором GIMP при загрузке изображения, и составляющей 10 порядков ±, можно применить дополнительные опции, и ещё облегчить картинку вручную.

При этом, все изменения, происходящие с изображением, а так же с его весом, наглядно показываются в окне редактора.

Скачать редактор лучше с его официального сайта download.gimp.org.

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

На данный момент GIMP уже предлагает версию 2.10, но у неё другой интерфейс, она в три раза тяжелее, и я не знаю, установятся ли на неё нужные плагины.

Нажимаем на выбранный софт, и загружаем его на свой компьютер.

Я пользуюсь 2.8.14.

Установка стандартная, но есть некоторые нюансы.

Сперва как обычно: Окно учёта — Да, выбор языка Русский — ОК, а вот потом в окне мастера установки, выбираем не Установить, а Настроить.

Затем Лицензионное соглашение — Далее, Папка установки — Далее, и вот окно Выбор компонентов. В нём обязательно должна стоять галочка в чекбоксе Поддержка 32-битных плагинов.

Если стоит — хорошо, если нет, то ставим.

Во всех последующих окнах нажимаем Далее, до окна Всё готово к установке, где и нажимаем Установить.

Происходит установка

После, в окне Мастера, нажимаем Завершить, и фотошоп установлен.

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

Получить его можно совершенно бесплатно, просто скачав его с моего Яндекс. Диска по этой ссылке.

Скачав Zip c плагином, определим, куда его установить. Запускаем редактор из меню «Пуск».

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

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

В верхней панели инструментов выбираем: Правка > Параметры > Каталоги. Открываем каталоги, нажав на крестик, и выбираем «Расширения», в более поздних версиях «Плагины».

В правом окне будет показана папка, в которую нужно установить плагин.

Копируем в Загрузках Zip с плагином, идём в указанную папку на нашем компьютере (C:\Program Files\Gimp2\lib\gimp\2.0\plug-ins ), вставляем, и распаковываем (Zip потом можно удалить).

Распаковать необходимо именно в папку plug-ins, хотя распаковщик может предложить создать отдельную директорию.

Тогда открываем Обзор находим в нём именно папку plug-ins и нажимаем ОК или Выбор папки. Затем Извлечь.

После извлечения, в каталоге плагинов, в папке plug-ins, должно появиться приложение webexport

Плагин установлен. Теперь закрываем всё и перезагружаем компьютер.

Затем открываем GIMP из меню Пуск.

Следующий шаг — Файл > Открыть.

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

Выбираем изображение, оно появляется в окне редактора, и снова: Файл.

После загрузки изображения активизировалась опция Save-for-web. Это и есть плагин.

Выбираем, и открывается окно оптимизации. Первым делом смотрим в низ окна. Там показан вес оптимизированного изображения.

Эта картинка, изначально весила 1100 kB, теперь, как видите, осталось 102 kB.

Вот теперь можно попробовать сделать что-то вручную. Для этого, в левом поле, есть несколько инструментов.

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

Хотя нет, про один всё же расскажу, а то Вы его не заметите из-за мелкости исполнения. Это маленький синий квадратик с плюсом.

Супер классная опция. Открыв её Вы увидите две строки Width и Height, в которых можно изменять размер изображения, не обрезать, а именно уменьшать.

Фишка в том, что вместе с размером изменяется и вес картинки, только нужно следить за качеством изображения.

Затем можно вернуться обратно, поиграть с ползунками и посмотреть, как меняется качество картинки и её вес.

Можно обрезать, просто сдвинув границы к центру, и ещё уменьшить значение внизу окна.

В общем — полёт для творчества.

Что меня ещё приятно удивило, это то, что многие картинки, оптимизированные до этого в Image Optimizer, в GIMP удалось ещё немного облегчить, без потери качества, особенно формат PNG.

Так что берите, осваивайте GIMP, ускоряйте загрузку сайта, и занимайте высокие места в поиске, на зависть конкурентам.

В следующей статье научимся делать фирменную надпись на изображении.

Желаю творческих успехов.

Перемена

Сара вернулась с базара
-Ох Мойша, мне там такого наговорили!!! Последними словами обзывали.
-Сколько раз тебе говорить — не ходи туда, где тебя все знают.

Негр сидит на лавочке, и читает еврейскую газету.
Мимо проходит еврей
-Хм! Ему ещё мало, что он негр!

Файл robots.txt для WordPress < < < В раздел > > > Как сделать надпись на картинке