Save image to database

In my system there is a professional registration that has the option to save the photo of the professional too, at the moment I am doing a conversion of the photo to Base64 with Javascript in front-end and sending Pro back-end that converts to byte[] and saves in the database in a column of type bytea.

At the moment I am studying all this flow and I realized that this makes the system a bit slow because, for example, a request from front-end to back-end to get a list of Professionals ends up being slow because the JSON that comes from the back-end is very large because of the photos in Base64.

Anyone has any idea that can help me make this flow faster, some other type of conversion of the image instead of Base64 so that the JSON does not get so heavy, or some other type of conversion that I can do on my back-end to save in the bank.

Can anyone help me?

My Back-end is in Java with the Spring Boot framework. My Front-end is in Angular 7 then use Typescript/Javascript. My Banco de Dados is in PostgreSQL

Author: Vinicius Brasil, 2019-04-26

1 answers

The database is good at handling data, such as tables with multiple columns and information. File systems are good at handling files, such as images of various sizes and documents.

Saving on a file server

If you have too many images or the server has too many requests that handle the images, use an image hosting service such as Amazon S3 or Google Cloud Storage. This solution is good because:

  • your database will save only one reference for that image and not the entire image. Example: imagens.host.com/bruno/imagem123.png.
  • the front-end will no longer convert the base 64 photo to image, and yes, only upload it from an HTTP server.
  • the images will have caching, provided by the browser and by the image hosting.
  • less bandwidth being trafficked during requests.
  • the front-end will be able to assemble the entire page, with all the information from the backend, and the images can be uploaded later. This increases your SEO score and performance, as far as First Meaningful Paint is concerned.

If you opt for this solution, you can also use a tool to cut the images into several sizes, so you would have several sizes of the same image, depending on the performance of the HTTP request depending on the speed of the client connection. That's why sometimes Facebook, for example, US it delivers smaller (i.e., lower quality) images when we're on a slower internet. One of the most used tools for this is ImageMagick, which has a wrapper for Java.

Saving to database

If still yes, seen so many advantages of saving the images on an external server, which was made for files, you want to save them in your database, keep in mind:

  • the database can grow very fast if you save your images in it, decreasing your writing and reading performance
  • There are not many advantages, since there is no indexing, search, or joins in this column type

The solution would be to use the type blob, available in PostgreSQL.

 1
Author: Vinicius Brasil, 2019-04-26 18:11:14