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

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