CODEWITHSUNDEEP
javascriptreactjsimagenext.jsbase64
Aashiq Otp
Aashiq Otp

Reputation: 85

Performance side of using base64 encoded images in NextJS

I am creating a full screen slider which can contain both images and videos.These medias are loaded from Firebase as the client needs to updated this through a control panel. With getStaticProps i am able to fetch the urls from server and pass it to the slider component, However there is some delay and glitches in the smoothness of slider as we are only passing the download url of media to the slider component.

So with my little knowledge i am thinking to convert the url to base64 from getStaticProps itself and pass it to slider.

Mostly the images will be around 2MB and videos will be 5-10 MB.

1) I know that base64 will take much more storage but as i am doing it in the server at build time only will this cause any other side effects when user visits the site? or is this a bad practice?

2) If the above one is ok then i am getting some warning in console from getStaticProps like
Warning: data for page “/” is 150 kB, this amount of data can reduce performance. is it ok to avoid this? or do i need to write the encoded to some JSON file and read it from there?

Thanks in advance.

Upvotes: 0

Views: 4402

Answers (1)

Ramakay
Ramakay

Reputation: 3135

I think you partially answered your question

Mostly the images will be around 2MB and videos will be 5-10 MB.

  1. I know that base64 will take much more storage but as i am doing it in the server at build time only will this cause any other side effects when user visits the site? or is this a bad practice?

In general, base64 is for smaller sized images is preferred. Because you do not specify how many images and videos they can upload - you could eventually end up with a large html as more and more assets are uploaded. Remember base64 is not a compression mechanism per se

Other options you should consider

  1. Use next/image and built in image optimization - This even works for remote images.
  2. Load via an image transcoding service like imgix or cloudinary

Upvotes: 2

Related Questions