JavaScript – Get size in bytes from HTML img src

by

Well, this is 2017 and you can now use Resource Timing API to extract an image’s transferSize, encodedBodySize, decodedBodySize within javascript:

Below is the code to access size information for all the imgs on a page (see the caveat to all below):

var imgElems = document.getElementsByTagName('img');
for ( var i=0, len = imgElems.length; i < len; i++ ) 
{
    var url = imgElems[i].src || imgElems[i].href;
    if (url && url.length > 0)
    {
        var iTime = performance.getEntriesByName(url)[0];
        console.log(iTime.transferSize); //or encodedBodySize, decodedBodySize
    }
}
  • Make sure you run the above code after document onload (to be sure images are loaded)
  • Due to CORS, timing information for images coming from a different domain may not be available (unless the different domain’s server has set Timing-Allow-Origin HTTP response header)
  • Be sure resource timing api is available for the browser(s) you are targetting : http://caniuse.com/#feat=resource-timing
  • Make sure you get a grasp of the difference between transferSize, encodedBodySize, decodedBodySize to be sure you use the right size attribute.

More Related Contents:

  1. Programmatically change the src of an img tag
  2. Pass vars to JavaScript via the SRC attribute
  3. How to store a byte array in Javascript
  4. How to set same value for all the text fields with same name attribute using Javascript?
  5. How to check the value of input [closed]
  6. How do I check whether a checkbox is checked in jQuery?
  7. How to go to a specific element on page? [duplicate]
  8. Can Javascript read the source of any web page?
  9. Video auto play is not working in Safari and Chrome desktop browser
  10. Chrome counts characters wrong in textarea with maxlength attribute
  11. How to add a element to the DOM and execute its code?
  12. Node.js can’t create Blobs?
  13. Programmatically selecting text in an input field on iOS devices (mobile Safari)
  14. Can we refer to JavaScript variables across webpages in a browser session?
  15. How to add Drop-Down list () programmatically?
  16. Javascript Error Null is not an Object
  17. Check if window is already open window.open
  18. How to get ID of button user just clicked? [duplicate]
  19. Setting a button’s value using javascript
  20. I want to show list items as 2 or more columns (dynamic alignment)
  21. How to create dashed circles with uniform spacing?
  22. Refresh Page for interval using js
  23. JavaScript localStorage object broken in IE11 on Windows 7
  24. Find selected item in Datalist in HTML
  25. Save json string to client pc (using HTML5 API)
  26. Getting value from table cell in JavaScript…not jQuery
  27. reading innerHTML of HTML form with VALUE attribute (& its value) of INPUT tags
  28. Phonegap Application text and layout too small
  29. How to pass text in a textbox to JavaScript function?
  30. Communicate between two pages / tabs

Leave a Comment