Безопасно ли использовать <a href="data; ..."> для отображения изображений?

Question

Я узнал, что можно встраивать изображение в HTML-страницу следующим образом, вместо ссылки на отдельный файл изображения:

<a href="data:image/png;base64,...(blah blah base64-encoded png goes here)..."
  width="70" height="38" alt="image embedded using base64 encoding!"></a>

Является ли это "безопасным", как это будет во всех современныхбраузеры смогут просматривать изображение, если я придерживаюсь таких распространенных форматов, как PNG / JPG?Есть ли какие-либо недостатки, кроме base64-кодирования изображения, увеличивающего размер изображения на бит?

Спасибо.

Answer 1

Да, это безопасно - все основные браузеры поддерживают схему данных URI .

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

Другим является ограничение размера, устанавливаемое некоторыми браузерами (IE 8 допускает только до 32 КБ).

Вы также можете использовать это в CSS для уменьшения загрузкивыпуск.

Answer 2

Все современные браузеры должны иметь возможность просматривать изображения этих типов. Я не проверял, но эта возможность давно существует и, вероятно, широко поддерживается.

Но вы также спросили о минусах. Недостатком является то, что разметка HTML генерируется динамически и поэтому не может быть кэширована.

• Если у вас есть статические html-страницы, тогда ваш html может быть кэширован, в этом случае использование URL-адресов данных может даже улучшить производительность, если изображения не слишком большие.
• Если вы включите это в любой динамический html (php, cgi, jsp, shtml, почти все, кроме xml, html, xhtml, htm), тогда будет нулевое кэширование, и поэтому изображения должны будут загружаться каждый раз а не только в первый раз.

Больше минусов, которые, вероятно, не связаны

• Кроме того, общее замечание: base64 занимает ровно в один-три раза больше места, чем файл с прямым доступом. Вот почему для больших изображений это может быть немного менее полезно, даже если это статическая HTML-страница. Но если ваш веб-сервер поддерживает gzip, то для изображений это не займет больше трети.
• И даже если это статический html, если вы используете URL-адрес данных (может называться встраиванием ваших изображений), вся страница не будет отображаться перед изображениями, как обычно. Но для страниц с маленькими изображениями это не должно иметь значения
• И, наконец, если у вас есть большие изображения, вы можете сделать это, потому что браузер не сможет использовать несколько подключений для загрузки, как это обычно бывает.
• Также о минусах (и достоинствах) Одеда, о которых я не думал