Image tools for developers: WebP, srcset, Base64, EXIF

Convert to WebP, inspect images, and generate srcset

The modern stack will not save a 4 MB PNG in a hero. Lighthouse will mention it. Users will not. They will bounce. The correct sequence is boring: know what you have, size it to the layout, pick a format the browser likes, give the browser more than one width, and stop shipping a camera’s home address in EXIF.

Image inspector reports type, dimensions, megapixels, and bytes per pixel. If bytes per pixel are high on a photograph, you are looking at an unwise PNG or an uncompressed JPEG. Convert to WebP or AVIF and keep a JPEG sibling. If the layout is known, picture tag generator cuts width variants and writes the tag with those filenames. That last part matters. Srcset copied from a blog post with 800w and 1600w is a lie unless those files exist.

Remove EXIF and GPS from photos

JPEG from a phone often includes GPS, camera model, and a thumbnail. Some CMSs pass it through. Remove EXIF from an image re-encodes the pixels and leaves the trail behind. Do this before a user-generated photo goes onto a public profile.

Image to Base64 and round image corners

Image to Base64 is for icons you would otherwise request before CSS arrives. It is not a transport for blog images. Round image corners bakes a circle or a radius into a PNG when CSS mask support is not enough - emails, some PDFs, some older WebViews.

When you automate a pipeline, use a CLI. When you are in a ticket with three screenshots and a stubborn LCP, this tab is faster than installing anything. Compress and resize remain in the main toolkit because developers need them as often as everyone else.

Generate an HTML picture tag with srcset

Generate widths on the picture tag page so filenames match downloads. Then host those files. Lying in srcset is worse than a single img.

<picture>
  <source type="image/avif" srcset="hero-800.avif 800w, hero-1600.avif 1600w">
  <source type="image/webp" srcset="hero-800.webp 800w, hero-1600.webp 1600w">
  <img src="hero-1600.jpg" srcset="hero-800.jpg 800w, hero-1600.jpg 1600w"
       sizes="(max-width: 800px) 100vw, 800px"
       width="1600" height="900" alt="Pine forest at golden hour"
       decoding="async">
</picture>

Inspect image size and type in the browser

If you already have the File object, the browser knows dimensions without a round trip. That is what the inspector wraps. The same idea in a few lines:

const img = new Image();
img.onload = () => {
  console.log(img.naturalWidth + 'x' + img.naturalHeight, file.type, file.size);
};
img.src = URL.createObjectURL(file);