Idea Bulb: Thumbnail Processor & DB

I recently skipped the Idea Bulb phase of my projects and jumped straight to creating my own tiny url: Jean.ML

All's great so far with it. I'll be writing a quick tutorial on how to create your own and link to it soon. But even though it's up and running, there's always room for improvement.

I've already begun tracking my features wishlist as issues on Github.

One feature which will be needed sooner than later will have to be a project of its own, though.

I'm currently at a coffee shop with less than favorable internet access and I can see how the "thumbnails" on my url list take forever to load. This is because they're not really thumbnails. I'm just loading the images from the meta tags and resizing them through CSS.

You'd think that SEO type people would have the decency of optimizing meta images for directory consumption. Yeah, no.

So the idea is to create a separate database and image processing workflow for turning meta images into thumbnails.

Nothing too complex. Currently I parse meta tags on the backend using the npm package metafetch. So in the midst of this processing, instead of storing the url to the "sub-optimal" image, I'll feed that image url and the tiny url id to an asynchronous process which will resize and optimize the image and store it as bit data.

Serving the image will be as simple as adding the image model to Express.js and making it so that the anything under the img/ route gets retrieved using that model.

On the image and tiny url databases I'll link to the image using the tiny url id ([id]) (so as to not add a complexity layer) as such: /img/[id].jpg

Pros

  • Faster browser load times
  • Less bandwidth usage for end-users
  • Reusability for similar projects

Cons

  • Increased data traffic / http requests for server
  • Increased storage needs for this project

I'm regarding the cons in this case as negligible since I won't be posting enough links to even reach a thousand of them any time soon, and expected traffic is moderate. Also, once I add paging to the tiny url project then the increase in requests will be rendered a moot point.

Show Comments