Разгони свой сайт

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

Полезные советы

Ниже приведено несколько простых советов, как текущие изображения можно дополнительно уменьшить в размере. Можно написать простой скрипт, который перебирает директории с изображениями перед публикацией сайта и делает следующие действия (далее приведены примеры запуска утилит из командной строки для ОС Linux):

Преобразовывает GIF в PNG (и проверяет, есть ли при этом выигрыш):

convert image.gif image.png

или так

gif2png -nstO image.gif image.png

Уменьшает PNG-файлы в размере:

pngcrush –qz3 –brute image.png result.png

если при этом нужно удалить и gAMA-чанк, то:

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

если при этом хотим удалить другие чанки, отвечающие за цветовую коррекцию, то:

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

–brute image.png result.png

Уменьшает JPEG-файлы в размере (без потери качества):

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

Под Windows для уменьшения PNG-изображений можно использовать TweakPNG ( http://entropymine.com/jason/tweakpng/ ). Аналогом jpegtran является набор портированных утилит jpeg, которые можно загрузить по адресу: http://sourceforge.net/projects/gnuwin32/ .

Для отдельно взятой страницы общий размер изображений может быть уменьшен на 20–30% только благодаря следованию этим простым советам.

2.6. Разгоняем favicon.ico — это как?

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

www.mysite.ru/favicon.ico.

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

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

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

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

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

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

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

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

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

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

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

Краткое описание формата

favicon.ico имеет формат .ico (на самом деле, такой формат есть, а соответствующий MIME-тип прижился не везде; при этом он объединяет несколько довольно специфических типов; подробнее можно посмотреть в статье на Wikipedia, http://en.wikipedia.org/wiki/ICO_%28icon_image_file_format%29 ). С одной стороны, он позволяет представлять информацию без потерь (в отличие от JPEG). С другой стороны, он фактически является аналогом BMP, но на этом их сходство заканчивается.

Я не буду приводить точную его спецификацию (она не так сложна, и ее можно обнаружить, например, по следующему адресу: http://www.daubnet.com/formats/ICO.html ), однако в глаза сразу бросилось две вещи: возможность использования индексированных цветов (ага, это уже почти GIF) и возможность использования линейного сжатия (а это уже почти PNG). Интересно? Тогда мы продолжаем.

Собственно, эта информация следует из вот этих частей формата:

BitCount2 bytesbits per pixel = 1, 4, 8

Compression4 bytesType of Compression = 0

Боевое крещение

После небольших поисков удалось собрать тестовое окружение под Firefox 3, использующее base64-кодирование картинки в виде .ico. Удалось сделать однотонное изображение (палитра 4 бита) размером в 318 байтов (против 894 стандартных; меньше почти в 3 раза). С палитрой в 2 бита возникли трудности под Safari, корректный результат получить не удалось, однако, возможно, его также можно использовать.