Николай Мациевский - Разгони свой сайт

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

Формат составной сетевой графики ( англ. Multiple Network Graphics, MNG ) представляет собой несколько PNG-изображений, по аналогии с GIF89a. Однако MNG-формат является более сложным и не поддерживается текущими браузерами (для этого нужно использовать бесплатное расширение libmng).

Группа разработчиков Mozilla расширила текущий (для одного изображения) PNG-формат в браузере Firefox 3, добавив несколько дополнительных кадров для анимации. Существует также встречное предложение со стороны членов группы PNG, подразумевающее создание чего-то подобного; однако, не противоречащего спецификации PNG. Оба этих направления значительно проще, чем MNG, и оба открыты для голосования в группе PNG.

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

PNG работает лучше с большими однотонными областями. Чтобы увеличить степень сжатия, стоит уменьшить количество «шума» в ваших картинках для увеличения размеров однотонных областей. Уменьшайте области размывания, хотя для изображений с градиентами размывание позволяет использовать меньшую глубину цвета. Избегайте сглаживания текста для уменьшения числа цветов, которые для него необходимы, в финальном изображении.

По возможности уменьшайте число цветов в вашем исходном изображении, если в процессе разработки этот фактор можно контролировать. Стоит также избегать использования многослойных PNG-изображений для уменьшения размера файла, так как семипроходная многослойная схема может добавить от 20% до 35% к размеру PNG-файла. Наконец, можно применять специальное программное обеспечение для оптимизации PNG-изображений, которое специально разрабатывается с этой целью, например pngout или pngcrush.

convert image.gif image.png

gif2png -nstO image.gif image.png

pngcrush –qz3 –brute image.png result.png

pngcrush –qz3 –rem gAMA –brute image.png result.png

pngcrush –qz3 –rem gAMA -rem cHRM -rem iCCP -rem sRGB \

–brute image.png result.png

jpegtran -copy none -optimize -perfect image.jpg > result.jpg

В очередной презентации Yahoo! на тему клиентской производительности (часть 2) был поднят вопрос о favicon.ico. Они приводили несколько интересных фактов о данном явлении и давали пару советов. Процитируем их рекомендации.

www.mysite.ru/favicon.ico.

Необходимое зло:

браузер в любом случае ее запросит,

лучше не отвечать 404-ошибкой,

будут отправлены cookie,

не может быть в CDN,

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

Уменьшайте ее (<=1 Кб).

Не стоит использовать анимированные иконки.

Выставляйте заголовок Expires.

Запросы к favicon.ico составляют 5-10% от общего числа запросов к сайту.

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