views:

101

answers:

7

Would it make sense to improve pageload speed by serving smaller images from the database rather than make multiple HTTP requests given that the website is PHP driven?

I'm thinking of smaller page design elements, buttons, thumbnails for galleries etc.

A: 

The number of HTTP requests remains the same whether the browser loads images from a script that loads image data from a database or regular files. In fact, loading image data from a database rather than static files would probably introduce additional overhead.

If you're looking to reduce the amount of HTTP requests a browser has to make to load your documents, you should look into CSS Sprites.

Johannes Gorset
+7  A: 

No. Since:

  • A browser only communicates with the server via HTTP so you would have to pull them from a database, put them in HTTP, then return them to the browser
  • It is more expensive to pull large chunks of binary data from a database then it is to pull them from the filesystem.

If you want to make fewer HTTP requests, you can sprite the images, but don't do that with content images (which should have proper <img> elements with alt text).

David Dorward
"don't do that with content images (which should have proper <img> elements with alt text)" - which is why we have a general policy to NOT use sprites.
Leo
There are plenty of places where sprites are a good choice (my current project uses them for background images on buttons, with multiple states for each button). The content is plain text overlaid on the background.
David Dorward
I don't dispute that and I have pushed for use of sprites.
Leo
I'm accepting this answer for its clarity, although I still have reservations about the performance, given the results found in the link I posted elsewhere in this thread.
Leo
A: 

You would save the overhead from the HTTP, but how would you insert the images in the html? Otherwise you have to still make an HTTP request to get the image.

If you serve the images as byteStream from the DB, you don't let browsers to cache the content. And if you use HTTP requests per image, you let them cache the content, but paying the price to do more requests. You have also to consider the time fetching the images from the DB and the time processing them!.

I think that your best option in this case, is put all the small images in just one file (sprite), and then use CSS to display them. That's what high load sites do. This way you just do one request and get all the images, the browser will cache the file and it will improve your perfomance. The price you pay is that you need to write more CSS but that's just plain text and the same number of files. It's a win-win situation :)

pakore
Browser caching in independent of the way images are stored on the server (just use proper HTTP headers).
Marcel Korpel
@Marcel Korpel: That's not what he's saying.
Johannes Gorset
inserting image in html is supported.
Yossarian
@FRKT: My comment was about: “[i]f you serve the images as byteStream from the DB, you don't let browsers to cache the content.”
Marcel Korpel
corrected :))))
pakore
+2  A: 

No.

The user isn't directly connected to the database and you can't (well you can but it's so ugly I'm ignoring it) output the image data inside the HTML. They have to be loaded on separate requests.

If you store them in a database, you need something to access the database and then stream it out. It's actually seriously worse than just letting your httpd serve it. If a server hosts it, only the core server and the filesystem get touched. If it's in a database it's the core server, the connector to the language (eg mod_php), the language (eg php), the database connection and the filesystem (which the database is written on).

Keep it simple. Keep it as a file.

If you're drowning in requests:

  • If you're on Apache consider using a server like lighttpd or nginx. Massively more efficient on static/dynamic mixed environments. You can still keep apache or you can dump it altogether.

  • Shift your images off to a CDN like S3, Akami, etc. There are plenty of providers and it usually only works out a little bit more expensive than hosting (this is assuming you've got quite a lot of traffic).

Oli
"It's actually seriously worse than just letting your httpd serve it" - The benchmark on this page would appear to challenge that statement: http://www.onlineaspect.com/2007/07/10/image-storage-database-or-file-system/
Leo
Read the comments under your linked article, too.
Yossarian
@Y: yes I read all the comments and it would appear to fit with my needs. My requirement goes beyond simply reducing HTTP requests and scalability is not an issue in this instance.
Leo
I'm sorry but this "benchmark" is little more than an anecdote. There needed to be three key explanations to make his work have any value: *how* he served the files, how he timed and what the system was. My immediate suspicion is he served the filesystem files through PHP which is a poor start but if he was timing in PHP, that explains it. His website is on Slicehost which is renowned for slower-than-most disk access and we don't know his MySQL config so all the images could be sitting in RAM - which is probably not the case for a production site.
Oli
+1  A: 

It is possible, you can embed image in HTML using Data URI Scheme. But I doubt it will redeem, you will decrease number of HTTP requests, but images can be cached on client, so therefore you will greatly increase length of each response.

But, it will be faster to load those files directly from disc, not from DB.

Yossarian
Unfortunately,though, cross-browser support appears unreliable.
Leo
+2  A: 

also you can serve the images from multiple subdomains, so you can have more concurrent HTTP requests which could help speeding up.

celalo
A: 

There are various ways to improve image performance in a website

  1. Use an alternate domain just for static content. This has two benefits - cookies from your main domain are not sent with each request, and a separate domain gets it's own allocation of connections

  2. Combine images into sprites

  3. Configure caching correctly. Set far future expiry headers. Set the expiry header so that the image is not downloaded between visits to the site. When an image is requested, the ETAG can also be checked and if they match, then a 302 response is returned and the content is not downloaded again.

I don't see why streaming images from a database is going to better than from the file system. Your performance numbers are subjective I suspect because of caching.

James Westgate