healer
Администратор
Из: Москва
Сообщения: 24654
|
|
Base64 изображения в HTML |
|
Послано: 05-05-2015 07:49 |
|
|
Изображение, закодированное в Base64 можно внедрять непосредственно в код HTML, CSS.
Разумеентся, нежелательно использовать этот прием для больших изображений.
Плюс этого метода в том, что исключается дополнительный запрос к серверу для получения изображения.
Если у вас много мелких изображений на странице, то использование этого метода может значительно ускорить отображение готовой страницы у клиента и уменьшить нагрузку на сервер.
Следует отметиь, что встраивание изображения в тело HTML или CSS - не единственный метод, который позволит ускорить загрузку страницы при большом количестве небольших изображений.
~~~~~~~~~~~~
Здоровья Вам. Духовного и физического.
|
healer
Администратор
Из: Москва
Сообщения: 24654
|
|
Base64 изображения в HTML |
|
Послано: 05-05-2015 07:50 |
|
|
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ru" lang="ru">
<head>
</head>
<body>
<img src="data:image/gif;base64,R0lGODlhBQAFAIAAAPDw8AAAACH5BAAAAAAALAAAAAAFAAUAAAIHjA+RtupnCgA7" width="5"
height="5" alt="внедренный знак"/>
</body>
</html>
~~~~~~~~~~~~
Здоровья Вам. Духовного и физического.
|
healer
Администратор
Из: Москва
Сообщения: 24654
|
|
Base64 изображения в HTML |
|
Послано: 05-05-2015 09:46 |
|
|
В приведенном выше примере в HTML встраивается Base64 код картинки, которая реально используется у меня на сайте.
Это не сильно загружает сам HTML код, хотя и не способствует его читабельности.
Следует так же остановиться и на недостатках такого метода:
- IE до 7 версии включительно не поддерживает эту технологию.
- Есть ограничения на размер встраиваемого изображения. Согласно RFC 2397 этот размер ограничен 1024 байтами.
Браузеры как правило поддерживают значитель больше, но это уже их добрая воля
- Размер изображения в base64-кодировке примерно на треть больше исходного представления.
- внедренные картинки (не в CSS) не кешируются. Они могут кешироваться только с HTML-кодом.
~~~~~~~~~~~~
Здоровья Вам. Духовного и физического.
|
healer
Администратор
Из: Москва
Сообщения: 24654
|
|
Base64 изображения в HTML |
|
Послано: 05-05-2015 09:53 |
|
|
Вот так выглядит в Base64 один прозрачный пиксель (файл gif), который иногда используют в качестве распорок при HTML верстке.
R0lGODlhAQABAIgAAAQCBAAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==
~~~~~~~~~~~~
Здоровья Вам. Духовного и физического.
|
healer
Администратор
Из: Москва
Сообщения: 24654
|
|
Base64 изображения в HTML |
|
Послано: 18-06-2015 09:27 |
|
|
Как получить Base64 код.
В сети можно найти большое число перекодировщиков.
Однако, поскольку в таком виде, как правило, можно использовать очень небольшоу количество изображений (см. описанные выше недостатки),
то проще использовать перекодировщик OnLine.
Например, тут http://www.base64-image.de.
Вы просто загружаете изображение на сайт и получаете Base64 изображение как оно должно выглядеть в CSS, XHTML, т. е. готовый код.
~~~~~~~~~~~~
Здоровья Вам. Духовного и физического.
|
healer
Администратор
Из: Москва
Сообщения: 24654
|
|
Base64 изображения в HTML |
|
Послано: 15-07-2015 09:55 |
|
|
Разумеется, изображения в формате Base64 можно использовать для определения фона
background-image: url('data:image/gif;base64,R0lGODlhCgAKAIAAAPX19fz8+iH5BAAAAAAALAAAAAAKAAoAAAIRhI8Qy6zdHlxyVnjjdJv2UAAAOw==');
~~~~~~~~~~~~
Здоровья Вам. Духовного и физического.
|
healer
Администратор
Из: Москва
Сообщения: 24654
|
|
Base64 изображения в HTML |
|
Послано: 16-07-2015 06:34 |
|
|
При необходимости динамически формировать Base64 изображения для HTML (CSS) на стороне сервера используют соответствующие функции языка программирования.
Для PHP, например, это может выглядеть так:
~~~~~~~~~~~~
Здоровья Вам. Духовного и физического.
|
healer
Администратор
Из: Москва
Сообщения: 24654
|
|
Base64 изображения в HTML |
|
Послано: 16-07-2015 06:37 |
|
|
$file = "icon.gif";
if($fp = fopen($file,"rb", 0))
{
$picture = fread($fp,filesize($file));
fclose($fp);
echo '<img src="data:image/gif;base64,' . chunk_split(base64_encode($picture)) .'" />';
}
~~~~~~~~~~~~
Здоровья Вам. Духовного и физического.
|
healer
Администратор
Из: Москва
Сообщения: 24654
|
|
Base64 изображения в HTML |
|
Послано: 07-08-2015 08:02 |
|
|
Если изображение формируется внутри программы, то участок кода, отвечающий за вывод изображения в формате Base64 может быть таким:
ob_start();
imagepng($im);
$code_count=ob_get_contents();
ob_end_clean();
ImageDestroy($im);
echo '<img src="data:image/png;base64,' . chunk_split(base64_encode($code_count)) .
"\" style='height:31px;width:88px;' alt='my counter' title='my counter' />";
~~~~~~~~~~~~
Здоровья Вам. Духовного и физического.
|
healer
Администратор
Из: Москва
Сообщения: 24654
|
|
Base64 изображения в HTML |
|
Послано: 24-08-2016 17:52 |
|
|
Вот еще один online сервис преобразования изображения в формат Base64
http://www.askapache.com/online-tools/base64-image-converter/
Следует понимать, что сервисы только только перекодируют изображения т. е. не меняют объем изображения.
Об оптимизации размера изображений можно почитать тут.
~~~~~~~~~~~~
Здоровья Вам. Духовного и физического.
|