I have a CSS file and an icon set which is referenced from that CSS file. The 500 icons are around 200k altogether, so I think inlining them into the CSS file at wherever they are referenced would not increase used bandwidth, and significantly decrease the amount of requests sent to the server.
Does anyone here know a tool or script to automate the replacement of
url('images/....png')
with
url(data:image/png;base64,....)
Perhaps there is already a tool that automates this?
Otherwise I'll have to write my own regexp. Is a bash script the way to go?
if you really want to decrease the amount of requests then look for a way to convert all the icons into a sprite! it is basically all your images pasted on to one single image file with a css file which has position of all the images have a look at glyphicons:
http://getbootstrap.com/components/
usage of sprite will not reduce the size but will surely reduce the number of requests being sent to server as the client will download one single big image, which will have all the icons and according to css properties will show the relevant icons
use this for generating sprites
and i would never recommend to use inline styling. If needed should be used minimally. Because it does slow down the rendering