CODEWITHSUNDEEP
htmlimageoptimization
FastAl
FastAl

Reputation: 6280

Size limit or threshold for inlining images in html

I have a business application which is usually used on the desktop in the field by our company's reps over their broadband connections to our extranet.

It routes the building of most HTML IMG tags thru a common spot. Currently I have an IF statement that if the image file size is <25k, I inline it as base64 in the src attribute. Otherwise, it references the file from the server.

Is this the proper size cutoff? 25k seems to work OK for me, and while I realize many sizes will technically work, I am asking for efficiency and optimization purposes.

Upvotes: 0

Views: 240

Answers (1)

Rick James
Rick James

Reputation: 142306

Approach the problem this way... By inlining the images, nothing shows to the user until all the HTML and inline images are downloaded to the browser. A subtle, but useful tactic in building a web page is to get something showing very fast. Then, let other things come later.

If there are lots of thumbnail-sized images, then inlining will make the page load more smoothly, if belatedly.

If images are fetched later, they are loaded only 2 at a time (or at least that used to be the convention). And they tend to be loaded 'randomly'. This means that a lot of non-inline images will pop into place randomly. And if you don't have width= and height= in the img tags, the page will move around as the image sizes are eventually discovered. This, in my opinion, is a "bad user experience". So, regardless of how you encode the images, provide those size parameters.

Long ago, I pondered your specific question, but did not come to a solid answer. Anyway, improvements in technology continually change what the 'right' answer is. And variations of user browsers, hardware, and internet connectivity probably make for a wide variation in user-experience. That is, there no 'perfect' answer.

My gut says that 25K is too high for the cutoff.

Another thing your Company might want to do is invest in better delivery of images. Long ago, Akamai was a company providing just that. It cached images and tried to keep the copies geographically near the end-user.

Upvotes: 1

Related Questions