×
  • Healthcare
  • Services
    • E-Commerce Website Development
    • E-Learning Platform
    • Website Development
    • Custom ERP Development
    • Web Designing
    • Job Portal Software Development
  • Casestudy
    • Digitalise your business with e-commerce website
    • ERP system for textile industries
    • All-inclusive e-learning platform custom made to meet your needs
    • Fitness case study – Online Fitness Software for DavidCosta
    • Recruitment Software And Management System To Stay Ahead Of Market Competition
  • Industry
    • Education & E-Learning
    • Textile Solutions
    • Retail Industry
    • Fitness & Training
    • Recruitment
  • Blog
  • Contact Us
  • Career
  • Skip to main content
  • Skip to primary sidebar
  • Skip to footer
☰

Knovator Technologies

Web and App Solutions

  • Services
    • First Sub Menu
      • Website Development
        Website Development To create unique online presence.
      • E-Commerce Development
        E-Commerce Development For online stores, customer-centric solutions & more.
      • E-Learning Platform
        E-Learning Platform Expert E-Learning Platform dev for online education.
    • Second
      • Custom ERP Development
        Custom ERP Development Expert ERP dev for unique business solutions, streamline operations & more.
      • Web Designing
        Web Designing For stunning online visuals, attractive, and user-friendly.
      • WordPress Plugin Development
        WordPress Plugin DevelopmentExpert WordPress plugin dev for custom functionality.
  • Casestudy
  • Industry
    • First Sub Menu
      • Education & E-Learning
        Education & E-Learning Empowering education with interactive learning experiences
      • Textile Solutions
        Textile Solutions Grow using innovative and automated ERP solutions
      • Retail Industry
        Retail Industry Optimizing the retail experience using technology
    • Second
      • Fitness & Training
        Fitness & TrainingEngaging, interactive solutions for fintess institution
      • Recruitment
        Recruitment Job Portal for efficient talent acquisition & hiring process
  • Case Study
  • Products
    • First Sub Menu
      • Recruitment
        Job Board Software Designed to adapt and grow with your needs
    • Second
      • Learning Management System
        Learning Management System Built to handle growth and adapt to changing needs
  • Blog
    • First sub menu
      • Healthcare
        Healthcare Get insights from our blogs on the new technical developments
    • Second
      • Education & E-Learning
        Education & E-Learning Discover the latest industry trends for cutting-edge education & elearning solutions.
    • third
      • Healthcare
        Recruitment Expert guidance on job portal development for an efficient and effective hiring process
  • Career
  • Contact Us
Automate the process of image resizing with @knovator/image-resizer
Free and open-source software

Home » Blog » Automate the process of image resizing with @knovator/image-resizer

Automate the process of image resizing with @knovator/image-resizer

September 16th, 2022 3 mins
Share
Automate the process of image resizing with at knovator image resizer - Knovator Technologies

Do you ever encounter a situation where a user uploads one image and you have to change its resolution to show it in multiple places? We encountered it as well so we built the @knovator/image-resizer package.

Images are available in different sizes and formats and need to be optimized to the required size to reduce the loading time. It also helps improve SEO, optimize performance, and incurs lower data costs.

Images often need to be resized or change it’s formats for the following purposes,

  • Thumbnail
  • Faster loading times
  • Low resolution for previews
  • The original high resolution for actual viewing

@knovator/image-resizer automates the process of Image resizing so that developers don’t have to write code for it.

How does it work?

let’s assume that on the server there is one uploaded image and its URL is abc.com/images/user/profile.png and it is in /public/images/user folder.

  • If the resizer package receives a request for this image with the same resolution and format, it doesn’t do anything and lets the server handle request normally.
  • If the package receives a request for an image with a different resolution or format, it generates an image in the following manner,
    • If image request is abc.com/images/user/1000x850/profile.png, then it generates image with 1000x850 resolution on /public/images/user/1000x850 folder.
    • If image request is abc.com/images/user/profile.webp, then it generates profile image in webp format at /public/images/user/ folder.
    • If the requested image already exists, it let it simply pass.
  • Package only generates images on the specified folder, and leaves them on the server to serve it. express.static is good to serve generated images.

How to use it?

@knovator/image-resizer is built as an express middleware, so NodeJS application with expressjs is good to start with.

Installation

npm i @knovator/image-resizer
# or
yarn add @knovator/image-resizer

Usage

  • It only needs the input of a public folder path and you’re ready to go,
const { resize } = require('@knovator/image-resizer');

app.use(resize(__dirname + '/public'));
  • It considers jpg, png, webp and jpeg image formats. if you want to add other formats, you can configure it as well,
const { resize } = require('@knovator/image-resizer');

app.use(resize(__dirname + '/public', { extensions: ['.png', '.jpg', '.jpeg', '.webp'] }));
  • Example usage in the app.js file with the express application
const express = require('express');
const app = express();
const PORT = 8080;
const { resize } = require('@knovator/image-resize');

app.get('/status', (_req, res) => {
    res.send('All Okay');
});

app.use(resize(__dirname + '/public')); // important to use before express.static
app.use(express.static(__dirname + '/public')); 

app.listen(PORT, () => {
    console.log(`App started on ${PORT}`);
});

If you found it useful, don’t forget to star it on GitHub, and if you encounter any issue or want to add a feature, please let us know on Github-Issues.

Thank You

Bhavik Chavda
Passionate full stack developer with specialization in JavaScript, NodeJS and ReactJS. Well versatiled in developing Full Stack Applications, Building features and Writing optimized code.

Related Articles

Faster application development with knovator/masters package Part – 2

This is Part 2 of using @knovator/masters in your application so that you don’t have to build masters from scratch...

Free and open-source software
13 Sep 2022

Streamline All Your App Development Needs With Knovator Masters Pack

Have you ever noticed re-building masters functionality every time in your new application? Yes, we also noticed ...

Free and open-source software
25 Aug 2022
X
Request a Free Quote
Expert Tech Guidance
Industry Research
Free Project Estimation
Dedicated Support
  • Max. file size: 100 MB.
  • This field is for validation purposes and should be left unchanged.

Looking to build a web or
mobile app?
Find how we helped 100+ clients in building web and mobile
apps at a low cost!

Request a FREE Quote
Whats App
Together we can do great things.

Get free technical consultation

Speak to our experts to get the customised app, a timeline for the project and the costing.

Get your app faster

Instant prototype, faster application development and delivery.

Aftercare

We will maintain your project to keep it running smoothly.
Get in touch with us
  • This field is for validation purposes and should be left unchanged.

knovator logo
1st Floor, B/45-46 Ram Krishna Society, Lambe Hanuman Rd, Near Ram Krushna School, Surat, Gujarat 395006
561 bridge ave, Windsor Ontario,
N9B 2M3, Canada
+91-94995 01397
[email protected]
[email protected]
DMCA.com Protection Status
About Us
  • Blog
  • Career
  • Contact Us
  • Privacy Policy
Our Services
  • Custom ERP Development
  • Website Development
  • E-Commerce Website Development
  • E-Learning Platform
  • Web Designing
Products
  • Job Board Software
  • Learning Management System
Industry Expertise
  • Education
  • Textile
  • Retail
  • Fitness & Training
  • Recruitment
Resources
  • How To Know If A Free WordPress Plugin Is Worth Using
  • How to Use an LMS in Your Onboarding Process
  • Kickstart Your Recruitment Business With A Seasoned Job Portal Development Company
  • How Technology Is Transforming The Education Sector

Copyright © 2023 · All Rights Reserved by Knovator Technologies