Back Fast as f**k boi🏃‍♂️‍➡️ cover pic

Fast as f**k boi🏃‍♂️‍➡️

2 min read
# Performance

Hi there 👋! Recently, I discovered some 💎 gems that can optimize your website’s images and videos without compromising quality!

Why Should We Optimize Images? 🤔

Small image size = ⚡ Faster website load times.

🏞️ AVIF Format

If you’re already familiar with image compression, you probably know about the WebP format, which is optimized for the web. Recently, I came across the AVIF format, and the results after compression are insane.

There’s a huge difference in image size after compression, with no noticeable loss in quality. Here are a couple of tools you can use for compression 👇:

Squoosh Tool

Squoosh is an open-source image compression tool by Google that supports a lot of formats. You can check it out here.

Here are the results of compressing an image:

Squoosh website

Sharp JS

Sharp is a popular image compression library for JavaScript. Here’s an example of how you can compress an image to AVIF format using it:

import sharp from "sharp";
import path from "path";
import process from "process";

const rootDir = process.cwd();
const inputImagePath = path.join(rootDir, "/images/profile.jpg");
const outputImagePath = path.join(rootDir, "/images/compressed/profile.avif");

try {
  const response = await sharp(inputImagePath).avif().toFile(outputImagePath);
  console.log({ response });
} catch (error) {
  console.log({ error });
}

🎥 Handbrake

Handbrake is a video compression tool that I found when trying to embed a video into my company’s website. It compressed a video from 22 MB to less than 1 MB—without sacrificing quality!

Handbrake is free, open-source, and available for macOS, Windows, and Linux. You can get it here.

Handbrake app

It comes with a lot of features:

Give these tools a try! Fun fact: The thumbnail for this blog was generated using ChatGPT.

chatGPT image generation

That’s it for this blog! Thanks for reading. Stay tuned, and peace ✌️!