Our great sponsors
-
next-optimized-images
🌅 next-optimized-images automatically optimizes images used in next.js projects (jpeg, png, svg, webp and gif).
-
SurveyJS
Open-Source JSON Form Builder to Create Dynamic Forms Right in Your App. With SurveyJS form UI libraries, you can build and style forms in a fully-integrated drag & drop form builder, render them in your JS app, and store form submission data in any backend, inc. PHP, ASP.NET Core, and Node.js.
I like your style 😎 Im using next.js for incremental static regeneration . I've been going down rabbit hole after rabbit hole regarding image optization. I found this, https://github.com/cyrilwanner/next-optimized-images .
Even if you're not using React, it'd be worth checking out their source to see how they pull that off in JS here.
There are services like imgix out there which are pretty cost effective and take a lot of the effort out of images. Aside from requesting a specific size and applying transforms in the URL parameters you can also use format=auto which will check the browser's user agent and deliver a compatible, optimized format. Super easy to setup over the top of an existing site too since they have a web folder option which means you can leverage an existing image host. Alternatively you can link it to an S3 bucket.
We tried to combine all that and make it easy to use @pixboost. We also have open source version of our image API that you can easily host behind any CDN: https://github.com/Pixboost/transformimgs
In your case a profile image would count as a single master image. You could assume maybe like 5kb for the resized image or just test yourself with their trial or using squoosh. From there you can probably work out how much it's gonna cost as the amount of profile images scale.
Related posts
- 7 Frameworks, One SAML Jackson - Your Open Source Single Sign-On Solution
- Epic Next.js 14 Tutorial: Learn Next.js by building a real-life project: Part 1
- Tutorial: Build a contact form with NextJS and BCMS
- Task tracker application using NextJS and SurrealDB
- Create Your Own Local Chatbot with Next.js, Llama.cpp, and ModelFusion