На главную страницу сайта celitel.info
Вы не вошли в систему! [ ВОЙТИ ] или [ ЗАРЕГИСТРИРОВАТЬСЯ ]
CELITEL » Записки сайтостроителя » Тема: Base64 изображения в HTML -- Стр. 1  | Перейти в: 

Послал Сообщение
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/
Следует понимать, что сервисы только только перекодируют изображения т. е. не меняют объем изображения.
Об оптимизации размера изображений можно почитать тут.

~~~~~~~~~~~~

Здоровья Вам. Духовного и физического.



Статистика

Сейчас у нас: и 1 Гость
Всего сообщений: 26878
Всего тем: 1152
Поздравляем: djmacho2005, viknik !!

Based on:

 

  my counter Valid XHTML 1.0 Strict Valid CSS!