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

Question

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

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

Поддерживается в FireFox и других браузерах Gecko.

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

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

Answer 1

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

Answer 2

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

Answer 3

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

Answer 4

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

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

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

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

Answer 5

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

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

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

Answer 6

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

base64ImageData.Length
177732

bitmap.Length
129882

Answer 7

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

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

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

Answer 8

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

Base64 изображений профи:

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

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

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

Нормальные изображения плюсы:

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

Answer 9

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

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

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