Simon Willison's Weblog: images

SVG to JPG/PNG

2024-10-06T19:57:00+00:00

The latest in my ongoing series of interactive HTML and JavaScript tools written almost entirely by LLMs. This one lets you paste in (or open-from-file, or drag-onto-page) some SVG and then use that to render a JPEG or PNG image of your desired width.

I built this using Claude 3.5 Sonnet, initially as an Artifact and later in a code editor since some of the features (loading an example image and downloading the result) cannot run in the sandboxed iframe Artifact environment.

Here's the full transcript of the Claude conversation I used to build the tool, plus a few commits I later made by hand to further customize it.

The code itself is mostly quite simple. The most interesting part is how it renders the SVG to an image, which (simplified) looks like this:

// First extract the viewbox to get width/height
const svgElement = new DOMParser().parseFromString(
    svgInput, 'image/svg+xml'
).documentElement;
let viewBox = svgElement.getAttribute('viewBox');
[, , width, height] = viewBox.split(' ').map(Number);

// Figure out the width/height of the output image
const newWidth = parseInt(widthInput.value) || 800;
const aspectRatio = width / height;
const newHeight = Math.round(newWidth / aspectRatio);

// Create off-screen canvas
const canvas = document.createElement('canvas');
canvas.width = newWidth;
canvas.height = newHeight;

// Draw SVG on canvas
const svgBlob = new Blob([svgInput], {type: 'image/svg+xml;charset=utf-8'});
const svgUrl = URL.createObjectURL(svgBlob);
const img = new Image();
const ctx = canvas.getContext('2d');
img.onload = function() {
    ctx.drawImage(img, 0, 0, newWidth, newHeight);
    URL.revokeObjectURL(svgUrl);
    // Convert that to a JPEG
    const imageDataUrl = canvas.toDataURL("image/jpeg");
    const convertedImg = document.createElement('img');
    convertedImg.src = imageDataUrl;
    imageContainer.appendChild(convertedImg);
};
img.src = svgUrl;

Here's the MDN explanation of that revokeObjectURL() method, which I hadn't seen before.

Call this method when you've finished using an object URL to let the browser know not to keep the reference to the file any longer.

Tags: images, javascript, svg, ai, generative-ai, llms, ai-assisted-programming, claude, claude-artifacts, claude-3-5-sonnet, prompt-to-app

Simple, Fast, and Scalable Reverse Image Search Using Perceptual Hashes and DynamoDB

2022-10-19T15:04:58+00:00

Simple, Fast, and Scalable Reverse Image Search Using Perceptual Hashes and DynamoDB

Christopher Bong provides a clear explanation of how perceptual hashes can be used to create a string representing the visual content of an image, such that similar images can be identified by calculating a hamming distance between those hashes. He then explains how they built a large-scale system for this at Canva on top of DynamoDB, by splitting those strings into smaller hash windows and using those for efficient bulk lookups of similar candidates.

Tags: images, search

Making GitHub’s new homepage fast and performant

2021-01-29T19:05:34+00:00

Making GitHub’s new homepage fast and performant

A couple of really clever tricks in this article by Tobias Ahlin. The first is using IntersectionObserver in conjunction with the video preload=“none” attribute to lazily load a video when it scrolls into view. The second is an ingenious trick to create an efficiently encoded transparent JPEG image: embed the image in a SVG file twice, once as the image and once as a transparency mask.

Tags: github, images, javascript, performance, svg

AVIF has landed

2020-09-09T16:49:24+00:00

AVIF has landed

AVIF support landed in Chrome 85 a few weeks ago. It’s a new lossy royalty-free image format derived from AV1 video and it’s really impressive—it can achieve similar results to JPEG using a quarter of the file size! Jake digs into AVIF in detail, providing lots of illustrative examples created using the Squoosh online compressor, which now supports AVIF encoding. Jake used the same WebAssembly encoder from Squoosh to decode AVIF images in a web worker so that the demos in his article would work even for browsers that don’t yet support AVIF natively.

Tags: chrome, images, webworkers, webassembly, jake-archibald

datasette-media 0.4

2020-07-28T02:22:17+00:00

datasette-media 0.4

datasette-media is my Datasette plugin for serving media (e.g. images) directly from Datasette. The first version used file paths saved in a column and served the data from disk—this new version adds the ability to serve content from BLOB columns, such as those created by the new “sqlite-utils insert-files” command. It also adds configurable support for resizing images based on querystring parameters like ?w=100.

Tags: images, plugins, projects, datasette

Squoosh

2018-11-12T23:15:34+00:00

Squoosh

This is by far the most useful example of web assembly I’ve seen so far: Squoosh is a progressive web app for image optimization (JPEG, PNG, GIF, SVG and more) which uses emscripten-compiled versions of best in breed image codec implementations to provide a browser interface for applying and previewing those optimizations.

Tags: images, web-performance, webassembly

dhash

2017-11-09T17:44:52+00:00

dhash

Python library to calculate the perceptual difference hash for an image. Delightfully simple algorithm that’s fully explained in the README—it works by scaling the image to 8x8 grayscale and then creating a bitmap representing of each pixel is lighter or darker than the previous one.

Via Ben Hoyt

Tags: images, python

I pushed 20 more of my projects to GitHub

2010-09-23T01:18:00+00:00

I pushed 20 more of my projects to GitHub

Some great Node.js stuff here from Peteris Krumins, including modules for processing PNG, JPEG and animated GIFs.

Tags: images, nodejs, png, recovered, jpeg, peteris-krumins

Placehold.it

2010-03-20T14:32:23+00:00

Placehold.it

Useful dynamic image generator for layout mockups—just drop an image in to a page pointing at http://placehold.it/300x200. Takes optional arguments for text, colour and format as well.

Tags: design, images, layout

moddims

2009-07-21T18:18:15+00:00

moddims

Apache 2 module which exposes ImageMagick as a URL-driven service, allowing you to request an image from a whitelisted host server and resize, thumbnail or alter the quality of it.

Via Dave Artz

Tags: apache, imagemagick, images, moddims, resizing, thumbnails

The GIF Pronunciation Page

2009-06-11T22:50:33+00:00

The GIF Pronunciation Page

It’s jiff. Here’s evidence.

Tags: gif, images, pronunciation

Load Windows ICO files

2009-01-17T21:48:49+00:00

Load Windows ICO files

Apparently PIL has trouble with the most recent versions of the windows .ico format (Vista now embeds PNG images in them)—this clever function deals with the differences and gives back a PIL Image object.

Tags: ico, images, pil, png, python, vista, windows

VectorMagic

2007-10-28T11:46:44+00:00

VectorMagic

Neat online tool (with a Flex frontend) for tracing bitmap images in to vectors, based on research at the Stanford AI lab.

Tags: flash, flex, graphics, images, stanford, vectormagic, vectors

Return of the HTTP overhead delay

2007-07-11T15:12:45+00:00

Return of the HTTP overhead delay

Christian proposes a neat way of improving page performance, by delaying non-essential images such as avatars until after the rest of the page has loaded.

Tags: avatars, christian-heilmann, http, images, javascript, onload, performance