Безусловно, практически каждый блоггер использует в статьях на своем блоге хотя бы одну картинку. Без этого никуда. НО, не все блоггеры знают, что такое оптимизация изображений, а если и знают, то не всегда умеют ее правильно делать. Поэтому сегодня мы с вами поговорим о том, какие программы/сервисы можно использовать для того, что бы максимально качественно и удобно оптимизировать изображения. В конце статьи я покажу свою схему правильной оптимизации.
Оптимизация может быть - без потерь и с потерями.
Без потерь - это процесс, в результате которого картинка, в визуальном плане, ничем не отличается от исходной. С потерями - это все тот же процесс, но в результате картинка становится по качеству заметно хуже оригинала.
На некоторых блогах можно заметить переоптимизированные изображения. Конечно, они весят на порядок меньше, но везде нужен баланс, который мы и попытаемся сегодня найти.
Основные инструменты
В природе существует огромное количество инструментов, как онлайн, так и в виде отдельных программ, которые помогают удобно, быстро и максимально качественно оптимизировать изображения. Все их рассматривать абсолютно бессмысленно, поэтому рассмотрим только те, которые себя уже зарекомендовали.
1. Smush.it
Не безызвестный сервис от Yahoo, который, по словам разработчиков, оптимизируя картинки, удаляет из них ненужные байты.
Пользоваться сервисом очень просто. Переходим по ссылке и попадаем на главную страницу проекта.
Не пугайтесь того, что все на английском, нам читать ничего не надо. Переходим в кладку UPLOADER и видим всего лишь одну кнопку Select Files and Smush. Нажимаем на нее, выбираем картинку на вашем компьютере, оптимизация которой вам требуется, немного ждем и….
… появляется предложение скачать оптимизированный файл. НажимаемDownload Smushed Images и скачиваем zip архив.
2. Dynamicdrive
Отличный инструмент, который позволяет контролировать уровень сжатия. Помимо этого, сервис позволяет конвертировать один формат в другой. Но есть небольшое ограничение по размеру оптимизируемого файла - 300 кб.
Перейдя по ссылке, мы попадаем на страницу, где нам предлагается выбрать картинку, которую требуется оптимизировать, а так же настроить ряд параметров. Нажимаем на кнопку ВЫБЕРИТЕ ФАЙЛ и выбираем ее на компьютере.
Поле convert to: отвечает за конвертирование файла в другие форматы. По умолчанию стоит: оставить как есть и не конвертировать в другой формат, но можно выбрать JPG, PNG или GIF.
Show all results - показать все результаты.
После того, как файл выбран, и все параметры настроены, нажимаем optimize.
Получаем список файлов, оптимизация которых прошла в большей или меньшей степени. Уровень сжатия вы можете посмотреть в столбце расположенном слева от каждого изображения. Найдя подходяще оптимизированную картинку, нажимаете на нем правой кнопкой мыши и выбираете Сохранить картинку как.
Моя схема
Для оптимизации, в основном, я использую два инструмента Photoshop иSmush.it. Давайте я покажу вам, как происходит процесс. Для начала возьмем подопытную картинку/фотографию.
У фотошопа есть одна замечательная функция, о которой многие и не догадываются Posterize. Перейдем в images > adjustments > posterize.
Появилось окошко с ползунком. Этот ползунок регулирует цветовые области картинки. Для каждого файла ползунок имеет свое значение, поэтому определить его положение можно только опытным путем. В данном случае оптимальным значением, на мой взгляд, является значение 31. Передвигаем ползунок на значение 31 и жмем ОК.
Теперь переходим в File > Save for web. Тут все просто.
Для начала выбираем функцию 2-up - чтобы видеть оригинальную и оптимизированную картинку сразу. Затем в правом столбце выбираем подходящий формат и уровень сжатия. В данном случае самым оптимальным форматом является JPEG с качеством 44 (не увлекайтесь с понижением качества оптимизации - иначе картинка станет выглядеть непристойно). Визуально ничего не изменилось, но она стало весить не 450кб как раньше 22,4кб.
После того как вы сохраните картинку, перейдите по ссылке в Smush.it и загрузите ее для оптимизации. Как можно видеть на скриншоте ниже, мы сэкономили 1,4 кб.
Итого наше изображение вместо 455К стало весить 20,9кб. Неплохо, правда?
P.S. Спасибо за подсказку. Действительно, если убрать мета данные, то файл становится значительно легче.
Как это сделать: после того, как в фотошопе мы переходим в file > save for web и выбираем необходимые параметры, нам еще нужно выбрать в пункте metadata параметр none. Это избавит изображение от ненужных копирайтов.
