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

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

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