В стандарте RFC 2397 опеределена схема, которая позволяет включать небольшие элементы данных в строку URL, как если бы они были ссылкой на внешний ресурс. В частности в строку адреса можно включать данные небольшого изображения, которые можно использовать для внедрения картинки прямо в HTML или CSS код.

Необходимый нам формат описывается шаблоном data:[<MIME-type>][;charset=<encoding>][;base64],<data>, где MIME-type – это MIME тип содержимого (например image/png для .png изображения), encoding – кодировка содержимого (для картинок кодировка может быть опущена), base64 – алгоритм кодирования, data – данные. Более подробнее об data:url можно прочитать в Википедии.

Например, картинка описывается следующим кодом.

<img src="data:image/png;base64,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">

Основная трудность такого описания ресурса – отсутствие инструмента генерирования ссылки. Приведем простейший скрипт data-url.php для генерации ссылок для файлов изображений.

<?php
if(isset($_FILES['file']) && is_uploaded_file($_FILES['file']['tmp_name'])){
	$type = 'application/octet-stream';
	$is = @getimagesize($_FILES['file']['tmp_name']);
	if(is_array($is)){
		$type = image_type_to_mime_type($is[2]);
	}
	$str = htmlspecialchars(sprintf('data:%s;base64,%s', $type, base64_encode(file_get_contents($_FILES['file']['tmp_name']))), ENT_QUOTES);
	print '<input type="text" value="'.$str.'" style="width:100%;">';
}
?>
<form action="<?=$_SERVER['REQUEST_URI']?>" method="post" enctype="multipart/form-data">
<input name="file" type="file">
<input type="submit">
</form>

Этот файл нужно разместить в доступной части сайта, чтобы его можно было вызвать из браузера.

Скрипт использует библиотеку GD, которая в подавляющем большинстве случаев встроена в PHP.

Для задания URL необходимо выбрать файл их формы и загрузить его на сервер, код data:url появится после отправки формы на сервер.

Внедренные таким способом файлы имеют свои недостатки, например, размер внедренных данных больше треть размера оригинальных данных. Кроме того декодирование требудет дополнительных мощностей от браузера. Некоторые браузеры могут иметь ограничения на объем данных. Поэтому не увлекайтесь слишком большими файлами.