Опубликован: 16.06.2010 | Уровень: специалист | Доступ: платный
Лекция 4:

Алгоритмы уменьшения изображений

< Лекция 3 || Лекция 4: 123456 || Лекция 5 >

3.5. Средства онлайн-оптимизации

Определенный интерес представляют сайты, позволяющие произвести автоматическую оптимизацию изображений. Хотя они не дают возможности контролировать процесс, но обладают неоспоримым преимуществом: все, что вам нужно для того, чтобы ими воспользоваться, — доступ в Интернет.

К настоящему времени существуют два сервиса, которые можно рекомендовать к использованию: принадлежащий Yahoo! сервис Smush.it(http://smush.it) и punyPNG (http://punypng.com), который разрабатывает Конрад Чу. И тот и другой оптимизируют все три общепринятых формата, статичные GIF с большой вероятностью будут сконвертированы в PNG с индексированной палитрой (если такое преобразование даст выигрыш в размере).

На данный момент punyPNG оптимизирует изображения лучше, в частности, из-за применения более современных утилит для оптимизации PNG (Smush.it использует устаревший PNGcrush в режиме полного перебора) и техники, описанной в разделе 3.3.10, для удаления лишнего из полностью прозрачных областей. Впрочем, ситуация еще может измениться.

Тестовая таблица с блога "Gracepoint After Five" (http://www.gracepointafterfive.com/punypng-benchmarks) с результатами оптимизации девяти PNG-файлов обоими онлайн-сервисами и двумя популярными утилитами оптимизации PNG:

Таблица 3.5.
PunyPNG Smush.it OptiPNG ImageOptim
Ask Image 01 22% 20% 20% 20%
Ask Image 02 46% 39% 40% 2%
Ask Image 03 8% 7% 7% 7%
Ask Image 04 35% 1% 33% 34%
Blocks 58% 0% 0% 0%
Butterfly 41% 1% 1% 1%
Facebook 63% 36% 61% 61%
NASCAR 37% 28% 28% 28%
Yahoo! 17% 9% 9% 9%
Экономия: 41% (112 Kб) 14% (37 Kб) 19% (51 Kб) 20% (53 Kб)

Помимо веб-интерфейса сервисы предоставляют API. На данный момент компания Yahoo! закрыла API для публичного использования, но им все еще можно воспользоваться. API punyPNG находится в стадии закрытого бета-тестирования (и может измениться), Конрад Чу любезно согласился предоставить нам доступ к тестовой версии.

Для того чтобы произвести оптимизацию изображения через API, вам нужно разместить его где-нибудь в интернете и узнать его URL. Именно URL используется в качестве источника данных. В обоих сервисах входные данные представлены как GET-параметры, а ответ производится в формате JSON.

Smush.it

URL, на который нужно обратиться: http://smushit.eperf.vip.ac4.yahoo.com/ysmush.it/ws.php

Параметры:

  • img — URL изображения, которое нужно оптимизировать;
  • id — необязательный параметр, передается в ответ без изменений, может быть использован для любых ваших целей;
  • callback — необязательный параметр, имя функции JavaScript, которая будет вызвана (в качестве параметра ей будет передан JSON-объект).

Пример успешного запроса: http://smushit.eperf.vip.ac4.yahoo.com/ysmush.it/ws.php?img=http://www.publicdomainpictures.net/pictures/2000/nahled/1-1222847524s7rl.jpg

{
"src":"http:\/\/www.publicdomainpictures.net\/pictures\/2000\/ ?
nahled\/1-1222847524s7rl.jpg",
"src_size":50219,
"dest":"http:\/\/smushit.zenfs.com\/results\/3144140b\/smush\/ ?
pictures%2F2000%2Fnahled%2F1-1222847524s7rl.jpg",
"dest_size":49198,
"percent":"2.03"
}
Листинг 3.3.

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

Пример вызова, порождающего ошибку: http://smushit.eperf.vip.ac4.yahoo.com/ysmush.it/ws.php?img=http://bolknote.ru/imgs/2009.09.29.jpg Такой запрос вернет следующий ответ:

{
"src":"http:\/\/bolknote.ru\/imgs\/2009.09.29.jpg",
"src_size":148529,
"error":"No savings",
"dest_size":-1, "id":"test" }
Листинг 3.4.

Текст ошибки говорит о том, что Smush.it не смог оптимизировать изображение. Другими причинами возникновения ошибочной ситуации могут быть, например, слишком большое изображение (более одного мегабайта) или несуществующий адрес.

PunyPNG

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

Интересной особенностью сервиса является возможность пакетной обработки — оптимизированные изображения можно скачать единым ZIP-архивом.

URL, на который нужно обратиться: http://www.gracepointafterfive.com/punypng/api/optimize

Параметры:

  • img — URL изображения для оптимизации;
  • key — ваш ключ для доступа;
  • groupid — необязательный параметр, идентификатор группы (может быть выбран произвольно) для пакетной обработки файлов.

Пример успешного запроса: http://www.gracepointafterfive.com/punypng/api/optimize?img= J http://www.conradchu.com/images/portfolio/targets.gif J &key=XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Запрос вернет следующий ответ:

{
"original_url": "http://www.conradchu.com/images/portfolio/ ?
targets.gif",
"original_size": 35071,
"optimized_size": 27922,
"optimized_url":"http://www.gracepointafterfive.com/punypng_staging/ ?
attachments/514367d961c0c9c5ef80e02cc3381660b24d77d8/targets.gif.png",
"group_id": null,
"savings_percent": 21,
"savings_bytes": 7149
}
Листинг 3.5.

Оптимизированное изображение, как видно, доступно по адресу, указанному в поле "optimized_url". Если вы использовали пакетный режим (то есть указали параметр "group_id" в запросе), то ZIP-файл с оптимизированными изображениями можно скачать по URL http://www.gracepointafterfive.com/punypng/api/download_zip?group_id=гpynna

Ключ для скачивания архива не требуется. Пример запроса, порождающего ошибку: http://www.gracepointafterfive.com/punypng/api/optimize?img=http://libpng.org/pub/png/img_png/ pnglogo-grr.png&key= J XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Запрос вернет следующий ответ:

{
"error": "Sorry, the max file size supported is 150KB."
}
Листинг 3.6.

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

< Лекция 3 || Лекция 4: 123456 || Лекция 5 >
Ольга Артёмова
Ольга Артёмова

Доброго времени суток!

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

Сертификация: оптимизация и продвижение web-сайтов.

Ярославй Грива
Ярославй Грива
Россия, г. Санкт-Петербург
Ёдгор Латипов
Ёдгор Латипов
Таджикистан, Кургантепа