Insight IT

Инструменты для минимизации размера изображений

Иван Блинков — Sun, 13 Feb 2011 10:44:00 +0300

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

Мотивация

Если воспользоваться инструментами для анализа времени загрузки страницы (например Firebug или Chrome Developer Tools), то не сложно обратить внимание на тот факт, что во многих случаях существенную часть ожидания загрузки страницы проходит в процессе загрузки внешних файлов, требуемых для рендеринга страницы:

Изображения
Файлы стилей
Файлы JS-скриптов

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

Вынести на отдельный (под)домен (позволяет браузеру качать больше файлов одновременно)
Отредактировать HTML для избежания блокировок (так называемого "водопада")
Настроить HTTP-сервер на предмет правильных заголовков Expires и Etags
Воспользоваться для отдачи статики nginx или аналогом
Сменить интернет-канал у сервера или сам сервер
Воспользоваться услугами CDN (Content Delivery Network)
Уменьшить размер передаваемых файлов

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

Выбор правильного формата изображений

Первым шагом по снижению объемов изображений должен быть выбор адекватного назначению изображения формата:

JPEG - для всех фотографий
GIF - исключительно для анимации (например для крутящейся загрузки)
PNG - для всего, что не является фотографией или анимацией: иконки, графики, элементы интерфейса

GIF

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

Рецепт лежит на поверхности: конвертируйте все GIF в PNG. Проще всего это сделать с помощью ImageMagick:

# Конкретный файл
$ convert foo.gif foo.png

# Все файлы в директории
$ mogrify -format png *.gif

# Или OptiPNG:
$ optipng *.gif

Дальше все просто: работаем с этими изображениями как и с остальными PNG, о чем пойдет речь ниже.

PNG

К сожалению, многие редакторы изображений сохраняют PNG-файлы совершенно не заботясь об их размере.

Но за многие годы была разработана масса различных утилит, исправляющих данную ситуацию. Основных принципа, на которых они основываются, четыре:

Удаление лишнего: так как PNG - расширяемый формат, далеко не все данные и заголовки требуются для отображения изображения в браузере. Их можно смело выкинуть.
Изменение типа PNG: использование только оттенков серого или произвольной палитры приемлемо для многих случаев, что по сравнению с полной гаммой существенно снижает размер изображения
Использование подходящего "фильтра": они являются шагом перед сжатием изображения, правильный фильтр позволяет компрессии работать эффективнее
Оптимизация самой компрессии: использование более эффективного алгоритма

Примеры использования наиболее эффективных инструментов:

# optipng
$ optipng -o7 foo.png

# pngcrush
$ pngcrush -rem alla -brute -reduce foo.png foo.png.temp
$ mv foo.png.temp foo.png

# pngout
$ pngout foo.png

# advpng
$ advpng -z4 foo.png

JPEG

В отличии от PNG и GIF каждое сохранение JPEG файла приходят к потерям данных и, как следствие, снижению качества фотографии, без потерь могут выполняться только изменение комментариев, метаданных и повороты на 90/180/270 градусов. Основным инструментом для минимизации JPEG без потери качества является jpegtran, используется достаточно просто:

# обычный режим
$ jpegtran -copy none source.jpg > destination.jpg

# режим progressive
$ jpegtran -copy none -progressive source.jpg > destination.jpg

Прогрессивный режим заслуживает отдельного внимания:

Основная особенность - в нормальных браузерах (не IE) такой JPEG быстро отображается в низком качестве, а по мере загрузки файла полностью качество изображения улучшается (обычный JPEG грузится сверху вниз)
По объему файла этот тип JPEG начинает выигрывать у обычного начиная от размера файла в 10Кб
Изображение менее 10Кб все равно слишком маленькое, чтобы от самого процесса прогрессивной загрузки был какой-либо толк
Если хочется подробнее разобраться - читаем здесь

Заключение

Использование простых инструментов, описанных выше, позволяет сократить общий размер используемых на веб-странице изображений порой до 30%, а то и больше. Эффект, который дает этот процесс, конечно же зависит от "запущенности" ситуации, но в большинстве случаев тоже измеряется десятками процентов от общего времени загрузки страницы. Чтобы воспользоваться ими требуется всего несколько минут, что существенно меньше, чем попытки оптимизировать код или запросы к базе данных, не говоря уже о полной переработке архитектуры системы.

Если кто-то знает более эффективные приемы по уменьшению размеров изображений - прошу в комментарии. Про скрипты и стили поговорим отдельно :)

Основным источником информации послужила статья Stoyan Stefanov, которую я сильно подсократил до тех инструментов, которыми пользуюсь сам на практике, и моментов, которые считаю интересными. Желающим покопаться в этой тематике поглубже рекомендую изучить весь его блог - можно найти много интересного. Про подписку на Insight IT тоже не забываем)

it's a pic

Иван Блинков — Tue, 27 May 2008 19:35:00 +0400

Не удивлюсь, если заголовок этого поста вам не сказал ровным счетом ничего - это вполне логично. Именно эту ситуацию я и хотел бы сегодня исправить: it's a pic представляет собой... ...очередной интернет-проект. Хотели увидеть что-то более грандиозное? - читайте дальше!

Начать наверное стоит с обозначения основной сути: поисковая система изображений, ориентированная на глобальный рынок. Да-да, мы уже видели поиск картинок в исполнении Google/Yahoo!/MSN/Яндекс/Рамблер (нужное подчеркнуть) - скажете вы, так в чем же разница?

Сейчас объясню. Никогда не возникало мысли, что частенько поиск картинок в обычных поисковых системах по большей части выдает всякий бред, очень слабо коррелирующий с тем, что Вы на самом деле искали? Основная их проблема заключается в том, что способов провести ассоциацию между текстом и изображением не так-то много. Чаще всего в их распоряжении лишь HTML-документы, ссылающиеся на изображение. То есть на основании атрибута alt у тэга <img /> и изредка anchor-текста обычных ссылок, поисковая система должна составить представление о том, что же на самом деле изображено в графическом файле. Варианты ручного построения таких соответствий тоже существуют, но либо нужно платить огромнейшему количеству человек за рутинную работу (что-то на грани фантастики - количество изображений в Сети измеряется числом с слишком большим количеством нулей) или подталкивать людей заниматься этим бесплатно, оформив это, например, в виде online-игры. Обычно в таких играх двум участникам одновременно предоставляется один и тот же набор изображений, а их задачей является последовательно вводить свои ассоциации связанные с текущим изображением. Если они оба ввели одно и то же слово - оно ассоциируется с изображением, а пользователям начисляются виртуальные очки. В общем поиск изображений по ключевым словам - задача, связанная с массой проблем и неточностей.

It's a pic является как раз поисковой системой, призванной избавить людей, ищущих изображения от всех этих проблем с неточностью и некорректностью результатов. Чтобы не придумывать каких-то временных решений проблемы было решено искоренить основательно: основная идея заключается в использовании в качестве критерия поиска не набор ключевых слов, а просто изображение. Сказать, что два изображения похожи, компьютеру намного проще, чем сказать что на картинке нарисован, например, жираф - именно на это и делает ставку этот проект.

Выглядит это примерно следующим образом: допустим Вы хотите найти побольше изображений заката и выбрать наиболее приглянувшееся, для этого достаточно загрузить в систему с локального компьютера изображение заката (хотя если оно уже присутствует в Сети - можно и просто указать URL) и собственно говоря нажать кнопку "Найти" - вот и все! Вот ваши результаты:

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

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

Прозрачный рабочий стол

Иван Блинков — Sat, 19 Jan 2008 01:15:00 +0300

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

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

Правда, к сожалению, возможно это лишь на фотографиях.

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

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

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

Для подготовки этого изображения использовался opensource растровый графический редактор под названием The GIMP, а также две фотографии ноутбука с одного и того же ракурса: с открытой и закрытой крышкой. Продолжать?

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

Расположить фотографии слоями друг над другом. В верхнем слое крышка должна быть открыта.
Стереть содержимое рабочего стола (которое возможно имело смысл сделать монотонным)на верхнем слое любым известным Вам способом, начиная с банального Eraser'а, заканчивая Color to Alpha или Magic Wand'ом.
Совместить оба слоя таким образом, чтобы создалась иллюзия того, что часть нижнего слоя находится "за" экраном ноутбука.

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

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

7 способов защитить свой интернет-ресурс от нежелательной информации

Иван Блинков — Thu, 03 Jan 2008 20:41:00 +0300

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

1. Классический вариант - графическая реализация

Самым популярным вариантом реализации является "графическая" captcha (позволю себе "обращаться" к этому слову в женском роде, просто из-за того, что по-моему оно так лучше звучит, не смотря на то, что по логике все же стоило использовать "он", так как при дословном переводе получилось бы слово "тест" с кучкой прилагательных и определений). Она представляет собой изображение, содержащее чаще всего какой-либо сильно искаженный текст или набор цифр, и перед посетителем ставится задача воспроизведения в текстовом поле, находящемся неподалеку, того что он/она видит на изображении. Большинству людей не составит труда прочесть и набрать на клавиатуре даже искаженный до неузнаваемости текст, а вот для программы данная задача является как минимум нетривиальной.

Существует некоторое количество алгоритмов (называются OCR), позволяющих программе пытаться понять что же за текст расположен на изображении. Эти алгоритмы разрабатывались для вполне мирных целей - для оцифровки книг и любых других напечатанных на бумаге документов. Но все же эти алгоритмы предназначены для распознавания аккуратно написанного текста черным шрифтом на белом фоне и являются плохо приспособленными для распознавания captch'и. Но все же существует довольно большое количество модификаций этих алгоритмов, приспособленных для чтения даже искаженного текста.

Казалось бы это существование таких алгоритмов делает бессмысленным использованием такого рода "защиты", но на практике это далеко не так: большинство из них пригодны только для распознавания только узкого набора реализаций графических captch, особенно это актуально для популярных готовых решений реализации этого типа защиты находящимся в свободном доступе в сети Интернет, а также сервисов, предоставляющих услуги по генерации такого рода изображений. Что делает довольно актуальным написание собственной реализации графической captch'и для появления уверенности в отсутствии готовой модификации OCR алгоритма, для преодоления используемой преграды. Об этом и пойдет речь в записи про собственноручную реализацию технологии CAPTCHA.

Но запись еще далека от завершения, ведь описанная выше графическая реализация, не является единственной. Во-первых, стоило упомянуть пару несколько реже используемые модификации визуальных тестов:

2. Сommon sense

Эта категория модификаций основывается на вопросах построенных на так называемом common sense, то есть на каких-то общеизвестных вещах, очевидных для любого человека, но не поддающимся четкому осознаванию программой с помощью какого-либо алгоритма. К сожалению, этот факт вместе с тем порождает и основной недостаток этой категории проверок- такой тест невозможно автоматически сгенерировать, что делает реализацию существенно более трудоемкой и неэффективной, что собственно и обуславливает редкость их применения на практике.

3. Математический тест

Помимо просто перенабирания некоторого набора цифр с изображения, авторы captch'и могут попросить своего посетителя выполнить какую-либо несложную операцию (например: 2 x 2 = ???). Но такого рода тесты также далеки от идеала, так как в подавляющем большинстве алгоритм их решения прост для безобразия - вполне достаточно бывает базового OCR и реализации калькулятора внутри crawler'a, чтобы он смог преодолеть такого рода барьер.

4. Выбор изображения

Хочется также упомянуть один из достаточно оригинальных вариантов реализации, являющийся по сути вариацией на тему common sense captch'и, который меня как минимум удивил, когда я его впервые увидел на сайте одного из мобильных операторов рядом с формой для online отправки SMS. Суть его заключалось в том, что предлагался набор небольших фотографий, из которых предлагалось выбрать 2-4 изображения обладающих каким-либо свойством, например являющимися живыми объектами. Помимо позитивненького оформления и симпатичных фотографий, чисто технически такой подход является достаточно эффективным и легко реализуемым, единственное предъявляемое к такой реализации требование - достаточно обширная база данных изображений.

5. Выход за рамки стандартов

Большинство вещей, предназначенных для массового использования, принято делать по принципу "чем проще тем лучше". Обусловлено это тем, что количество пользователей обратно пропорционально уровню требований, к ним предъявляемых. Формы на интернет-страницах, как ни странно, исключением из этого принципа не являются, что является причиной их построения с использованием только базовых языков разметки - HTML, XHTML или в крайнем случае XML. Именно такую форму и ожидает увидеть spider, попадая на страницу. Но если поступиться этим принципом - легко поставить программу в тупиковое положение, задействовав какую-либо непривычную для нее технологию. В качестве примера в голову приходит Flash-ролик вместо изображения в графическом варианте реализации.

Этот способ является очень эффективным, но обладает существенными недостатками, такими как, например, необходимость использования современных браузеров с определенными plug-in'ами.

6. Скрытие разметки

В качестве продолжения предыдущей мысли: JavaScript предоставляет далеко не один способ скрыть внутри себя код разметки, что позволяет сделать вид, что формы как бы не существует (в основном базирующиеся на обратимом шифровании), заставляя программу подумать "да тут и заполнять-то нечего" и пройти мимо на какой-нибудь другой сайт. Все бы хорошо, только посетители сайта с отключенным JavaScript'ом формы тоже не увидят...

7. Звуковое воплощение

Как не трудно было заметить, что все варианты, которые я упомянул до этого момента, так или иначе базировались на визуальном восприятии информации. И вполне обосновано - для большинства людей зрение играет роль основного чувства, но существуют и интернет-ресурсы, для которых важен абсолютно каждый посетитель, в том числе и люди с ограниченными способности, для которых стандартные проверки являются непреодолимыми. Для такой категории людей были сделаны альтернативные варианты, основывающиеся на таком чувстве, как слух. Суть же от этого изменилась: посетителя просят набрать с клавиатуры нечто услышанное при воспроизведении аудио-записи, либо ответить на какой-либо вопрос, основывающийся на уже упомянутом принципе common sense и заданный тоже с помощью в аудио-файле.

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