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

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

Одним из возможных выходов из сложившейся ситуации будет использование характерных для 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 будет просто выводить картинку из внешнего файла поверх непонятного (для него) объекта.