it-roy-ru.com

Кодирование Base 64 против загрузки файла изображения

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

<img src="data:image/jpeg;base64,/9j/4AAQ..." />

Который поддерживается в FireFox и других браузерах Gecko.

Итак, резюмируем, будет ли быстрее передавать фактический файл изображения или код base64. Требуется ли меньше http-запроса при использовании ajax для загрузки изображений?

Всего изображений будет не более 100 пикселей.

28
teh_noob

Ну, я не согласен ни с кем из вас. Есть случаи, когда вам нужно загружать все больше и больше изображений. Не все страницы содержат 3 изображения вообще. На самом деле я работаю на сайте, где вы должны загрузить более 200 изображений. Что происходит, когда 100000 пользователей запрашивают 200 изображений на очень загруженном сайте. Диски сервера, возвращающие образы, должны развалиться. Еще хуже то, что вы делаете столько запросов к серверу, чем к base64. Для большого количества миниатюр я предпочел бы представление base64, предварительно сохраненное в базе данных. Я нашел решение и сильную аргументацию на http://www.stoimen.com/blog/2009/04/23/when-you-should-use-base64-for-images/ . Парень действительно в таком случае и сделал несколько тестов. Я был впечатлен и сделал мои тесты также. Реальность такова, как говорится. Для такого количества изображений, загружаемых на одной странице, один ответ от сервера действительно полезен.

19
Peter Novak
  • Кодировка Base64 делает файл больше и, следовательно, медленнее для передачи.
  • Включив изображение на страницу, оно должно быть загружено каждый раз. Внешние изображения обычно загружаются только один раз, а затем кэшируются браузером.
  • Это не совместимо со всеми браузерами
25
some

Зачем восстанавливать изображение снова и снова, если оно не будет изменено. Гипотетически, даже если есть 1000 различных возможных изображений, которые будут показаны на основе 1000 различных условий, я все еще думаю, что 1000 изображений на дисках лучше. Помните, что образы дисков могут кэшироваться браузером, экономить пропускную способность и т.д.

4
Mir Nazim

Не думайте, что data:// работает в IE7 или ниже.

Когда запрашивается изображение, вы можете сохранить его в файловой системе, а затем использовать его. Если данные изображения в базе данных изменяются, просто удалите файл. Служите с другого домена, например, img.domain.com. Вы можете получить все преимущества последних изменений или электронных тегов бесплатно с вашего веб-сервера без необходимости запуска PHP, если только вам это не нужно.

Если вы используете Apache:

# If the file doesn't exist:
RewriteCond %{REQUEST_FILENAME} !-f
RewriteRule ^/(image123).jpg$ makeimage.php?image=$1
3
rojoca

Чтобы ответить на первоначальный вопрос, я запустил тест, измеряющий изображение в формате JPEG размером 400x300 пикселей с разрешением 96 ppi:

base64ImageData.Length
177732

bitmap.Length
129882
2
esbenr

Это очень быстрое и простое решение. Хотя размер изображения увеличится примерно на 33%, использование base64 значительно сократит количество http-запросов.

Изображения Google и изображения Yahoo используют base64 и подают изображения встроенными. Проверьте исходный код, и вы увидите его.

Конечно, у этого подхода есть недостатки, но я считаю, что преимущества перевешивают затраты .. Минусы, которые я обнаружил, связаны с медленными устройствами. Например, в iPhone 3GS изображения, обслуживаемые изображениями Google, отображаются очень медленно, поскольку изображения поступают с сервера в сжатом виде и должны быть распакованы в браузере. Так что, если у пользователя медленное устройство, он немного пострадает при рендеринге изображений.

2
user2377782

Как правило, использование кодировки base64 увеличивает размер байта примерно на 1/3. Из-за этого вам придется переместить 1/3 байта из базы данных на сервер, а затем переместить те же самые 1/3 байта по проводам в браузер.

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

При этом, я думаю, что это хорошая идея, чтобы преобразовать файлы в их байтовые представления в БД и передать их.

1
casperOne

Я использовал изображения base64 один или два раза для иконок (10x10 пикселей или около того).

Base64 изображений плюсы:

  • компактный - у вас есть один файл. также, если файл сжат, изображение base64 сжимается почти до размера обычного изображения.
  • страница получена в одном запросе.

Минусы Base64 изображений:

  • чтобы быть реалистичным, вам, вероятно, нужно использовать механизм сценариев (такой как PHP) на всех страницах, которые содержат изображение.
  • если изображение изменилось, все кэшированные страницы должны быть повторно загружены. 
  • поскольку изображение встроено, вы не можете использовать CDN или статический контент веб-сервер.

Нормальные картинки плюсы:

  • если вы используете протокол SPDY, по крайней мере теоретический, page + images + CSS также будет загружаться с одним запросом.
  • вы можете установить срок действия для изображения, поэтому содержимое будет кэшироваться из браузеров.
0
Nick

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

Запрет на все это, когда вы запрашиваете данные, проверяете, были ли они в последний раз изменены, затем записываете их на диск и отправляете оттуда. Вы должны убедиться, что вы уважаете заголовок If-Modified-Since, чтобы не передавать данные без необходимости.

Если вы не можете записать на диск или в какой-либо другой кеш, то будет быстрее всего сохранить его как двоичные данные в базе данных и вывести из него. Регулировка размеров буфера поможет в этой точке.

0
Richard Levasseur