Дополнительные соображения по оптимизации

Одним из возможных выходов из сложившейся ситуации будет использование характерных для IE CSS‑хаков, чтобы только для него подключить фоновые изображения. В итоге вышеприведенный пример будет выглядеть примерно так:

ul {

list‑style: none;

}

ul li {

margin: 0 0 1px;

background: url(data:image/gif;base64,<?php

echo base64_encode(file_get_contents("../images/flag.png "))

?>) top left no‑repeat;

height: 14px;

text‑indent: 10px;

}

* html ul li {

background‑image: url(/images/flag.png);

}

*+html ul li {

background‑image: url(/images/flag.png);

}

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

Для включения небольших графиков прямо в HTML‑код прекрасно подойдут условные комментарии, когда для ряда браузеров изображение выводится в base64, а для остальных (например, для IE) подключается через условные комментарии. Например, так:

<!‑‑[if !IE]>‑‑>

<img src="data:image/png;base64,..." alt="График" title="График"/>

<!‑‑<![endif]‑‑>

<!‑‑[if IE]>

<img src="chart.png" alt="График" title="График"/>

<![endif]‑‑>

Если использовать связку «относительное позиционирование родителя – абсолютное позиционирование дочернего элемента», то IE будет просто выводить картинку из внешнего файла поверх непонятного (для него) объекта.

Кроссбраузерное использование data:URI

IE (до версии 7 включительно) не поддерживает протокол data:URI, а вместе с ним base64‑кодирование внешних файлов и включение их прямо в тело необходимого документа (будь то HTML или CSS/JavaScript‑файл). Однако если рассмотреть использование протокола mhtml (который, конечно же, аккуратно поддерживается только в IE), многое становится более ясным, и base64‑кодирование удается применять в полной мере.

О, этот странный Microsoft!

В IE существует альтернативное решение для вставки изображений прямо в текстовый документ в виде mhtml‑включений. Давайте остановимся на его практической реализации для CSS‑файлов (в данном случае это файл main.css):

/*

Content‑Type: multipart/related; boundary="_"

‑‑_

Content‑Location: 1

Content‑Transfer‑Encoding: base64

iVBOR..

*/

Далее в CSS‑файле нужно лишь вызвать эту картинку следующим образом:

ul li {

background‑image:url(mhtml:http://site.ru/main.css?20080531!1);

}

Здесь в адресе картинки идет протокол mhtml (который поддерживается исключительно в IE, но это не так важно), далее полный URL до CSS‑файла (который содержит эту картинку), в данном случае этот URL еще и содержит GET‑параметр для соответствующего кэширования. И небольшая тонкость применения данного формата: необходимо в URL использовать ту же строку, что и в HTML‑файле, в котором подключается данный CSS, иначе IE запросит CSS‑файл дважды: первый раз как таблицу стилей, второй раз – как хранилище картинки. Далее после восклицательного знака (!) идет тот идентификатор, который мы назначили картинке в Content‑Location. И все.