Правильная оптимизация изображений

Источник: onjee
ТОха

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

Оптимизация может быть - без потерь и с потерями.

Без потерь - это процесс, в результате которого картинка, в визуальном плане, ничем не отличается от исходной. С потерями - это все тот же процесс, но в результате картинка становится по качеству заметно хуже оригинала.

С потерями и без потерь

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

Основные инструменты

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

1. Smush.it http://www.smushit.com/ysmush.it/

Не безызвестный сервис от Yahoo, который, по словам разработчиков, оптимизируя картинки, удаляет из них ненужные байты.

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

Сервис оптимизации

Не пугайтесь того, что все на английском, нам читать ничего не надо. Переходим в кладку UPLOADER и видим всего лишь одну кнопку Select Files and Smush. Нажимаем на нее, выбираем картинку на вашем компьютере, оптимизация которой вам требуется, немного ждем и….

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

… появляется предложение скачать оптимизированный файл. НажимаемDownload Smushed Images и скачиваем zip архив.

2. Dynamicdrive http://tools.dynamicdrive.com/imageoptimizer/

Отличный инструмент, который позволяет контролировать уровень сжатия. Помимо этого, сервис позволяет конвертировать один формат в другой. Но есть небольшое ограничение по размеру оптимизируемого файла - 300 кб.

Dynamicdrive

Перейдя по ссылке, мы попадаем на страницу, где нам предлагается выбрать картинку, которую требуется оптимизировать, а так же настроить ряд параметров. Нажимаем на кнопку ВЫБЕРИТЕ ФАЙЛ и выбираем ее на компьютере.

Поле convert to: отвечает за конвертирование файла в другие форматы. По умолчанию стоит: оставить как есть и не конвертировать в другой формат, но можно выбрать JPG, PNG или GIF.

Show all results - показать все результаты.

После того, как файл выбран, и все параметры настроены, нажимаем optimize.

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

Моя схема

Для оптимизации, в основном, я использую два инструмента Photoshop иSmush.it. Давайте я покажу вам, как происходит процесс. Для начала возьмем подопытную картинку/фотографию.

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

У фотошопа есть одна замечательная функция, о которой многие и не догадываются Posterize. Перейдем в images > adjustments > posterize.

Оптимизация с Posterize

Появилось окошко с ползунком. Этот ползунок регулирует цветовые области картинки. Для каждого файла ползунок имеет свое значение, поэтому определить его положение можно только опытным путем. В данном случае оптимальным значением, на мой взгляд, является значение 31. Передвигаем ползунок на значение 31 и жмем ОК.

Теперь переходим в File > Save for web. Тут все просто.

Оптимизация Save for web

Для начала выбираем функцию 2-up - чтобы видеть оригинальную и оптимизированную картинку сразу. Затем в правом столбце выбираем подходящий формат и уровень сжатия. В данном случае самым оптимальным форматом является JPEG с качеством 44 (не увлекайтесь с понижением качества оптимизации - иначе картинка станет выглядеть непристойно). Визуально ничего не изменилось, но она стало весить не 450кб как раньше 22,4кб.

После того как вы сохраните картинку, перейдите по ссылке в Smush.it и загрузите ее для оптимизации. Как можно видеть на скриншоте ниже, мы сэкономили 1,4 кб.

Оптимизация Smush.it

Итого наше изображение вместо 455К стало весить 20,9кб. Неплохо, правда?

P.S. Спасибо andi за подсказку. Действительно, если убрать мета данные, то файл становится значительно легче.

Как это сделать: после того, как в фотошопе мы переходим в file > save for web и выбираем необходимые параметры, нам еще нужно выбрать в пункте metadata параметр none. Это избавит изображение от ненужных копирайтов.

Удаление мета данных


Страница сайта http://test.interface.ru
Оригинал находится по адресу http://test.interface.ru/home.asp?artId=30640