Эта часть повествования будет посвящена оптимизации анимированного изображения, а именно способу сократить объем ваших имиджей.

Очевидно, все наши предыдущие манипуляции со страничкой живо заинтересовали скотинку – то и дело она бросает на нас любопытный взгляд, словно проверяя, не надоело ли нам еще читать всю эту белиберду. ;) Так давайте и займемся этим самым глазом, раз она сама напросилась!

Для того, чтобы получить эту простую анимацию, достаточно создать два изображения головы, отличающихся только положением глаза, затем переключится в какой-нибудь графический редактор, позволяющий создавать и сохранять анимацию в нужном нам формате (на мой взгляд, Adobe ImageReady идеально подходит для этих целей) и в первом кадре подставить одно, а во втором другое изображение. Время отображения первого кадра установим равным 2 секундам, а второго – 0,5. Таким образом, большую часть времени змея будет смотреть на яблоко, и лишь изредка коситься на сторону.

Теперь попробуем оптимизировать полученное изображение.

Змея по природе своей вещь объемная, со всеми соответствующими тенями и подсветками, а значит, градиентами цвета. Градиенты лучше сохранять в формате .jpg, но в данном случае это не уместно, поскольку этот формат не поддерживает анимации (Adobe ImageReady честно сообщает, что может сохранить в этом формате только статическое изображение).

Прийдется пользоваться форматом .gif. С анимацией у него все в порядке, но вот с размером изображения… Изображение с тенями и градиентами такого же качества, как в формате .jpg, в формате .gif будет иметь в несколько раз больший объем, и потребует больше времени для загрузки. Для нашего имиджа эта разница вообщем-то не так существенна, но что делать если вам потребуется, например, анимировать маленькую деталь на полноцветной фотографии, или делать анимацию на большее число кадров?

Проблему можно легко решить, разделив нашу картинку на две основные части - изменяющуюся от кадра к кадру (например, глаз) и неподвижную (все остальное). Так, например, голова змеи во всех кадрах неподвижна и одинакова, меняется только положение глаза. Так давайте просто отделим этот глаз от головы (ну, естественно, под наркозом ;), сделаем фон для него прозрачным и выполним анимацию для двух его положений. Затем оптимизируем его, и сохраним анимацию в формате .gif.

При сохранении прозрачного изображения нужно обязательно указать в поле Matte цвет фона, на который оно будет накладываться. Это поможет вам избежать каймы вокруг изображения, после того как оно будет наложено поверх фона ячейки.

А из исходного изображения глаз удалим вообще, оставив на его месте пустое белое пятно, и сохраним это безглазое изображение в нашем любимом формате .jpg, с сохранением всех градиентов при маленьком объеме файла.

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

Для сравнения:

имидж, сохраненный в формате .gif (9.0 Кб) с потерей качества, но с сохранением минимального объема файла	и тот же анимированный .gif с нормальным качеством (18.2 Кб).

Как видите, объем увеличился вдвое.
А применение вышеописанного метода позволило мне уложиться в 7,79 Кб (файл- подложка в формате .jpg - 7.0 Кб, анимация – 790 байт). Так что – решайте сами...