Реактивные веб-сайты

eA?AOU ‹ 4: UIAI??‡AI ‡IEI‡?E? ‚?U?IU?

Уменьшить размер анимированного GIF можно и самостоятельно, ра-

бота нетрудная, но долгая и рутинная. Анимация в GIF устроена достаточ-

но просто: каждый последующий кадр перекрывает предыдущий, причем

размеры кадров могут быть меньше размера изображения, и в этом слу-

чае на экране будет содержимое двух кадров: текущий кадр и то, что не

было перекрыто из предыдущего.

Отсюда получается, что если в анимированном изображении есть

статичные элементы (например, задний фон), то их нужно оставить на

предыдущем кадре, перекрыв следующим лишь то, что изменилось. При-

чем если использовать прозрачность, то перекрывать можно области лю-

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

и размер файла с анимацией.

3.1.5. eA?AOU ‹ 5: IO„‰‡ GIF IU??A PNG

Очень хочется упомянуть вытекающий из предыдущего рецепта спо-

соб создания полноцветных изображений в формате GIF, тем более что

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

Самый простой принцип получения полноцветного GIF следующий:

исходное изображение разбивается на несколько кусков, так, чтобы коли-

чество цветов в каждом из них было не более 256 (проще всего — сде-

лать куски 16?16, это как раз 256 пикселей, значит, и цветов не может

быть больше). Каждый кусок вставляется в отдельный кадр, и между ни-

ми выставляется нулевая задержка. Таким образом, пользователь увидит

все кадры одновременно, и они сложатся в цельную картинку.

Рис. 3.2. Пример изображения, занимающего меньше

в полноцветном GIF, чем в PNG

———————— Page 83————————

82 РЕАКТИВНЫЕ ВЕБ-САЙТЫ

Существуют несколько программ, работающих подобным или чуть

более сложным способом. Лучшая, на наш взгляд, — платная программа

itsagif, фирмы Pedagoguery Software.

Авторы itsagif заявляют, что полноцветный GIF может выиграть у PNG

по эффективности сжатия на изображениях с количеством цветов от 300

до 1000. Это действительно так, если в изображении не встречаются эле-

менты, которые PNG умеет сжимать лучше GIF, например, градиенты.

Вот этот рисунок бабочки 756?488 пикселей содержит 1073 уникаль-

ных цвета. В файле PNG, оптимизированном программой PNGout, он занима-

ет 77,6 Кб, тогда как в полноцветном GIF — 68,4, экономия составляет 12%.

3.1.6. eAA?IA

Из рассмотренного нами материала можно сделать следующее резю-

ме. Несмотря на конкурирующий формат (PNG) GIF еще может быть поле-

зен: некоторые изображения занимают в этом формате меньше места, и

это пока единственный универсальный для всех браузеров способ полу-

чить анимированное изображение.

Однородные по горизонтали изображения сжимаются лучше, чем ос-

тальные, поэтому в зашумленные изображения имеет смысл вносить гори-

зонтальные искажения инструментом «Lossy» (Adobe Photoshop). «Lossy»

и уменьшение количества используемых цветов являются способами руч-

ной оптимизации статических изображений. В редких случаях позволяет

уменьшить размер изображения применение чересстрочного режима.

Для программной оптимизации полезны программы GIFLite и

SuperGIF, причем результат работы последней необходимо контролиро-

вать.

Анимированные изображения можно оптимизировать как вручную,

если воспользоваться неполным перекрытием кадров, так и автоматичес-

ки, при помощи уже упомянутых программ. Интересной техникой оптими-

зации, основанной на анимации с нулевыми задержками, является ис-

пользование программы itsagif фирмы Pedagoguery Software, которая поз-

воляет получать полноцветные изображения, в определенных условиях

занимающие меньше, чем PNG.

3.2. eOUEIEAE?UAI JPEG (Joint Photographic Experts Group)

Алгоритм JPEG появился в 1992 году стараниями группы Joint

Photographic Experts Group, аббревиатура которой и дала название стан-

———————— Page 84————————

3

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

дарту. Строго говоря, JPEG — это

алгоритм сжатия данных, а формат

файлов, использующий алгоритм

JPEG, называется JFIF (JPEG File

Interchange Format), но поскольку

все привыкли к аббревиатуре JPEG,

то и мы дальше будем пользоваться

именно ей.

В отличие от GIF JPEG является

форматом сжатия с потерями: это

значит, что сохраненное изображе-

ние будет отличаться от оригинала некими допустимыми потерями, часто не

заметными на глаз.