Софт

встроенное изображение 1

Рейтинг: 4.1/5.0 (668 проголосовавших)

Категория: Windows

Описание

Base64 изображения в HTML - Блог разработчика

Base64 изображения в HTML

<img
src="data:image/gif;base64,R0lGODlhUAAPAKIAAAsLav///88PD9WqsYmApmZmZtZfYmdakyH5BAQUAP8ALAAAAABQAA8AAAPb
WLrc/jDKSVe4OOvNu/9gqARDSRBHegyGMahqO4R0bQcjIQ8E4BMCQc930JluyGRmdAAcdiigMLVr
ApTYWy5FKM1IQe+Mp+L4rphz+qIOBAUYeCY4p2tGrJZeH9y79mZsawFoaIRxF3JyiYxuHiMGb5KT
kpFvZj4ZbYeCiXaOiKBwnxh4fnt9e3ktgZyHhrChinONs3cFAShFF2JhvCZlG5uchYNun5eedRxM
AF15XEFRXgZWWdciuM8GCmdSQ84lLQfY5R14wDB5Lyon4ubwS7jx9NcV9/j5+g4JADs=
" />

copy {
background. url ( data. image /png ; base64.
iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAABGdBTUEAAK/INwWK6QAAABl0RVh0U29mdHdhcmUAQWRvYmUgSW1hZ2VSZWFkeXHJZTwAAAIp
. truncated again for readability.
Vv7atFglaFIu5KLuPxeX/xsp7aR6AAAAAElFTkSuQmCC
) ;
}

Internet explorer не поддерживает распаковку base64, у нас есть несколько вариантов решения проблемы.
Можно реализовать распаковку с помощью внешнего php скрипта который на входе имеет base64 последовательность,
на выходе - распакованные данные.

img { behavior. expression ( ( this .runtimeStyle .behavior = "none" )
&& ( / ^ data. *; base64/i.test ( this.src ) ) && ( this.src = "/my/base64.php?" + this .src .slice ( 5 ) ) ) }

Либо воспользоваться js решением и распаковывать данные браузером (например http://www.webtoolkit.info/javascript-base64.html)

Создаем base64-кодированое изображение на PHP.

<?php
$file = "icon.gif" ;
if ( $fp = fopen ( $file. "rb". 0 ) )
{
$picture = fread ( $fp. filesize ( $file ) ) ;
fclose ( $fp ) ;
// base64 encode the binary data, then break it
// into chunks according to RFC 2045 semantics
$base64 = chunk_split ( base64_encode ( $picture ) ) ;
$tag = '<img '. "n".
'src="data:image/gif;base64,'. $base64.
'" />' ;
echo $tag ;
}

Источник 1: http://dean.edwards.name/weblog/2005/06/base64-sexy/
Источник 2: http://www.sweeting.org/mark/blog/2005/07/12/base64-encoded-images-embedded-in-html

@author: surg30n
@date: Четверг, 27 Март 2008

Комментарии пользователей Комментарии. 7

Гость 00:03 25 Сентябрь, 2012 для ie - mhtml

Гость 15:52 16 Июль, 2012 Такой изврат нужен для того, чтобы сделать в мобильном приложении список заведений например, с картинками, если список подгружается по мере пролистывания и картинки вставлены в виде внешних ссылок, то у вас будет огромная очередь загрузок, а мобилка поддерживает только 7 одновременных, по этой причине могут начаться дикие тормоза, а если инфа о заведениях приходит в виде строки и тут же вставляется, то и запросов становится ровно в два раза меньше.

Гость 15:13 16 Июль, 2012 в письмах можно отправлять картинки без внешнего url

Гость 17:47 14 Октябрь, 2011 php зло

Гость 23:39 22 Июль, 2011 А зачем такой изврат, не могли бы объяснить?

встроенное изображение 1:

  • скачать
  • скачать
  • Другие статьи, обзоры программ, новости

    Противодействие встроенных в изображение цифровых водяных знаков JPEG-сжатию

    Противодействие встроенных в изображение цифровых водяных знаков JPEG-сжатию

    Батура Владимир Александрович,

    аспирант Санкт-Петербургского государственного университета информационных технологий, механики и оптики.

    Научный руководитель – доктор технических наук, профессор

    Тропченко Александр Ювенальевич.

    С развитием информационных технологий проблема защиты информации от незаконного распространения и модификации стала еще более актуальной. На сегодняшний день одним из самых эффективных средств защиты информации является цифровая стеганография и, в частности, одно из ее направлений – цифровое маркирование. Цифровое маркирования заключается во внедрении в объект защиты (контейнер) невидимой цифровой метки – цифрового водяного знака (ЦВЗ) [Грибунин В. Г.]. В качестве контейнеров наиболее часто выступают неподвижные изображения, аудио и видеоинформация. В данной статье в качестве контейнера выбраны неподвижные изображения ввиду их распространённости, практической необходимости защиты авторских прав и большого количества исследований в данном направлении цифровой стеганографии.

    Система цифрового маркирования должна удовлетворять ряду требования [Конахович Г. Ф.]. Например, система цифрового маркирования должна встраивать ЦВЗ достаточно большого объёма, при этом сам цифровой водяной знак должен быть невидимым и стойким к атакам различного типа.

    На сегодняшний день существует большое количество атак, направленных против систем цифрового маркирования [Petitcolas F.], среди которых одной из самых распространённых является JPEG-сжатие.

    В данной работе рассмотрены основные положения, которые необходимо учитывать при разработке алгоритмов цифрового маркирования, стойких к JPEG-сжатию, а также приведены примеры некоторых современных методов встраивания ЦВЗ, устойчивых к JPEG-сжатию.

    1. Общие сведения о JPEG-сжатии

    JPEG – один из самых распространённых на сегодняшний день форматов сжатия изображений. Кратко рассмотрим процесс JPEG-сжатия, схема которого представлена на рисунке 1 [Тропченко А. Ю.].

    "ООО "Тканный ряд""

    Raslov w15012800789 ткань кашемир для пальто купить "ООО "Тканный ряд"".

    Рис.1. Основные этапы процедуры сжатия по стандарту JPEG.

    Главным операциям предшествует преобразование RGB-схемы изображения в схему YUV с ее последующей дискретизацией. Затем изображение разбивается на блоки размером 8x8 пикселов. Каждый блок подвергается ДКП, осуществляющемуся по формуле 1.

    В результате получается набор матриц коэффициентов ДКП, каждую из которых составляет низкочастотный коэффициент DC (нулевой коэффициент матрицы) и высокочастотные коэффициенты AC [Грибунин В. Г.]. Каждая матрица коэффициентов подвергается квантованию при помощи заранее заданной таблицы квантования. На данном этапе происходит наибольшая потеря информации. При этом большое количество высокочастотных коэффициентов подвергается обнулению. Затем применяется зиг-заг преобразование (рисунок 2 [Тропченко А. Ю.]), в результате которого получается вектор, состоящий из квантованных коэффициентов преобразования, с наличием длинных последовательностей нулевых коэффициентов, что позволяет эффективно применить на следующем этапе алгоритмы сжатия без потерь. После данной операции последовательно выполняются RLE-сжатие и сжатие по Хаффману.

    Рис. 2. Диагональное «зиг-заг» сканирование спектральных компонент.

    Восстановление изображение осуществляется при помощи тех же операций, но осуществляемых в обратном порядке. При этом вместо прямого ДКП используется обратное ДКП, формула которого представлена ниже:

    Таков общий принцип работы JPEG-сжатия. С точки зрения стеганографии JPEG-сжатие относится к типу атак, направленных на удаление ЦВЗ из стеганоконтейнера. Данная атака значительно уменьшает возможный объём встраиваемого ЦВЗ, особенно для гладких областей изображения, коэффициенты преобразования которых могут быть «обнулены» без заметного снижения качества восстановленного изображения [ Грибунин В. Г. ].

    2. Выбор типа метода цифрового маркирования, устойчивого к JPEG-сжатию

    Среди методов цифрового маркирования, большей устойчивостью к сжатию обладают частотные методы. Частотные методы встраивают ЦВЗ в частотную область изображения, используя ортогональные преобразования для декомпозиции изображения-контейнера [ Конахович Г. Ф. ] и перераспределения его энергии [ Грибунин В. Г. ]. В качестве преобразования могут быть использованы дискретное косинусное преобразование (ДКП), дискретное вейвлет-преобразование, преобразование Фурье, дискретное преобразование Адамара и др.

    При разработке частотных методов цифрового маркирования для улучшения противодействия атакам сжатия необходимо учитывать особенности алгоритмов сжатия [ Грибунин В. Г. ]. Как было упомянуто в предыдущем разделе, алгоритм JPEG использует дискретное косинусное преобразование изображения. Поэтому при разработке метода цифрового маркирования, устойчивого к JPEG-сжатию желательно также использовать ДКП.

    В случае цифрового маркирования монохромного изображения, преобразованию подвергается весь контейнер. В случае цветного изображения – только синяя составляющая (B) при цветовой модели RGB или только яркостная составляющая (Y) при цветовой модели YUV.

    При встраивании ЦВЗ в контейнер необходимо правильно выбрать частотную область внедрения. Алгоритм сжатия JPEG уничтожает информацию в высокочастотных областях изображения. Следовательно, встраивание ЦЗВ желательно осуществлять в среднечастотные и низкочастотные области преобразования изображения-контейнера [ Грибунин В. Г. Elshoura S. M.]. При этом стоит учитывать, что более высокий уровень сжатия может привести к обнулению и среднечастотных коэффициентов.

    Наибольшую сложность представляет внедрение ЦВЗ в низкочастотную область, содержащую большую часть энергии изображения, потому что неоптимальное внедрение может привести к значительному искажению контейнера. Данная сложность является одновременно и преимуществом, поскольку любая попытка злоумышленника извлечь ЦВЗ из низкочастотной области также приведёт к значительному искажению изображения. Таким образом, при встраивании ЦВЗ в частотную область изображения необходимо соблюдение компромисса между объемом встраиваемого ЦВЗ и качеством стеганоконтейнера [Elshoura S. M.].

    Существуют различные методы анализа стойкости стеганографических алгоритмов. При проверке стойкости алгоритма цифрового маркирования к конкретной атаке предпочтительно отказаться от универсальных алгоритмов стеганоанализа в пользу методов, учитывающих особенности конкретного возмущающего воздействия, в данном случае – JPEG-сжатия. Так в работе [Кобозева А.А] был разработан новый метод оценки устойчивости алгоритмов цифрового маркирования к атаке сжатия, основанный на применении сингулярного разложения матрицы контейнера. Метод заключается в следующем [Кобозева А.А]:

    1. Для обеспечения устойчивости стеганографического алгоритма к сжатию с одновременным обеспечением большой вероятности надежности восприятия формируемого стеганографического сообщения достаточно производить погружение дополнительной информации таким образом, чтобы формальным результатом стеганографического преобразования было возмущение второго (и возможно третьего) по значению сингулярного числа в сингулярных спектрах блоков матрицы контейнера, полученных после ее стандартного разбиения. Если же стеганографическое преобразование формально выразится в возмущении средних и наименьших по значению сингулярных чисел, то (при большой вероятности обеспечения надежности восприятия стеганографического сообщения) такой стеганографический алгоритм окажется неустойчивым к сжатию.

    2. При сравнении потенциальной устойчивости различных стеганографических алгоритмов к возможной атаке сжатием предпочтение следует отдать тому, который в ходе стеганографического преобразования более остальных стеганографических алгоритмов возмутит максимальные сингулярные числа.

    Рассмотрим некоторые примеры современных методов цифрового маркирования, устойчивых к JPEG-сжатию, использующих различные подходы для встраивания ЦВЗ.

    3. Современные алгоритмы цифрового маркирования, основанные на применении ДКП

    С момента первого применения ДКП для сокрытия информации [ Koch E. ] прошло достаточно много времени. За эти годы было разработано много алгоритмов различной степени эффективности. Они применяют разнобразные способы вспомогательной защиты ЦВЗ, например, кодирование Боуза — Чоудхури — Хоквингема. Основываясь на ДКП, методы используют разные подходы для встраивания ЦВЗ. Кратко рассмотрим некоторые эффективные методы цифрового маркирования, стойкие к JPEG-сжатию, уделив основное внимание самому процессу внедрения ЦВЗ.

    Данная схема [Fu Y.] использует в качестве контейнера цветное изображение и не требует оригинального изображения для извлечения ЦВЗ (т.е. является слепой). ЦВЗ предварительно подвергается помехозащищенному кодированию БЧХ.

    Для встраивания ЦВЗ метод использует отношения между четырьмя различными низкочастотными коэффициентами из различных блоков. Позиция встраивания ЦВЗ используется в качестве секретного ключа. Для увеличения стойкости каждый бит ЦВЗ встраивается в блок несколько раз.

    Процесс внедрения состоит из нескольких этапов. На первом этапе происходит разбиение на блоки размером 8x8 синего канала изображения, к изменениям которого наименее чувствителен человеческий глаз, с последующим применением на них ДКП. Затем случайным образом выбирается один из четырех заранее выбранных близ лежащих низкочастотных коэффициентов (B1, B2, B3, B4), например B1. После этого по формуле 3 осуществляется вычисление параметра avg.

    avg = (B2(i, j) + B3(i, j) + B4(i, j))/3 (3)

    Используя параметр avg и силу внедрения α осуществляется внедрение битов ЦВЗ в соответствии с формулой 4.

    где k – число бит в блоке БЧХ, l – положение бита в блоке.

    По формуле 5 осуществляется постобработка всех изменённых коэффициентов.

    где d – параметр силы встраивания.

    На последнем этапе встраивания выполняется обратное ДКП. После которого для получения стеганоконтейнера выполняется объединение синего, красного и зелёного каналов изображения.

    Процесс извлечения аналогичен процессу внедрения. После применения ДКП на синем канале стеганоконтейнера, используя ключ в каждом блоке выбираются четыре низкочастотных коэффициента. По формуле 3 вычисляется параметр avg. Каждый бит ЦВЗ определяется по формуле 6.

    Алгоритм является относительно стойким к атаке JPEG-сжатия. Водяной знак извлекается из стеганоконтейнера без изменений при снижении фактора качества изображения от 100 до 80. Качество ЦВЗ остается приемлемым до уровня фактора качества, равного 40.

    Метод [ Lin S.D ] осуществляет внедрение ЦВЗ путём настройки низкочастотных коэффициентов ДКП, в соответствии с концепцией математического остатка. Перед встраиванием ЦВЗ подвергается предварительной обработке. Так для увеличения безопасности и стойкости он подвергается торической перестановке автоморфизма для распределения водяного знака случайно и в равной степени. Кроме того, в отличие от предыдущего метода, осуществляется перевод изображения-контейнера из цветовой модели RGB в YUV для дальнейшего встраивания ЦВЗ в яркостную компоненту (Y) изображения.

    Яркостная компонента делится на ряд неперекрывающихся блоков размером 8x8, каждый из которых подвергается ДКП. Для увеличения стойкости к JPEG-сжатию каждый трансформированный блок подвергается квантованию при помощи стандартной таблицы квантования, использующейся при JPEG-сжатии.

    На рисунке 3 [ Lin S.D ] серым цветом отображено положение низкочастотных коэффициентов, используемых для встраивания ЦВЗ. Выбранные коэффициенты с точки зрения разработчика наиболее оптимальны для данной схемы, поскольку модификация коэффициентов C(0,1), C(1,0) и C(1,1) приведет к сильной деградации изображения. Модификация коэффициентов C(0,3), C(1,2), C(2,1) и C(3,0) при их использовании в данном алгоритме сделает ЦВЗ уязвимым к статистическим методам обнаружения.

    Рис. 3. Положение модифицируемых коэффициентов ДКП.

    Перед непосредственным внедрением выполняется вычисление дополнительных параметров: математического остатка (r), математического частного (q) и знака (sign), по формулам 7, 8 и 9 соответственно.

    где М – модуль, С – выбранный коэффициент.

    Выбранный низкочастотный коэффициент C подвергается замене на один из двух кандидатов: Clow Chigh в соответствие с приведёнными ниже правилами:

    если бит ЦВЗ равен 0:

    Clow = sign × (q × M + r’)

    Chigh = sign × ((q + 1) × M + r’)

    если бит ЦВЗ равен 1:

    Clow = sign × ((q – 1) × M + r’)

    Chigh = sign × (q × M + r’)

    На последних этапах выполняется обратное ДКП, взвешенная коррекция изображения и перевод стеганоконтейнера в цветовую модель RGB.

    Процесс извлечения достаточно прост и не требует исходного изображения. В качестве необходимых параметров используется положение коэффициентов ДКП, в которые были встроены биты ЦВЗ, значение модуля М и параметры торической перестановки для реконструкции ЦВЗ.

    Как и в процессе внедрения стеганоконтейнер из цветовой модели RGB преобразуется в цветовую модель YUV с последующим применением ДКП на яркостной составляющей. Извлечение бита (b) ЦВЗ осуществляется согласно формуле 10.

    Весь процесс извлечения ЦВЗ завершается торической перестановкой автоморфизма полученных битов ЦВЗ.

    Метод является простым в реализации и устойчивым к JPEG-сжатию достаточно высокого уровня.

    Проблема устойчивости алгоритмов цифрового маркирования к JPEG-сжатию все еще остается актуальной задачей. Для встраивания информации, устойчивой к JPEG-сжатию, предпочтительно использование дискретного косинусного преобразования, что обусловлено особенностями самого алгоритма сжатия. Для устойчивости алгоритма цифрового маркирования к JPEG-сжатию высокого уровня встраивание ЦВЗ необходимо осуществлять путем модификации именно низкочастотных коэффициентов ДКП. Для тестирования устойчивости алгоритма к атаке сжатием желательно использовать методы, ориентированные на данную атаку, учитывающие её особенности.

    1. Грибунин В.Г. Цифровая стеганография / В.Г.Грибунин, И.Н.Оков, В.И.Туринцев. – М. СОЛОН-Пресс, 2002. – 272с.

    2. Конахович Г.Ф. Компьютерная стеганография. Теория и практика / Г.Ф.Конахович, А.Ю.Пузыренко. – К. «МК-Пресс», 2006. – 288 с.

    3. Кобозева А.А. Проблема обеспечения устойчивости стеганографического алгоритма к атаке сжатием // IНФОРМАТИКА ТА МАТЕМАТИЧНИI МЕТОДИ В МОДЕЛИРОВАННI. – 2012. Том 2. № 1.

    4. Тропченко А.Ю. Методы вторичной обработки изображений и распознавание объектов. Учебное пособие. – СПб: СПбГУ ИТМО, 2012. – 52 с.

    5. Elshoura, S.M. A secure high capacity full-gray-scale-level multi-image information hiding and secret image authentication scheme via Tchebichef moments / S.M. Elshoura, D.B. Megherbi // Signal Processing: Image Communication. – 2013. – Vol. 28. – P. 531–552.

    6. Fu, Y. Robust oblivious image watermarking scheme based on coefficient relation / Y. Fu // Optik. – 2013. – Vol. 124. – P. 517–521.

    7. Koch, E. Towards Robust and Hidden Image Copyright Labeling / Koch E. Zhao J. // IEEE Workshop on Nonlinear Signal and Image Processing. – 1995. – P. 123-132.

    8. Lin, S.D. Improving the robustness of DCT-based image watermarking against JPEG compression / S.D. Lin, S.-C. Shie, J.Y. Guo // Computer Standards & Interfaces. – 2010. – Vol. 32. – P. 54–60.

    9. Petitcolas, F. Attacks on Copyright Marking Systems / Petitcolas F. Anderson R. Kuhn M // Lecture Notes in Computer Science. – 1998. – P. 218-238.

    Поступила в редакцию 02.09.2013 г.

    Встроенное изображение 1

    4.1. Встраивание изображений

    Начнем с добавления изображения, потому что это самый простой для добавления и самый распространенный мультимедийный элемент, встречающийся в Интернете. У изображений много плюсов: статичность, небольшие размеры файлов (относительно других типов мультимедиа-содержимого), широкая область применения. Сейчас трудно представить сайт без картинок. Дизайнеры научились использовать их очень разумно. Современные скорости соединений позволяют размещать большое количество графики на странице. Однако нужно знать меру, сайт не должен выглядеть пустым, но в то же время не стоит и злоупотреблять рисунками. Грамотное и уместное использование изображений поможет сделать сайт красивым, интересным и удобным. Бывают ситуации, когда без большого количества картинок невозможно обойтись, например при создании галереи, фотоальбома, каталога. В таких случаях умелое распределение файлов по сайту и удобная навигация помогут сэкономить время загрузки и трафик. Получается, что при создании сайта без изображений вам не обойтись, этот объект является самым простым, удобным и распространенным.

    Для встраивания изображений в HTML-документ применяется элемент IMG. Он имеет обязательный атрибут src, значением которого должен быть адрес встраиваемого изображения.

    Простейший вариант записи для включения картинки: <IMG src="http://velib.com/read_book/kvint_igor/html_xhtml_i_css_na_100/glava_4_dobavlenie_izobrazhenijj_i_multimedia/41_vstraivanie_izobrazhenijj/image.jpg">. При такой записи размер картинки на экране будет соответствовать ее реальному размеру.

    Примечание Адрес изображения может быть указан либо полностью (например, когда картинка находится на другом сервере (http://www.mypage.ru/IMG/myfoto.jpg )), либо относительно местоположения вашего документа (например, если картинка находится во вложенной папке (IMG/myfoto.jpg)). Во втором случае для указания директории, находящейся выше в иерархии каталогов, используются символы../ (переход из папки DOC, находящейся в одном каталоге с папкой IMG, будет выглядеть так. /IMG/myfoto.jpg).

    В листинге 4.1 продемонстрирован простейший вариант встраивания картинки.

    Простое встраивание изображения в документ

    На рис. 4.1 показан результат обработки браузером кода из листинга 4.1 – простое встраивание картинки, без редактирования.

    Рис. 4.1. Вставка изображения

    Рисунок на странице отображается в реальном размере. Это простейший вариант вставки картинки, его можно использовать, когда нет необходимости ни в какой трансформации рисунка, например, если рисунок будет единственным элементом на странице.

    Один рисунок на странице встречается нечасто, обычно на странице, помимо рисунка, присутствуют другие объекты, и большие размеры картинки становятся проблемой, но ничего страшного – размеры изображения можно легко подкорректировать.

    Внедрение картинки в таблицу стилей или код страницы

    У Вас в браузере заблокирован JavaScript. Разрешите JavaScript для работы сайта!

    Внедрение картинки в таблицу стилей или код страницы

    С помощью этого сервиса Вы можете избавиться от длительной загрузки множества маленьких изображений, перенеся коды картинок в CSS - файл стилей. Т.к. браузер Internet Explorer не поддерживает внедрение изображения в текст, то используется для него отдельный код.

    Для получения готового для использования кода, укажите изображение, нажмите кнопку "Сгенерировать Код" и вставьте полученное изображение себе на сайт.

    Кликните на изображении для получения кода примера.

    Для вставки изображения в HTML-код страницы используйте следующий код:

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

    Техническая информация

    Для внедрения картинки на веб-страницы при помощи data:URI используется base64 - кодирование. Эта схема позволяет вставить код картинок прямо в (x)HTML-страницу без обращений к внешним файлам, что уменьшает общее количество HTTP-обращений к серверу. Встроенные или InLine изображения используют схему data:URI для внедрения двоичного кода картинки прямо в тело веб-страницы. Как было определено в RFC 2397, такие URI предназначены для вставки небольших объектов как непосредственные данные. Использование встроенных изображений позволяет сэкономить HTTP-запросы к внешним ресурсам.

    Синтаксис у data:URL следующий:

    Допустимый тип данных: image/gif. image/jpeg. image/pjpeg. image/png. Тип данных можно определить с помощью функции mime_content_type

    Преимущества data:URL
    • С помощью data:URL вы экономите количество HTTP-запросов.
    • За счет уменьшения числа параллельных потоков загрузки браузера можно получить очень существенный выигрыш в скорости загрузки страницы при большом количестве небольших иконок / пиктограмок.
    • Упрощают HTTP-запросы и повышают общую производительность.
    • Встроенные картинки кешируются вместе с таблицей стилей
    Недостатки data:URL
    • Встроенные изображения не поддерживаются в Internet Explorer 5–7, хотя сообщается, что версия 8 их поддерживает.
    • Текстовое base64-представление данных также занимает больше, чем бинарное изображение.
    • Ограничение на размер встроенных изображений. По стандарту RFC браузеры должны поддерживать только URL длиной до 1024 байтов. Хотя большинство совеременных браузеров имеют больший допустимый размер, например, Opera ограничивает data:URL до примерно 4100 символов. Firefox вплоть до 100Кб, IE8b1 поддерживает data URL длиной не более 32Кб.
    • Требуются дополнительные действия для обновления внедренного изображения: перекодировать, вставить.
    • Встроенные картинки НЕ кешируются, если внедрены непосредственно в динамический HTML-документ.

    Для внедрения музыки на страницу воспользуйтесь этим сервисом .

    Картинки в теле страницы с помощью data: URL

    Перевод: Николай Мациевский aka sunnybear

    Опубликована: 3 апреля 2008

    Картинки в теле страницы с помощью data:URL

    Примечание: ниже расположен перевод статьи "Inline Images with Data URLs". в которой рассматривается вопрос о внедрении картинки на веб-страницы при помощи data:URI. Эта схема позволяет вставить код картинок прямо в (X)HTML-страницу без обращений к внешним файлам, что уменьшает общее количество HTTP-обращений к серверу. Мои комментарии далее курсивом.

    Встроенные (inline ) изображения используют схему data:URI для внедрения прямо в тело веб-страницы. Как было определено в RFC 2397, такие URI предназначены для вставки небольших объектов как «непосредственные» данные. Такие объекты должны рассматриваться так же, как и любые другие внешние файлы. Использование встроенных изображений позволяет сэкономить HTTP-запросы к внешних ресурсах.

    Поддержка браузерами data:URL

    Хотя Opera 7.2+, Firefox, Safari, Netscape и Mozilla поддерживают data:URI. Internet Explorer 5–7 совсем нет. Однако, сообщается, что Internet Explorer 8 будет поддерживать эту схему, так как проходит Acid2 тест. что позволяет использовать data:URL как реальную альтернативу для внедрения небольших декоративных изображений. Существует также несколько приемов для поддержки старых версий Internet Explorer.

    Схема data:URL

    Вы уже имеете представление о других схемах URL в своих переходах по интернет-страницам, например, о http. ftp: и mailto. Схема data:URL предоставляет способ для внедрения «непосредственно данных» точно так же, как если бы они были подключены через вызовы внешних файлов. Синтаксис у data:URL следующий:

    В случае простых изображений вам нужно указать mime-тип для них (например, image/gif ), за ним идет base64-представление бинарного файла с изображением. Ниже приведен пример (переводы строк добавлены, чтобы не разрывать страницу, на самом деле, их нет):

    В результате вы получите следующее изображение иконки папки (частичный скриншот ниже):

    CSS и встроенные изображения

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

    Теперь иконка папки будет повторяться для каждого вхождения LI (или можно также использовать соответствующий класс или ID ).

    Что выглядит в Firefox примерно следующим образом (частичный скриншот):

    Проблемы data:URL

    С описанным выше подходом для подключения изображений связано две основные проблемы. Во-первых, вам нужно пересчитывать base64-представление изображений и редактировать CSS-файл каждый раз, когда само изображением меняется. Также IE до версии 7 включительно не поддерживает встроенных изображений. У первой проблемы есть простой решение на PHP:

    Этот код читает файл с изображением и автоматически преобразовывает его на сервере в base64. Однако, это простота этого решения повлечет некоторую дополнительную нагрузку на сервер. Как вариант можно рассмотреть автоматический пересчет всех картинок и вставка их в CSS-файл, например, раз в 5 минут по необходимости (если файл с изображением изменился). Дополнительно нужно будет озаботиться, чтобы сбросить кеширование для самого CSS-файла.

    Работа в Internet Explorer

    Существует два способа обойти отсутствие в IE поддержки data:URL. Используя распознавание браузеров (например, с помощью условных комментариев, ведь речь идет только про IE ) можно просто отображать внешнее изображение для IE и встроенные изображения для остальных браузеров. Или вы можете использовать JavaScript для эмуляции этой поддержки в IE, но эта техника потребует довольно значительного объема JavaScript-кода. Вышеприведенный PHP-код позволяет легко вставить base64-аналог изображения (можно расширить этот пример, чтобы, например, распознавать заголовки, отправляемые браузером серверу и только для IE выводить URL для изображения, для остальных же кодировать его в base64 ):

    Когда ваш сервер анализирует CSS-файл, он автоматически перекодирует бинарный файл изображения в base64 и отправит эти данные внутри CSS-файла. Следующим шагом будет добавление распознавания браузеров для отправки изображения только IE, и встроенных изображений всем остальным. Это можно сделать либо внутри CSS-файла с PHP-кодом, либо с помощью условных комментариев, например:

    В файле ie.css должно быть нормальное обращение к картинке, например:

    Лично мне вышеприведенный код кажется сомнительным: все браузеры, кроме IE, посчитают, что CSS-файлы закомментированы и вообще к ним не обратятся. Поэтому я бы советовал оставить комментарии только для первого файла и переместить его вызов в конец, чтобы он переопределял общие стилевые правила.

    Преимущества data:URL

    С помощью data:URL вы экономите HTTP-запросы. Вместе с техникой CSS sprites data:URL могут значительно уменьшить число HTTP-запросов. Будет весьма интересно посмотреть, если удастся использовать data:URL в сочетании с USEMAPS или сделать CSS sprite с помощью data:URL. Итак, краткий список плюсов данного метода:

    • Экономят HTTP-запросы, предотвращают издержки, связанные с большим числом объектов.
    • Экономят число параллельных потоков: у браузеров есть ограничение (по спецификации HTTP/1.1, однако, Firefox, Opera и Safari несколько вольно его расценивают, в частности, позволяя настраивать этот параметр или значительно его увеличивая ) на число одновременных соединений с одним хостом.
    • Упрощают HTTPS-запросы и улучшают производительность при таком типе соединения.
    Недостатки data:URL

    Встроенные изображения не поддерживаются в Internet Explorer 5–7, хотя сообщается, что версия 8 их поддерживает. Текстовое base64-представление данных также занимает больше, чем бинарное изображение. В наших тестах base64-данные были на 39–45% больше бинарного аналога, но gzip-сжатие позволяет уменьшить разницу до 89%. Предварительная оптимизация изображений перед base64-кодированием позволяет уменьшить их размер пропорционально.

    Также существует ряд ограничений на размер встроенных изображений. От браузеров требуется поддерживать только URL длиной до 1024 байтов, в соответствие с вышеупомянутой спецификацией RFC. Однако, браузеры более либеральны к пользователям в том, что они принимают. Например, Opera ограничивает data:URL до примерно 4100 символов. Firefox поддерживает data:URL вплоть до 100Кб. В итоге, эта техника подходит больше для небольших по размеру изображений. Краткий список минусов:

    • Не поддерживается IE до 7 версии включительно.
    • Требуются дополнительные действия для обновления внедренного содержания (перекодировать, еще раз вставить).
    • Ограничена длина. Эта техника может быть полезна для вставки небольших, декоративных изображений.
    • Изображения, представленные в base64-кодировке, примерно на 33% больше размера их бинарного аналога.
    • Спасибо, zerkms. встроенные картинки (не в CSS) не получится закешировать по определению. Они будут кешироваться только с HTML-кодом.
    Примеры data:URL

    Ниже приведено несколько примеров, которые вы можете проверить в своем браузере. Все они отражают вышеприведенный код.

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

    Наиболее разумным будет, мне кажется, подход, не увеличивающий общее число CSS-файлов, т.е. использующий характерные хаки для IE, чтобы только для него подключить фоновые изображения. Для IE версий 6 и ниже можно использовать * html. для IE 7, к сожалению, этот хак уже не работает, поэтому используем *+html (спасибо за дополнение Bueno). В итоге, вышеприведенный пример будет выглядеть примерно так:

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

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

    Оба примера использования можно посмотреть на webo.in. на главной странице график выводится прямо в теге img. фоновый CSS sprite в CSS-файле записан также в base64-кодировке. Если у кого-то не отображается какая-либо картинка, напишите, пожалуйста, в комментариях будем думать над решением.

    Хочу подчеркнуть, что решение об использовании data:URL должно приниматься на основе статистики использования браузеров для просмотра сайта (для webo.in доля IE составляет меньше 20%, что позволяет использовать более прогрессивные методы для оптимизации скорости загрузки ).

    Заключение

    С релизом Internet Explorer 8 data:URI должны стать реальной альтернативой существующим методам вывода изображений. Вы можете вставить небольшие изображения прямо в тело страницы с помощью data:URL для экономии числа HTTP-запросов. data:URL является удобным способом для создания автономных веб-страниц, которым не требуются никакие внешние объекты для полного своего отображения.

    Читать дальше

    Встроенная видеокарта

    Встроенная видеокарта

    Встроенная видеокарта (ее еще часто называют интегрированной или «onboard» видеокартой) является частью набора микросхем системной логики материнской платы компьютера (частью чипсета). Встроенная видеокарта, как правило, располагается внутри микросхемы его "северного моста".

    Не волнуйтесь, если пока не совсем понимаете о чем идет речь (какие-то "мосты" и т.д.) Об устройстве материнской платы мы с Вами поговорим более подробно в следующих разделах. Пока нас интересует исключительно встроенная видеокарта. На фото представлен типичный пример интегрированного видео на материнской плате.


    Цифрой «1» у нас здесь и обозначен этот таинственный "северный мост". Как видите - ничего особенного в нем нет: большая микросхема, под крышкой которой и расположена (кроме всего прочего) встроенная видеокарта. Маркировка чипсета (надписи на нем) может быть совершенно разная, в зависимости от производителя. В данном случае мы видим что эту микросхему выпустила фирма "SIS" цифры ниже - ее серийный номер и модель.

    Примечание. в современных компьютерах микросхемы чипсета часто прикрывают радиаторами для рассеивания тепла. Так что посмотреть маркировку бывает не так-то просто.

    Под цифрой «2» на фото выше у нас - процессорный сокет (весь в дырочках под процессорные "ножки"). Цифрой «3» обозначены два разъема под модули оперативной памяти .

    Сейчас давайте посмотрим какие же есть особенности, которыми отличается встроенная видеокарта. Давайте разберем этот момент подробнее. Что есть и чего нету у двух различных типов видеокарт: интегрированной и внешней (дискретной)?

    Вот эти отличия: внешнюю карту можно заменить на более новую. Все современные внешние видеокарты имеют мощное и производительное графическое ядро, прикрытое высокопроизводительной системой охлаждения. Имеют свою собственную (напаянную на самой видеоплате) память, причем память более быструю, чем оперативная. Также - высокоскоростную шину передачи данных, характеристики которой зависят от типа разъема для подключения видеокарты к материнской плате (PCI, AGP, PCI-Express и т.д). Дискретные решения также оснащены различными выходами для подключения мониторов и телевизоров.

    Встроенная видеокарта - это неотъемлемая часть набора системной логики чипсета материнской платы, не подлежащая замене (разве с заменой самого чипа). Встроенное видео, по определению, намного менее производительное чем его дискретный аналог. Удел таких видеокарт - недорогие офисные компьютеры, не требующие мощного графического процессора.

    Встроенная видеокарта не имеет своей оперативной памяти, а пользуется памятью, установленной на материнской плате. Отсюда - дополнительное снижение быстродействия (данные от видеокарты передаются сначала контроллеру оперативной памяти, затем - в саму память компьютера, а затем уже поступают на обработку в центральный процессор). Короче говоря, - долгая история. ) Да, и передаются они не по специализированной шине данных, а по общей системной шине на материнской плате, что дополнительно снижает скорость быстродействия таких систем.

    Интегрированное решение имеет на задней стенке системного блока один стандартный разъем VGA для подключения монитора или телевизора (в современных моделях встречаются экземпляры, имеющие и цифровой DVI/HDMI разъем).


    На фото выше под номером «1» мы видим видео выход, которым оснащена встроенная видеокарта. Под номером «2» - один из видео выходов видеокарты дискретной (выполненной в виде отдельной платы расширения).

    Как мы уже упоминали, встроенная видеокарта - удел офисных компьютеров средней мощности. Вы не сможете запустить на такой карте компьютерную игру с реалистичной трехмерной графикой и сложными эффектами. Точнее так: запустить-то, при определенных обстоятельствах, сможете, но вот "тормозить" она будет - безбожно! А оно Вам надо? Лучше, если не можете без игр, - приобретите себе хороший графический ускоритель долларов за 150-200 и на несколько лет забудете об этой проблеме :)

    К примеру, на хорошие материнские платы, которые, по мнению производителя, будут использоваться в мультимедийных игровых конфигурациях встроенные видеокарты даже не устанавливаются (и правильно, зачем они там нужны, если их все равно не будут использовать?).

    Как определить встроенное у Вас видео или нет? А - на глаз :) Еще раз внимательно посмотрите на заднюю стенку системного блока (фото выше), примечаете, как расположен разъем под номером «1», а как - под номером «2 »? Теперь мысленно представьте, что корпус прозрачный и "увидите" как в нем расположена материнская плата (параллельно боковой крышке), соответственно, и VGA выход интегрированного видео - так же.

    Теперь смотрим на цифру «2» - разъем ориентирован перпендикулярно по отношению к материнской плате, - именно так, как устанавливается в слот графического ускорителя внешняя (дискретная) видеокарта.


    Сейчас на рынке появились центральные процессоры с интегрированным в них графическим ядром. Идею с интегрированными непосредственно в центральный процессор дополнительными функциями (графический чип расположен на одном кристалле с процессором, контроллером оперативной памяти и кешем, а не вынесен отдельной микросхемой) еще в 2006-ом году высказала компания «AMD». Немного позже она же представила свою концепцию APU (Accelerated Processing Unit) и воплотила ее в жизнь.

    Раньше все это дело четко разделялось:

    • CPU - (Central Processing Unit - центральное обрабатывающее устройство)
    • GPU - (Graphics Processing Unit - графическое обрабатывающее устройство или "устройство обработки графики")
    • сейчас - APU (Accelerated Processing Unit - процессор с видеоускорителем или "ускоренный процессор", если дословно)

    Чисто технически, любой процессор с интегрированным в него графическим ядром может быть отнесен к APU. Другое дело, что эта аббревиатура пока не очень широко применяется, хотя дело уже дошло до того, что доля графического компонента в видеоядре достигает чуть ли не 50-ти процентов от площади общего кристалла.

    Позже фира «Intel» выпустила и свои решения с интегрированной графикой. Яркими представителями являются платформы на базе APU «Sandy Bridge» и их модификация - «Ivy Bridge» под сокет LGA 1155.

    Как такое возможно: в один и тот же объем кристалла кремния интегрируется все больше компонентов и функций? Тут все просто - постоянное уменьшение технологического процесса! Например, при переходе на новый техпроцесс (22 нанометра) на ту же площадь можно поместить большее количество транзисторов (чем мельче детали, тем больше можно их засунуть в конечное изделие).

    Примечание. нанометр (старое название "миллимикрон") - одна миллиардная часть метра! Одна из широко распространенных единиц измерения, встречающаяся в технологиях полупроводникового производства.

    Дошло до того, что на некоторых современных ноутбуках система охлаждения имеет совсем не классический вид. Поясню свою мысль: вместо ранее привычной нам компоновки из трех радиаторов на тепловых трубках (процессор, северный и южный мост), мы имеем один чип и один радиатор! Трубка теплоотвода тянется через всю плату и заканчивается вентилятором, который "выбрасывает" тепло наружу корпуса компьютера .

    На материнской плате, по сути, остаются только различные вспомогательные элементы: формирователи напряжения, системы его сглаживания и фильтрации (конденсаторы, дроссели), элементы, отвечающие за запуск платы и контроль ее температуры (мультиконтроллер). Все основные контроллеры и микросхемы собраны в одном APU чипе.


    Вот этот же мага-чип со снятой системой охлаждения:


    Очевидно, что подобная конструкция дает минимальные временные задержки в передаче потоков данных между всеми перечисленными выше узлами. А это, в свою очередь, обеспечивает весьма неплохую производительность этим встроенным видеокартам. Можно сказать так: встроенное графическое ядро в «Sandy Bridge» имеет ту же производительность, что и внешняя видеокарта начального уровня, а то и больше. И, конечно же, - аппаратная поддержка видеопотока в HD качестве. )

    Хочу добавить небольшую ремарку: при традиционном подходе считается, что встроенная видеокарта никоим образом не может работать совместно с внешней, ни расширять ни дополнять ее функционал. Либо та, либо - другая. При наличии внешней встроенная видеокарта просто отключается.

    Но, как говорится, из любого правила есть исключения. В нашем случае это ноутбуки с двумя видеокартами. Первой и основной, как правило стоит какая-либо модификация "Intel HD". Второй видеокартой ставят более мощную видеокарту от «AMD» или «NVidia». Она включается в работу, когда первая (интегрированная) видеокарта "не тянет". В трехмерных играх, например.

    Вы спросите, почему бы не поставить одну мощную видеокарту, которая справится со всеми задачами? А энергопотребление? Это же ноутбук, ему важно максимально долго работать от батареи, а мощная видеокарта и энергии потребляет много. Вот и пошли производители на такой компромисс. Пока вы работаете в Word'е или OpenOffice. изображение на экран выводит экономичная интеловская видеокарта. Запустили игрушку, - включился в работу мощный 3D-GPU от «AMD» или «NVidia», отстранив временно основную.

    Но здесь, опять же, видеокарты работают по очереди, хоть и научились переключаться между собой автоматически и без перезагрузки. По настоящему совместная работа встроенной и дискретной видеокарт началась с появлением технологии NVidia Optimus. В ней встроенная интеловская видеокарта не отключается, а предоставляет свой кадровый буфер для дискретной соседки. Такое вот сотрудничество. Мощная карта от NVidia формирует изображение и "кладёт" его в кадровый буфер встроенной карты, а та берет на себя обязанности по выводу изображения на экран.

    Так что если у вас на ноутбуке мощная дискретная видеокарта, а игры с 3D-графикой сильно тормозят, в первую очередь проверьте переключается ли ноутбук на нее. Может быть, слабенькая интеловская пытается 3D просчитывать, а у нее это получается, все таки, не очень.