squoosh VS go-unsplash

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/

Images: Unsplash

Reference links: Unsplash, Pexels, Burst, The Stocks, Pixabay

Replace images in any format. Download free images from unsplash.

We will use image files for this carousel. I downloaded my images. You can find sample images from Unsplash and download or copy their links for your practice. Below is the HTML code:

unsplash.com

Unsplash - Beautiful free images and photos.

You can find attractive images from stock sites (ex. https://unsplash.com/) as I do. Place them cleverly by your key points (especially when they closely relate to the content), and you have more of a chance of getting readers to read full articles.

Image stocks, such as Pexel (free) or Unsplash (Free)

From the code, we managed to generate a rectangular card with a play button (images sourced from Unsplash). Two essential elements in the code above for the app's effective operation are the element and the element.

In the root of your project, create a new folder called images and add some images. You can use the images from the example project on GitHub or you can find license free images on unsplash.