Utilize Express to deliver dynamically generated or stored images

My latest project is an innovative image delivery application that can serve images and dynamically resize/change their extension as needed.

For the routing, I utilized Express and Sharp for processing the images.

One challenge I encountered is high CPU usage in production. I believe this may be due to returning images with res.sendFile() after saving them to the filesystem.

Currently, my workflow looks like this:

  • I check if the image with the specified parameters is already saved on the filesystem (fs.access())
  • If it exists, I use res.sendFile to send the local path of the image
  • If it doesn't exist, I generate the image using Sharp, save it on the filesystem, and then use res.sendFile to send the generated image's path

I have learned that res.sendFile can be resource-intensive and not ideal for performance.

So, I am looking for alternative ways to handle image delivery. Here are a couple of solutions I found during my research:

  • Instead of using res.sendFile to send saved images, I can use res.send() to send the buffer created by Sharp when generating a new image
  • For serving static files like saved images, I could possibly utilize the express static middleware (link: http://expressjs.com/en/starter/static-files.html), but I need to figure out how to dynamically call it and provide the image path based on the parameters in the request URL.
javascriptexpresssharp

Answer №1

One way to optimize the performance of serving images in your Node.js app is by utilizing a reverse proxy like Nginx. The static middleware, which uses the same methods as res.sendFile, may not provide significant improvements in performance.

To achieve better performance, you can implement redirects within your Node.js app that point to a location where the reverse proxy will serve the images. For example, redirect requests for /imageID/toto.jpg?quality=80 to /static-images/imageID_80.jpg.

// ...

const imageName = ${req.params.imageId}_${req.query.quality}.jpg

if (!(await pathExists(imageName))) {
  await generateFileUsingSharp(req.params.imageId, req.query.quality)
}

res.redirect(`/static-images/${imageName}`)

Next, configure Nginx to serve files from the /static-images directory:

location /static-images {
  alias /var/www/generated-images;
}

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Breaking down the results of a SQL query into an array

I'm looking to implement a paging feature for my query results where I display the first 51 records and store the rest in an array for later retrieval. While I can successfully show the initial 51 results on the page, I'm struggling to figure out ...

javascriptsqlarrayssql-serversql-server-2014

Tips for managing open and closed components within a React accordion and ensuring only the clicked component is opened

Unique Accordion component: const CustomAccordion = (props: AccordionProps) => { const { label, levels, activeId, id } = props const [isExpand, setIsExpand] = useState(false) const onPress = useEvent(() => { setIsExpand( ...

javascriptreactjstypescriptreact-hooks

Ensuring a fixed table with vertical scrolling only, no horizontal scrolling, while scrolling in either direction

I'm working with an HTML fixed design that contains a center-aligned table with extensive data scrollable both vertically and horizontally. To address the issue of keeping column headers visible when scrolling vertically, I used jQuery's clone() ...

javascriptjqueryhtmlcssposition

When Django encounters a request with the method "POST," it mistakenly interprets it as a "GET" request

I recently encountered a problem with an AJAX request that I haven't been able to resolve. Here's the code snippet in question: <script type="text/javascript"> $('#activeform').on('submit', function(event){ ...

javascriptajax

Moqui problem with AJAX requests

Encountering an issue with the Rest call to Moqui while running locally... The error message received is "REST Access Forbidden (no authz): User null is not authorized for View on REST Path /moqui/users". Additionally, the web console displays error code 4 ...

javascriptajaxrestauthenticationmoqui

Node.js encounters a conflict between route names and directory names

Can you use the same name for both a route and a directory in a Node.js project? For example: require("./test")(router); And inside the test.js file: app.get("/test", function(req, res) {}); Also, test is a directory in the same project. When attempti ...

javascriptnode.js

Tax calculator that combines item prices and applies tax multiplication

Struggling to crack the code for my calculator. Despite consulting my textbook, I can't seem to figure out why it won't calculate properly. Any advice or tips would be greatly appreciated. <html> <head> <title> Total Calculator ...

javascriptdom-events

Utilizing BEM Class Names in React

How can I utilize the Post component in a way that assigns unique classes to new and old posts following BEM recommendations? Assign a unique className to every element Avoid cascading dependencies like (.posts-new post or .posts-old post) Each component ...

javascriptcssreactjs

An issue has arisen when trying to fetch and parse data using React and JavaScript

I am currently facing some challenges with fetching data from an API and displaying it using React. I have encountered errors and I am struggling with parsing the JSON response from the API. I believe that converting the response into an array may help res ...

javascriptreactjs

Display a div element just once during each visit to the website

Having some trouble showing a div element only once when the user is on the site. I've checked out various solutions, but none seem to do the trick. Could it be that the code I'm using isn't functioning properly? Some parts of it were borrow ...

javascripthtml

What is the method for getting my character to jump in Phaser 3?

I'm a beginner in Phaser 3 and I'm facing an issue with my character's jumping mechanic. Here is the code snippet I'm currently using: create() { this.player = this.physics.add.sprite(50, 380, 'idle'); this.player.set ...

javascriptphaser-framework2d-games

html<script src="" and causing a redirect when button is clicked

My login.html page for logging in can be found in the design folder. <html> <head> <title>Login Page</title> <script src="../Script/login.js"> </script> </head> <body> <h3> Login</h3> ...

javascripthtmlsrc

Got a value of `false` for an attribute `closable` that is not meant to be a

Here's the code snippet I have: import { Modal } from "antd"; import styled from "styled-components"; export const StANTModal = styled(Modal)` & .ant-modal-content { border-radius: 20px; overflow: hidden; } `; And ...

javascriptreactjstypescriptantdstyled-components

Sending table data with files or input string data to the server in .NET ASPX web forms is not allowed

When the add button is clicked, the product type, name, and file are added to the table. The variables are declared globally. document.getElementById("addBtn").addEventListener("click", function () { var entryExists = false; var documentName = doc ...

javascriptc#asp.net.netwebforms

Avoid duplication of choices on two checkboxes containing the same options

I have two select boxes where I am trying to prevent duplicated values (options) in each select box. Both select boxes start with the same options list, but once an option is selected in selectA, it should no longer be visible in selectB, and vice versa. T ...

javascriptjquerycsshtmljquery-mobile

Can you see through the blank canvas?

Is there a way to detect if the canvas has been completely erased in a scratch card created using JS and canvas? I have implemented two images stacked on top of each other, with the user able to "erase" the image on top. I am looking for a method to trigg ...

javascripthtmlcanvasdom-events

Ignoring unhandled promise rejections and ERR_HTTP_HEADERS_SENT issues

I am currently working on setting up a REST API server using Node.js Express and MySQL. The structure of the requests is outlined below: Here is the route definition: router.get('/api/courseDetails/:id', async (req, res) => { try { ...

javascriptnode.js

Can you identify this pattern: .on('eventName', function(){...});?

Do you recognize the .on('eventName', function(){...}); pattern commonly used in jQuery, socket.io, peerjs, and other libraries for event handling? What is this pattern formally called? I am interested in understanding the underlying structure, ...

javascriptjquerynode.jsecmascript-5

Why does a React error keep popping up when trying to set a background-image in my CSS?

I've been working on my React project and I can't figure out why I keep encountering this error. I double-checked the URL paths and made sure they were named correctly, yet the error persists. Here is a snippet of my CSS: background-image: url ...

javascripthtmlcssreactjs

How can I use Jquery to load a specific element by its id?

jQuery("#menu li a").click(function(){ var url = jQuery(this).attr("href") jQuery(".wide_main").html("<p>loading...</p>"); jQuery(".wide_main").load( url + '#main_content'); }); I am facing an issu ...

javascriptjqueryajax