Более эффективно помещать необработанные данные изображения в атрибут Src?

Question

Недавно я обнаружил, что атрибут src изображения позволяет вам помещать в него необработанные базовые данные изображения 64. Прав ли я, предполагая, что это технически более эффективно, чем отдельный файл изображения, поскольку дополнительные запросы к изображениям не нужно делать? Или накладные расходы настолько малы, что это того не стоит?

Кроме того, предполагая, что я в конечном итоге сделал это, что было бы лучшим способом получить эти необработанные данные? (из, скажем, изображения, которое я нарисовал краской?)

Answer 1

Это зависит от того, что вы подразумеваете под «более эффективным». Если вашим показателем является время, то оно может быть более эффективным.

Техника, на которую вы ссылаетесь, использует данные URI . Обычно вы берете данные изображения и base64 кодируете , так что они содержат только символы ASCII. Данные кодирования base64 увеличивают его на 33% (каждые 6 бит становятся 8).

Так что это работает для маленьких изображений, но для больших, премия в 33% может быть слишком большой.

Причина, по которой это может быть хорошей идеей, заключается в том, что задержка часто является ограничивающим фактором для запросов браузера. Раньше (когда-то) ограничение пропускной способности было ограниченным, поэтому общим советом было разделение ваших ресурсов, но это больше не так. С изображением URI данных браузеру не нужно совершать второй круговой переход.

Помимо всего этого, вы должны учитывать поддержку браузера. До версии 8 IE не поддерживал URI данных. В IE 8 верхний предел данных составляет 32 КБ.

Надеюсь, это поможет!

Answer 2

Это зависит от того, сколько изображений вы собираетесь отправлять и как часто их запрашивают. Наличие изображений в базе 64 абсолютно более эффективно, чем 30 запросов HTTP.

Вы также можете реализовать кэширование каждого изображения, если его часто запрашивают. Это то, что мы реализовали на моем рабочем месте. Мы храним base64 во временном каталоге и проверяем, были ли они уже закодированы. Если это так, мы получаем еще более быстрое время отклика, в противном случае они создаются на лету в скрипте PHP. Самые популярные страницы будут очень быстро прогреваться в кеше.

Answer 3

Размер ограничен. Я не знаю наверняка по макушке, но 2K кажется правильным.

Помните, что есть кое-что для кодирования base64. Если у вас есть 500-байтовое изображение, это может быть хорошо, но для других вещей нет.

На самом деле, вы не должны делать это прямо сейчас для совместимости. Может быть, в ближайшие годы ...