Developers July 14, 2020

What's the easiest database for images?

Jesco Wuester @jsco

I want to add an actual database to https://lookup.design.
The primary use case will be to store and organize about 500 images and give each of them a bunch of tags so I can filter them.

I thought about using an Algolia index (not easy but I am experienced using it) but am a bit hesitant because it already seems too heavy. Ideally, I'm looking for something that I (a frontend developer) can set up in under an hour and that makes uploading data very fast (as I plan on manually adding over 2k images to it over the next few weeks).

Other than an algolia index I also checked out airtable but couldn't really find a good way to organize my images in there.

Curious if any of you have a suggestion!

  1. 13

    I would not waste time storing then in a database, upload them so AWS S3 and create a references to them (like a UUID) and then just use this reference when you use them, it will be super fast and take all the load calls off your servers.

    Performance Hint - If you store hi rez images, store them in different resolutions on S3.

    Beach Image
    UUID 1122-3344-5555-66
    full - https://myimages.s3.aws.com/ 1122-3344-5555-66.full.jpg
    mobile - https://myimages.s3.aws.com/ 1122-3344-5555-66.mobile.jpg
    thumb - https://myimages.s3.aws.com/ 1122-3344-5555-66.thumb.jpg
    tableview - https://myimages.s3.aws.com/ 1122-3344-5555-66.table.jpg
    button - https://myimages.s3.aws.com/ 1122-3344-5555-66.button.jpg

    The use the upload to change the resolution so the download can use the correct size, this will fix lots of performance issues as well as make mobele very fast and help in most SEO scans.

    In general you don't have to ever delete the image, if you update or edit the image, use a new uuid this way browser and mobile cache system are super fast and never have to be flushed, very important on some browers.

    At the tags to this database that references the image so the database might look something like this:

    imageId
    imageName
    fullURL
    mobileURL
    thumbURL
    tableViewURL
    bottonURL
    tags
    created date
    created by

    1. 2

      Yeah, I'd recommend using S3 or more specialised image services like Cloudinary (which provides a lot of other features like compression and smart cropping). Storing the images in your database is often not a good idea.

    2. 1

      This is the way to do it

  2. 2

    ended up going for cloudinary to host the images + firebase to store them. I'm statically prerendering all my pages so I'll barely have any firebase requests and cloudinary scales very far for free.

  3. 2

    have you checked out cloudinary.com?

  4. 2

    Hi Jesco,

    Checkout firebase, it may be a good fit for what you're looking for.

  5. 1

    Assuming only the tags are being searched, the tags can be stored in your database along with a unique ID for the image.

    AWS S3 is a good place to store images. You could also use one of the alternatives that Azure or Google Cloud provides.

    Since you mentioned your focus area is frontend, checkout FileStack. They have an S3 integration too - https://www.filestack.com/docs/concepts/storage/

  6. 1

    Anything that can handle BLOBs should suffice, but depending on the image size, most products usually store the images as files/BLOBs and reference the path in the DB.