squoosh VS sharp

Image optimizer: Squoosh your images for better performance

I'm increasingly building entire functional prototypes from start to finish using Claude 3.5 Sonnet. It's an amazing productivity boost. Here are a few recent examples:

https://tools.simonwillison.net/image-resize-quality is a tool for dropping in an image and instantly seeing resized versions of that image at different JPEG qualities, each of which can be downloaded. I used to use the (much better) https://squoosh.app/ for this, but my cut-down version is optimized for my workflow (pick the smallest JPEG version that remains legible). Notes and prompts on how I built that here: https://simonwillison.net/2024/Jul/26/image-resize-and-quali...

django-http-debug - https://github.com/simonw/django-http-debug - is an actual open source Python package I released that was mostly written for me by Claude. It's a webhooks debugger - you can set up a URL and it will log all incoming requests to a database table for you. Notes on how I built that here: https://simonwillison.net/2024/Aug/8/django-http-debug/

datasette-checkbox is a Datasette plugin adding toggle checkboxes to any table with is_ or has_ columns. Animated demo and prompts showing how I built the initial prototype here: https://simonwillison.net/2024/Aug/16/datasette-checkbox/

https://tools.simonwillison.net/gemini-bbox is a tool for trying out Gemini 1.5 Pro's ability to return bounding boxes for items it identifies. You'll need a Gemini API key for this one, or take a look at the demo and notes here: https://simonwillison.net/2024/Aug/26/gemini-bounding-box-vi...

https://tools.simonwillison.net/gemini-chat is a similar tool for trying out different Gemini models (Google released three more yesterday) with a streaming chat interface. Notes on how I built that here: https://tools.simonwillison.net/gemini-chat

I still see some people arguing that LLM-assisted development like this is a waste of time, and they spend more effort correcting mistakes in the code than if they had written it from scratch themselves.

I couldn't disagree more. My development process has always started with prototypes, and the speed at which I can get a proof-of-concept prototype up and running with these tools is quite frankly absurd.

Online Converters: Websites like Squoosh or Convertio allow you to easily convert images to WebP.

Use an image conversion tool or software like Photoshop, GIMP, or an online converter (e.g., Squoosh) to convert your PNG or JPEG images to WebP format.

Squoosh

This ensures security for sensitive content. (https://squoosh.app/)

Image optimizer: Squoosh your images for better performance

Here's another handy tool that I use: https://squoosh.app/

If necessary, you will need to return it as an image by itself. For that, we can use the sharp to handle it for yourself. See the example below:

showing this error in deploy: Could not load the "sharp" module using the linux-x64 runtime Solve: package downgrade in "0.32.6" version package link: https://www.npmjs.com/package/sharp/v/0.32.6

When sharing content on social media platforms, it's essential to have visually appealing images that are properly sized. Let’s explore how we could automatically resize images for Open Graph and Twitter card previews. We’ll be using sharp - a powerful and fast tool that powers the Image component from Next.js.

Last thing left is to use our new upload function in our server action. Since I like to upload images in single format and have some more control over them, I will additionally use sharp library. For file name, I'll generate some random string using nanoid:

blur is a technique to blur images while reducing the file size surprisingly. blur works by enlarging the pixels of the image, which reduces the details of the image, and the number of colors also decreases, thus saving storage space. Sharp is a popular image processing library in Node.js, and it supports the blur function. After going through the blur function, the image size at this point is only a few KB, which is reasonable for an image placeholder in the article.

sharp

For simplicity, I will be generating PNGs with JavaScript/Node and the Sharp image library. Any library that can convert between pixel arrays and image files will make the process quite straightforward.

There is also a library that Next.js itself uses: sharp. It can be setup as Node.js service. I even played around a little: image-proxy-service

Sharp Documentation: Link