A big sprite with lot of icons seem like better solution to me. Using JS to load a lot of images doesn't sound so "natural" compared to a 20-30KB less data benefit of it.

40 256x256 icons are 140KB but a webp sprite with 40 40x40 icon at most 35KB. All icons will be displayed instantly with a sprite.

I takes less than 100ms to generate this sprite but it's better to cache result. When sprite is generated & saved, update shortcut's modified time. When serving this sprite, compare date in the sprite filename with last update time. If shortcut is newer, update the sprite.

• Use uncompressed TIFF instead of BMP. BMPs aren't transparent...
• Make sure same sprite is not regenerated all the time. Create a daily/weekly counter for it and display it in /dev
• You'll need to create a field in shortcut table called 'iconSpriteFile'
• Sprite image name will use webp extension. jpg version will be founded by replacing extension
• Preload: Add sprite to "link" header.
• Make sure you change filename when sprite file updated - you need to avoid ezoic cache.
• When a program is added, update all of shortcut's modified time in shortcuts table.
• When a program's shortcuts edited, update newly added (or if not possible, all) of shortcut's modified time in shortcuts table.
• Sprite image will be transparent webp, but a opaque jpg version will be saved for Safari and iOS.
• Would this need a fallback to non-sprite images? You can test webp support with modernizr.
• Download all icons on website and generate sprites locally. Or else it'll be too much work for server, when Google Crawler scans pages.
• If create sprite & css returns exception, fall back to normal <img> ?

There are about 4000 shortcuts. If average sprite size is 20KB, these files will only take 78MB of space. So it's not a waste of space definitely.

This can be guide to generating inline CSS in C#
https://www.w3schools.com/css/css_image_sprites.asp

On hold for now. HTTP2 makes sprites not so necessary. Anyway I almost finished this and may use it.