In any case, to get the image file size using javascript (or jquery like)

Question

as:

<img src="http://www.google.com/intl/en_ALL/images/srpr/logo1w.png"> 

I want to get the logo1w.png file of 7.3kb size

how to implement it?

Answer 1

Take a look: Determining image file size + sizes through Javascript?

Answer 2

You can execute an HTTP HEAD request for the image URL. This will return HTTP headers that include the length of the content (aka file size). This requires an additional server request, which is not very efficient when the image is generated instead of being statically static.

Answer 3

I don’t know of any way to get the exact file size sequentially, but if you are ready to jump over several hoops, you can:

1) Estimation based on file size and type. There are several wide variations due to compression methods, but you can probably run some statistics and come up with a semi-order heuristic.

2) In IE, use the fileSize property of the image. In other browsers that support Canvas, use the technique in this question about retrieving image data in JavaScript to capture dataURL, then do the math (multiply by 3/4, since base64 is an increase in size 4/3).

Edit

3) The proposal that others gave (in particular in the question related to Fabien Burned's answer) about receiving HTTP headers is brilliant and accurate. Probably, in some cases this contradicts cross-domain restrictions, but is probably the most consistent and effective method.

Answer 4

You cannot in javascript (sorry, even magical jQuery won't help here!). You will need the server side of the script to get the image for you and calculate the size that you could return to your page.

Note. Caution, overkeepers fear the OP does not own a google domain!

Answer 5

$ fileSize = strlen (file_get_contents ($ imageSrcTag)) // <- php