Stopping “Dev Only” Assets in their Tracks

This is a novel approach to solving a problem I’ve others mention on more than one occasion.

All the various W3C html specs mandate a value for the src attribute of the tag. The W3C spec does not, however, specify that said value must be URI. Rather, it may be the actual encoded MIME data of the image file itself.

It’s a good way of reducing the number of orphaned files we have to worry about as one of the primary causes of the file structure expansion is the propagation of image files that are discarded during the development process.

I used it here because this is an ideal example of such an instance; I have, however, reverted the value of the src attribute from MIME data back to a URI pointer. Sorry for not including an explanation; I didn’t realize it, but this must be an obscure subject. Please accept my humble apology for any resulting confusion.

I’ve included below the encoded MIME data for reference.

<img  src="data:image/jpg;base64,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" />

It also helps me keep perspective on how big the image data is. Helpful for mobile browser development.

Published by

Tom Cornyn

I'm just a regular guy. I eat tires.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s