Any suggestion to avoid this overhead?
Thanks in advance
K.

The problem is that people are confusing “request” with “connection”. You want to avoid CONNECTIONS, multiple REQUESTS over one connection is very cheap, and commonplace. The one TCP connection per request idiom does not exist in practice thanks to HTTP 1.1.

100 small images == 3 or less connections on my Apache/Linux server.

HTTP 1.1 has a “Connection: Keep-Alive” header.
This is supported by ALL modern browsers (even mobile) and ALL modern servers (IIS, Tomcat, Apache, etc.)

With Keep-Alive: The browser and server leave the connection open at the “end” of a request. The browser can send additional HTTP 1.1 requests to the server, and the server sends the requested data back over the same single connection.

With static content this translates to Reading all 100 images from disk, and sending them to the client all in one go.

If one of the 100 images changes ONLY that image will be re-sent, the rest will result in a “No Change” reply.

Don’t dynamically generate data unless you have to, and when you do generate “dynamic” data make sure to set the caching headers so that multiple requests for the same “dynamic” content don’t require a full request / database lookup / transmission.

Base64 encoding should NOT be used to fix a “too many connections” issue, see your server configuration for that.

The “too many requests” issue is a misnomer since all modern servers & browsers allow multiple requests over one connection, and the requests are VERY cheap.

Base64 encoding multiple images into one CSS file is a benefit only when the image data is smaller than an HTTP Request header (mostly never). Base64 it’s a 3 to 4 increase of data size, and is only worth using when the base 64 encoded data is smaller than the HTTP Header (very small images < 8×8).

Even this is a silly way do do things. Lets say I have 100 very small images, I can paste them all into ONE big image, and serve up "palette.png" as a single static image.
To get at the individual images just use CSS.

#my_icon {
display: inline-block;
backgroundImage: url("palette.png");
width: 16px; height: 16px;
backgroundPosition: -48px -160px;
}
#my_icon2{
/* same as above, with different bkg Pos */
}
——

…

Works in ALL modern browsers & is more efficient than B64.

Satish is pushing Base64 encoded data to the server using AJAX. Hopefully he’s using the POST method to avoid URL escaping ‘%’ (huge bloat). Even with POST, the B64 encoding is being applied TWICE before upload since browsers automatically encode POST data using base64
( this means a 4 to 7 data expansion (almost double) ).

As others have said: DO NOT PRE-OPTIMIZE. Just develop your site the easiest/fastest way you can, and then run tests to see where it’s ACTUALLY slow. Chances are your server will already be optimized for your “unoptimized” use case.

All this about is for webserver calls (100+) which can be optimized with better solutions.

You already said, with cheap and affordable web technologies, a “shared hosting” is a sad story today, so “i have 1 server without ssh and php.ini and without…” is not for ma’n'pa-3-pages website anymore.

My 2 cents.

Thank you a lot for your reply and advice!

My image is about 3kb. So I could use it.

Cheer,
Rithy

you definitely have to run some tests to be sure which operation is faster. Using base64 is good for small images and multiple requests, i.e. 100 images each 2KB big. Than you’ve so much requests that even with very small images slows down the page.

When you’ve to store images bigger than a “thumb” size it may be not a good idea. For “wallpaper” size images it’s good to store them as progressive JPGs.

In your case maybe the converting process from image file -> base64 -> http response may not be the best solution.

My advice is to run test with different scenarios that will answer all your questions.

all the best,
stoimen

I’m not sure about the server, currently I have only 1 server and I am not sure how to work with 2 or more databases or servers…

Thanks you. I got it work now. I found that after php wrote the base64 string in a text file, the ‘+’ sign is gone.

But I’ve decided to store as normal image, I’ll encode the normal image into base64 when php load the page.
Because it could be 2 options which can use base64 or normal image and in ie6 doesn’t support base64 image.

But I’m not sure server will use how much cpu to encode the image…
I’m considering about the usage of upc and ram of the server.

Regards,
Rithy