S3 Image resizer - an alternative way to handle thumbnails

Kirill Zhirnov — Mon, 20 Mar 2023 17:46:08 +0000

It is a very common approach to store images on S3 - it is cheaper and helps you to forget about the pain of continuously adding space on your server. However, there is no solution out of the box to convert, crop, resize, and optimize images. If you try to search for a solution - you could probably find a "Lambda function" approach, mostly for AWS and some paid services.

Let me introduce an alternative way - a free, open-source solution to resize and optimize images on the fly from any S3 provider (not just AWS): github.com/kirill-zhirnov/s3-image-resizer

It is a web service, which resizes images by query params, e.g.:

http://localhost:3000/thumb/<local path on the S3>?mode=scale&max-size=500

Generates a scaled thumbnail with 500px size. The service is based on Node.js (Express/Typescript) and Imagick. All available query parameters could be found on the GitHub page.

On a request, the service fetches an image from S3 and generates a thumbnail with Imagick (executes CLI). The resulting image can be stored for caching purposes.

This approach:

Handle correctly images with Exif orientation (e.g. a photo saved in the landscape, but portrait should be used)
Can resize images of any size (even a big one, without memory limit issue)
Works fast
Can be easily extended
Works with any S3-based hostings

The service can be launched with Docker - it already has all the configs - just create a .env file and run.

The project was created as a part of boundless-commerce.com project. If you like the idea - please support us with a start on GitHub:

NextJS Ecommerce Template

Next.js E-commerce StarterKit (2022)

Kirill Zhirnov — Sat, 22 Oct 2022 15:59:58 +0000

Intro

Creating an e-commerce website might look like a simple task, but in fact, it is a pretty complicated one: you need to find a Backend, an API, organize product listings on the Frontend, a catalog with hierarchy, filters, and search, a cart and a checkout. And don't forget about image resize. And all these parts should be done in a modern way, e.g. with Next.js and SSG.

The solution

Ready to use Next.JS E-Commerce Starter kit!

https://github.com/kirill-zhirnov/boundless-nextjs-sample
Demo: https://blank.demos.my-boundless.app/

There are 2 ready to use themes:

https://github.com/kirill-zhirnov/boundless-marsfull-theme/
Demo: https://mars.demos.my-boundless.app/

https://github.com/kirill-zhirnov/boundless-moon-theme
Demo: https://moon.demos.my-boundless.app

The checkout is a standalone component, which can me easily customized: https://github.com/kirill-zhirnov/boundless-checkout-react

Themes use BoundlessCommerce (https://boundless-commerce.com) as a backend. There is an absolutely free tariff plan which covers small business needs.

These Next.JS sites can be easily deployed to Vercel or Netlify. If you want a longread about creating NextJS Ecommerce website - please visit our blog (I don't want to do a copy/paste :)): https://boundless-commerce.com/blog/how-to-create-a-nextjs-e-commerce-website

And if any question - please contact us - we are happy to help!

DEV Community: Kirill Zhirnov

S3 Image resizer - an alternative way to handle thumbnails

Next.js E-commerce StarterKit (2022)

Intro

The solution