Как заставить IE6 отображать встроенные изображения в кодировке base64?
<img src="data:image/png;base64,....." />
Это работает в Firefox/Chrome/Safari, но не в IE6.
IE6: как заставить встроенные изображения base64 работать с IE6?
comment
Просто любопытно: почему вы (или кто-либо) хотите это сделать? Разве кешируемое изображение не было бы предпочтительнее для всех браузеров? Мне кажется, что во внешнем файле CSS все в порядке, но не в HTML.
- person Arjan schedule 16.10.2009
comment
Кэшируемое как в: любое изображение, которое загружается как обычно, а затем может кэшироваться браузером. Или это используется в каком-то одном файле, не размещенном HTML?
- person Arjan schedule 16.10.2009
comment
Встроенный уменьшает HTTP-запросы.
- person Jacob schedule 16.10.2009
comment
Но это делает запрос больше, предполагая, что HTML будет обновляться чаще, чем изображение, и изображение также может использоваться на других страницах?
- person Arjan schedule 16.10.2009
comment
@Jacob: Inline может уменьшить количество HTTP-запросов, но 1) вам нужно передавать больше данных, потому что кодировка увеличивает размер двоичных данных изображения, 2) современные браузеры могут загружать страницу быстрее, если изображение является отдельным ресурсом, который может быть загружаются параллельно и 3) кэширование может работать не так хорошо, особенно если ваша страница создается динамически.
- person Dirk Vollmar schedule 16.10.2009
comment
Арьян ван Бентем, иногда приложению необходимо генерировать изображение на лету. В таком случае иногда проще встроить изображение, чем создавать файл и отправлять ссылку.
- person bmb schedule 16.10.2009
comment
@divo, размер файла тот же, когда вы используете mod_deflat, который сжимает содержимое изображения.
- person Jacob schedule 16.10.2009
comment
gzip кодировка base64, которая
- person Jacob schedule 16.10.2009
comment
Если вас беспокоит HTTP-запрос, вы можете изучить спрайты для своих изображений. Тогда вам нужно будет сделать только два http-запроса для страницы и всех изображений. alistapart.com/articles/sprites Это может оказаться бесполезным в вашей ситуации, если, например, вы генерируют html и одно изображение.
- person Tim schedule 16.10.2009
comment
@bmp, правда, это хороший сценарий. Однако любое другое использование в HTML заставляет меня сомневаться.
- person Arjan schedule 16.10.2009
Ответы (8)
Мое решение работает гладко на IE6. Это может помочь вам!
<!--
Content-Type: multipart/related; boundary="=_data-uri"
-->
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
#pic {
width:670px;height:710px;
background-image: expression("url(mhtml:" + window.location + "!locoloco)");
}
</style>
</head>
<body>
<div id="pic" ></div>
<div id=test style="display: none;">
--=_data-uri
Content-Location:locoloco
Content-Transfer-Encoding:base64
iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAHElEQVQI12P4//8 /w38GIAXDIBKE0DHxgljNBAAO9TXL0Y4OHwAAAABJRU5ErkJggg==
--=_data-uri--
</div>
</body>
</html>
person
presario1216
schedule
17.05.2011
Можете ли вы объяснить, что здесь происходит? Выглядит интересно, но, например... !locoloco?
- person Chris Moschini; 22.02.2012
@Chris Здесь используется многокомпонентный HTML (см. Мой ответ ниже) — редко реализуемый метод описания нескольких ресурсов в одном HTML-файле. Поскольку файл будет иметь один URI, различным частям присваиваются заголовки «Content-Location», на которые можно ссылаться с помощью предшествующего
!, а затем добавлять к местоположению (точно так же, как # указывает заданное местоположение узла DOM в документе HTML).
- person Barney; 15.09.2012
Установить Google Chrome Frame?
Серьезно, ты не можешь. IE6 не поддерживает встроенные изображения base64.
person
Cullen Walsh
schedule
15.10.2009
Могу ли я сделать условный оператор, чтобы IE6 ссылался на фактический файл, но для всего остального отображал base64?
- person Jacob; 16.10.2009
Вам придется динамически устанавливать src с помощью javascript, что, по IMO, доставляет больше хлопот, чем оно того стоит. Загрузка изображений с сервера — это неплохо; это означает, что пользователи могут кэшировать их для загрузки нескольких страниц. Почему вы пытаетесь сделать их встроенными?
- person Cullen Walsh; 16.10.2009
Печальная часть Chrome Frame заключается в том, что корпорации не собираются его выбирать — и именно они все еще используют IE6. Таким образом, это относительно глупо и грустно одновременно. Это интересная идея, но потраченная впустую на разработчиков, а не на конечных пользователей.
- person mimetnet; 16.10.2009
Условные комментарии должны работать, но зачем тогда включать изображение base64? Оно будет больше исходного изображения, и браузеры смогут быстрее загружать отдельный файл изображения. Если вам нужен один файл, вы можете посмотреть формат файла MHTML (.mht), который работает с IE 5 и выше. Однако поддержка в других браузерах оставляет желать лучшего. См. en.wikipedia.org/wiki/MHTML.
- person Dirk Vollmar; 16.10.2009
Встроенные изображения сокращают HTTP-запросы GET. Это отлично подходит для большого количества небольших изображений.
- person Jacob; 16.10.2009
Вместо множества маленьких изображений я бы использовал спрайты.
- person Arjan; 16.10.2009
Если у вас действительно много изображений, вы можете объединить их в более крупное изображение и использовать клип CSS для отображения только той части, которая вам нужна: ‹div style=position:absolute; верх: 100 пикселей; слева: 100 пикселей; clip:rect(0px, 130px, 130px, 0px);› ‹img src=image.png width=208 height=181 alt=bla /›‹/div›
- person Dirk Vollmar; 16.10.2009
Мне также нравится играть со встроенными png, но, в конце концов, спрайты — это то, что нужно!
- person Sander Versluys; 16.10.2009
Смотрите ниже ответы, особенно сексуальное решение Дина Эдвардса - оно маленькое и выполняет свою работу - протестировано и проверено в IE6 и IE7.
- person Chris Moschini; 22.02.2012
-1, потому что рабочие решения были опубликованы, а предлагаемый обходной путь не является решением конкретной описанной технической проблемы.
- person Barney; 15.09.2012
IE6 нуждается в выражении для правильной интерпретации изображений, закодированных по основанию 64. Дин Эдвардс описывает решение здесь: http://dean.edwards.name/weblog/2005/06/base64-sexy/
Примечание: это очень уродливый хак. Во-первых, мы помещали код изображения в наш CSS; с этим решением вам нужно либо поместить презентационные данные в Javascript, либо поведенческие данные в свой CSS. Неприятно, но необходимо.
person
Barney
schedule
18.02.2011
изображения base64 отображаются в IE6 и IE7... в последнем я нашел простое решение, когда вы используете закодированные изображения в css.
"напишите два атрибута в одном классе. Используйте хаки, специфичные для браузера css"
Я собираюсь объяснить это ниже.
<div class="myClass"> </div>
<style>
.myClass{
background=url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAkAAAAHCAYAAADam2dgAAAABGdBTUEAAK/INwWK6QAAABl0RVh0U29mdHdhcmUAQWRvYmUgSW1hZ2VSZWFkeXHJZTwAAAAySURBVHjaYlSdd/4/AwQwQml0PgMTHsn/yIoYCCmEKcKrEFkRTrcxEVIAs46g7wACDACraA+g90OOjwAAAABJRU5ErkJggg%3D%3D');
/* Above property will work for all browsers*/
*background=url('give real path_to_image');
/* This will work only for ie6 and ie7 */
}
</style>
person
Makarand Mane
schedule
15.04.2013
Я думаю, что это простой способ решить проблему IE6 и IE7. Я приветствую, если у кого-то есть другое лучшее решение, чем это.
- person Makarand Mane; 15.04.2013
Если это не корпоративная настройка, я бы посоветовал вообще отказаться от поддержки IE6 и попросить людей установить Chrome Frame, если они настаивают на использовании такого устаревшего браузера.
person
Community
schedule
15.10.2009
Могу ли я сделать условный оператор, чтобы IE6 ссылался на фактический файл, но для всего остального отображал base64?
- person Jacob; 16.10.2009
Зависит от того, используете ли вы язык сценариев, такой как PHP?
- person ; 16.10.2009
Чем поможет PHP? Это должно быть выполнено на стороне клиента. Нет, только HTML
- person Jacob; 16.10.2009
Если бы вы использовали PHP или любой другой веб-язык, вы могли бы проверить строку агента пользователя и принять решение на основе этого.
- person ; 16.10.2009
@ darkassassin93: Джейкоб имеет в виду условные комментарии HTML, специфичную для IE функцию для поддержки поведения браузера в HTML. См. en.wikipedia.org/wiki/Conditional_comment.
- person Dirk Vollmar; 16.10.2009
Вы можете использовать base64 в CSS, по крайней мере. Пожалуйста, посмотрите: http://www.phpied.com/mhtml-when-you-need-data-uris-in-ie7-and-under/
Возможно, дополнительные исследования могли бы помочь использовать mhtml:// и для встроенных изображений.
person
Misha Reyzlin
schedule
25.05.2010
Это может быть быстрым решением, чтобы изображения Base64 снова отображались в IE6:
исправление изображения Base64 для Internet Explorer< /а>
*Извините за неработающую ссылку, теперь правильная!
Я думаю, что это ненавязчивый способ заставить все снова работать. Он фактически восстанавливает изображения после того, как эти поврежденные изображения (сломанный значок) уже отображаются в IE.
person
Ken Pega
schedule
25.10.2012
ОРИГИНАЛ
Я не верю, что IE6 поддерживает встроенные данные для тега <img/>. Однако вы можете попробовать другой формат, например GIF или JPG.
EDIT Учитывая тот факт, что IE потребовалась целая вечность для точной поддержки PNG (все еще спорный), можно легко сделать вывод, что PNG может не поддерживаться в качестве встроенного формата данных для тегов <img/>. С учетом сказанного перейдите к **ORIGINAL**
person
mimetnet
schedule
15.10.2009
Если IE6 не поддерживает встроенные данные, имеет ли значение формат?
- person Elias Zamaria; 16.10.2009
Возможно, mimetnet думает, что проблема в отсутствии поддержки PNG, и в этом случае могут работать GIF или JPG.
- person pavium; 16.10.2009
IE6 поддерживает PNG (но не альфа-прозрачность, хотя, кажется, есть обходные пути, см. support.microsoft.com/kb /294714)
- person Dirk Vollmar; 16.10.2009
IE поддерживает PNG с версии 4.x. (Однако использование прозрачного PNG было проблематичным.)
- person Arjan; 16.10.2009
IE6 действительно поддерживает PNG. Он просто не поддерживает 32-битный альфа-канал.
- person Jacob; 16.10.2009
