In this article, we will build an app that uses an image compression module to compress images and display the resulting size. As bonus steps, we will add the options to communicate with a serverless function to upload the compressed file to Cloudinary or download the image to your computer.


Build an Image Compressor with Next.js

In this jam, we'll learn how to use one of HTML's responsive image features -  resolution switching to make images responsive across a range of device screens. We will be using Cloudinary to host, transform and generate different file formats and sizes of our image.

Responsive Images with Resolution Switching 

How to serve responsive images more easily using Eleventy shortcodes and  Cloudinary.

Responsive Images using Eleventy Shortcodes

In this article, we'll see how to prevent layout shifts with the Next.js Image component.

Fix Layout Shifts with Image Component

WebGL is an underlying technology for a lot of high-performance graphics and animations on the web. Probably the most famous library built on it is three.js. We're going to dive into the inner workings of WebGL just a bit to see what's happening under the hood.

Create 3D Models with WebGL

In this post, we'll look at three common problems with image optimization, and then we'll see how to solve these problems using the Next.js Image component.

How to Optimize Next.js Images

How to use virtual scrolling to load images in Angular

Image placeholders are a lightweight version of an image that gives the user the impression of a load time, which comes in different forms whether it is pixelated, vectorized, and so on before the target or original image is displayed.

Create Image Loading Placeholders

Learn how to build a responsive image carousel using the Next.js  and Cloudinary.

Animating Next.js Images With Framer Motion 

This article explains how to optimize images in React.js applications using image-webpack-loader, enhancing our application speed and providing a better user experience.

Optimize images using webpack in React

Learn how to personalize images on an event landing page in a Next.js application using Cloudinary and Uniform.

Personalize Images on Landing Page Using Next.js

In this jam, we'll take a look at two ways to audit image render sizes.