Форум eBanners.Ru: Реклама в интернете и раскрутка сайтов - форум по интернет-рекламе
Как правильно создать favicon.ico - нужно favicon сделать оптимизированным. - Веб-дизайн, разработка сайтов и создание баннеров - интернет-реклама
У вас есть вопрос по рекламе в интернете и раскрутке сайтов? Задайте его здесь и вам ответят. Вы уже всё знаете? Помогите тем, кто знает пока не всё. Правила форума|
Сделать стартовой|Добавить в избранное.
Как правильно создать favicon.ico - нужно favicon сделать оптимизированным.
Разгоняем favicon.ico - это как?
В очередной презентации Yahoo! о клиентской производительности был поднят вопрос о favicon.ico. Они проводили несколько интересных фактов о данном явлении и давали пару советов. Процитирую их рекомендации:
Необходимое зло:
Браузер ее запросит
Лучше не отвечать 404-ошибкой
Будут отправлены cookie
Не может быть в CDN
Мешается в последовательности загрузки ресурсов
Уменьшайте ее (<=1 Кб)
Использовать анимированные иконки ни разу не хорошо
Выставляйте заголовок Expires
Инструменты: , ,
Материал для изучения: в поиске Yahoo! favicon.ico занимает 9% всех просмотров страниц (для webo.in это 7%)
Поскольку favicon.ico не является обычной картинкой при загрузке сайта (она, во-первых, запрашивается едва ли не один-единственный раз браузером при посещении сайта, во-вторых, загружается, игнорируя обычный порядок загрузки), то в дополнение к уже имеющейся информацией я захотел провести ряд дополнительных исследований и объединить все, что известно прогрессивному человечеству на данную тему. Однако, в ходе изучения материала оказалось, что проблема совсем не так прозрачна, как представлялось изначально. Формат .ico предстал в новом, весьма выгодном для использования в вебе, свете.
Краткое описание формата
favicon.ico имеет формат .ico (на самом деле, такой формат есть, а соответствующий MIME-тип прижился не везде, при этом он объединяет несколько довольно специфических типов, подробнее можно посмотреть в статье на Wikipedia). С одной стороны, он позволяет представлять информацию без потерь (в отличие от JPEG). С другой стороны, он, фактически, аналог BMP, но на этом все сравнение быстро заканчивается.
Я не буду приводить точную его спецификацию (она не так сложна, и ее можно обнаружить здесь или здесь), однако, сразу в глаза бросилось две вещи: возможность использования индексированных цветов (ага, это уже почти GIF) и возможность использования линейного сжатия (а это уже почти PNG). Все еще здесь? Тогда мы продолжаем.
Собственно, следует эта информация из следующих частей формата:
01
02
BitCount 2 bytes bits per pixel = 1, 4, 8
Compression 4 bytes Type of Compression = 0Боевое крещение
После небольших поисков удалось собрать тестовое окружение под Firefox 3, использующее base64-кодирование картинки в виде .ico. Результат можно покрутить здесь: webo.in/tests/favicon-shrink/. Удалось сделать однотонное изображение (палитра 4 бита) размером в 318 байтов (против 894 стандартных, почти 3 раза). С палитрой в 2 бита возникли трудности под Safari, поэтому здесь результат этот не привожу, однако, возможно, его также можно использовать).
Тем, кто уже собрался кидать в меня камни: столько воды из-за 576 байтов — я замечу, что, во-первых, иконку Хабра (использует, фактически, только 2 цвета) можно сжать до еще меньшего размера. Во-вторых, при использовании больших размеров (32x32, 48x48) выигрыш будет таким же в процентах. Т.е. иконки в 16Кб можно будет спокойно уменьшить раза в 3—7. И это без учета вырезание неиспользуемых фреймов в них (ведь формат позволяет создавать анимированные иконки).
К сожалению, линейное сжатие использовать не удалось (если у кого-то есть положительный практический опыт в этом — пожалуйста, поделитесь в комментариях).
Оптимальные размеры
Путем нехитрых вычислений заголовков, смещений и палитр можно вычислить некоторые цифры для размера наиболее стандартных favicon.ico. Для 32х32 и 48х48 размер файлов должен увеличиться примерно в 4 и 9 раз, соответственно.
Таблица 1. Стандартные размеры favicon.ico (16x16) Размер картинки Палитра Размер (в байтах) Пример
16x16 2 бита 198
4 бита 318 webo.in
8 бит 1406 google
24 бита 894 habrahabr
32 бита 1150 yahoo
Для динамических иконок можно смело множить размер одиночной иконки на число фреймов, ибо заголовок у всего файла всего 62 байта, основная часть — именно данные.
PNG — быть или не быть?
В Wikipedia указывается, что вместо .ico можно использовать .png как наиболее перспективный из форматов, используемых для сжатия изображения без потери качества. Что же, давайте проверим, какие браузеры у нас понимают PNG-формат при соответствующем объявлении файла в секции head страницы.
Как обычно, позади планеты всей у нас остается IE, так что данный подход нам не очень подходит. Подчеркну, что, в среднем, размер PNG-файла с иконкой не сильно меньше, чем ICO, но можно совершить дополнительные телодвижения, подключив одну иконку для всех браузеров, а вторую — только для IE. Тут уже на вкус и цвет, как известно, товарищей нет. Если вы работаете над экстремальной оптимизацией, наверное, это стоит попробовать.
А если еще и сжать?
Если мы не можем адекватно использовать нормальные форматы (PNG, GIF) для представления favicon.ico, то почему бы не использовать gzip-сжатие для ее выдачи клиентскому браузеру? Можно. И все актуальные браузеры это понимают. Как пример могу привести webo.in: иконка отдается в виде архива, как и большинство остальных файлов (HTML, например). Размер при этом составляет 225 байтов (уменьшился в 1,5 раза по сравнению с исходным).
Повторюсь, речь идет о возможностях для уменьшения favicon.ico в целом, а не абсолютных цифрах. Если у вас на сервере уже используется сжатие, просто добавьте туда image/x-icon и забудьте о ней.
data:URL нас спасет?
В качестве технологии экстремальной оптимизации можно рассмотреть возможность включения favicon.ico по протоколу data:URL, чтобы отобразить страницу в клиентском браузере после первого запроса на сервер (подразумевается, что с сервера уйдет один-единственный HTML-файл, содержащий все необходимые составляющие в себе).
Однако, для рядовых сайтов такой подход совершенно бессмысленнен, потому что будет отдавать пользователю лишние байты каждый раз. Самым логичным его применением будут рекламные страницы, которые пользователь должен увидеть только один раз.
Заключение
Одним из наиболее спорных моментов (лично для меня) в презентации Yahoo! было заявление о том, что favicon.ico «мешается» при загрузке страницы. Как можно судить по логам сервера при загрузке страницы, этот файл, действительно, запрашивается где-то в середине общего процесс загрузки, ориентировочно после CSS-файлов до фоновых изображений, поэтому его оптимизация может оказаться одним из ключевых моментов для загрузки вашего сайта в первый раз (с пустым кешем).
Также ради простого уважения к пользователям (зачем им загружать лишние 10 Кб кода, который отрисуется у них в области 16x16 пикселей?) не стоит раздувать ее размер без особой необходимости. Уважайте своих посетителей.
Замечательный онлайн-сервис favicon.ru предлагает приличный инструментарий для создания иконок (вплоть до ручного их рисования), однако, к сожалению, не учитывает возможности создания «облегченной» палитры для уменьшения размера файла.
Использованный материал
Favicon - Википедия
ICO (icon image file format) - Wikipedia
Icons in Win32
Creating Windows XP Icons
ICO file format
File Formats Collection: ICO
IconLib - Icons Unfolded
Лабораторная работа 1. Форматы изображений
P.S. хорошей новостью будет то, что ImageMagick поддерживает создание .ico с уменьшенной палитрой, поэтому его активно можно использовать для нормальной конвертации PNG/GIF-файлов в иконки (однако, выплыли проблемы с прозрачностью).
Автор: Николай Мациевский aka sunnybear
Как правильно создать favicon.ico - нужно favicon сделать оптимизированным.
Можно воспользоваться специальными сервисами в интернете для создания собственной иконки или скачать с аналогичных сайтов предлагающих уже готовые решения
Как правильно создать favicon.ico - нужно favicon сделать оптимизированным.
есть простой и удобный плагин для фотошопа, позволяющих сохранять картинки как инонки, называется icoformat.