Реализация кода и ссылка на автономный инструмент включены.
За последние пару месяцев в погоне за созданием портативных, легко переносимых инструментов на основе браузера для повышения производительности на моем рабочем месте я часто обращаюсь к онлайн-утилитам, таким как Base64 Image Encoder. >» для встраивания изображений или логотипов сайта в один файл HTML.
Формальное определение кодировки Base64 см. по этой ссылке.
Пример использования: отрисовка маркера карты в веб-приложении
К вашему сведению: конкретные случаи кодирования Base64, на которых я сосредоточусь в этой статье, должны быть сужены до встраивания только веб-изображений.
Одним из самых больших преимуществ встраивания изображений в веб-приложение в виде строки Base64 является уменьшение числа no. статических файлов, необходимых для развертывания веб-приложения.
Например. В веб-приложении https://sg-hdb-building-layer-in-three-d.netlify.app/ я решил разместить интерактивный маркер карты в каждом здании для дополнительного отображения всплывающих подсказок:
Вместо сохранения изображения invisible_marker.gif в виде отдельного файла по адресу: https://github.com/incubated-geek-cc/sg-hdb-building-layer-in-3D-offline/ blob/main/asset/img/invisible_marker.gif
Вместо этого я решил внедрить файл в виде строки Base64:
data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7
Кодирование изображения в виде строки base64 исключительно полезно, когда нет. статических файлов для веб-приложения неорганизованы, разбросаны и используются только один раз.
Следовательно, чтобы уменьшить зависимость от внешних веб-инструментов, таких как Base64 Image Encoder, я создал локальную и независимую от сервера версию, как показано ниже:
Не стесняйтесь получить это на моем GitHub: encodeBase64.html или попробовать по этой ссылке!
Личные комментарии:
Обратите внимание, что не все варианты использования подходят для рендеринга изображений в закодированном состоянии. Это особенно актуально, когда невозможность кэширования файла в локальном хранилище браузера становится огромной проблемой для пользователя из-за снижения производительности веб-приложения. К таким случаям относятся:
(1)Файл изображения большой (> 1 МБ) (строки base64, как правило, примерно на 33 % больше по сравнению с исходным размером файла)
(2) Файл изображения отображается на разных веб-страницах несколько раз(в этом случае кэширование файла может значительно сократить время загрузки веб-приложения)
И вот оно! Большое спасибо за упорство до конца этой статьи! ❤ Надеюсь, вы нашли это руководство полезным, и не стесняйтесь следовать за мной на Medium, если вы хотите больше контента, связанного с ГИС, аналитикой данных и веб-приложениями. Буду очень признателен — 😀
— 🌮 Пожалуйста, купи мне тако ξ(🎀˶❛◡❛)
Вот некоторые другие автономные инструменты, которые могут оказаться полезными в вашей повседневной работе:
Больше контента на plainenglish.io. Подпишитесь на нашу бесплатную еженедельную рассылку новостей. Получите эксклюзивный доступ к возможностям написания и советам в нашем сообществе Discord.
