Latest in Images
Home → Images
Automatically serve .webp or .avif with Node.js based on browser request headers.
Let's chew down another issue: we have a /public folder with images, and depending on the browser we want to serve a WEBP or AVIF to save bandwidth and decrease page load time.
We will go through steps required by setting up a simple Express (Express.js) server. The setup will be very minimal, however, it will be a fully working server. Let's start by creating a project folder and creating an empty package.json with my favorite
We will go through steps required by setting up a simple Express (Express.js) server. The setup will be very minimal, however, it will be a fully working server. Let's start by creating a project folder and creating an empty package.json with my favorite
echo {} > package.json. After that, add the...Convert HTML and CSS to SVG
You can convert HTML and CSS to SVG directly in a browser. With JavaScript. And JSX.
The developers of Next.js created this neat library called Satori, which allows to convert JSX elements with style properties into SVG. As a result, this gives amazing possibilities:
You can generate HTML previews. For example, you can generate a simple JSX element on the server, convert to SVG, and then later convert it to JPG or...
The developers of Next.js created this neat library called Satori, which allows to convert JSX elements with style properties into SVG. As a result, this gives amazing possibilities:
You can generate HTML previews. For example, you can generate a simple JSX element on the server, convert to SVG, and then later convert it to JPG or...
How to create a placehold.it image generator clone with Node.js?
What if I tell you generating images is actually an easy task, and you can create a simple placehold.it clone with only a bunch of lines.
Installing dependencies Let's start with the basics. We will start with express and sharp and create a very very simple setup:
Installing dependencies Let's start with the basics. We will start with express and sharp and create a very very simple setup:
import express from 'express'; import sharp from 'sharp'; const port = 8000; const app = express();