How to check if a picture on a web page is drawn faster if encoded in base64 or from SVG? Need a picture in text form.

  • Are you raster in svg code gathered? - vp_arth
  • one
    Take two large pictures of approximately the same size in bytes, paste them on the page and look at the timeline tab. - Sasha Omelchenko
  • Just where to get these pictures so that their download lasts at least some considerable time? - Vladimir Smirnov
  • 2
    @ Vladimir Smirnov svg-picture 141 KB simplemaps.com/static/demos/resources/svg-library/svgs ... ... , then take any png, convert and see that the result was about the same in KB. - Sasha Omelchenko
  • Base64 renders longer - JK_Action

2 answers 2

Plus one base64 in your html or css - minus one http connection. I think it is not necessary to explain, but just read here .

    I took two pictures, one SVG 140 KB, the other - the usual JPG, dimensions 743 × 498, Save for web 70%. Jeepeg inserted into the base HTML, skipped the base64 encoder and got the final page size of 140 KB.

    For each page I made several iterations with clearing the cache and hardware reloading. The latest data is for resized SVG images, so that they are the same as those of the jeep, because in the process there was an idea that this could somehow affect the speed.

    The results in the Developer Tools / Timeline are:

    enter image description here

    I suggest you interpret this data yourself, because this difference seems to me on the verge of inaccuracy.

    Baseline: Chrome 56, Windows 7, RAM 4, core i5.