Можно ли использовать <a href= "https://stackoverflow.com/data; ..." rel="nofollow noreferrer" >для отображения изображений?

Я узнал, что возможно встроить изображение на 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-кодирования изображения, увеличивающего размер изображения на бит?

Спасибо.

Ответ 1

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

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

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

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

Ответ 2

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

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

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

Другие недостатки, которые, вероятно, не связаны с

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