Base 64 encode vs загрузка файла изображения

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

 base64ImageData.Length 177732 bitmap.Length 129882 

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

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

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

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

Изображения Base64:

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

Недостатки Base64:

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

Обычные изображения профи:

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