coryd.dev-eleventy/src/posts/2024/handling-images-with-b2-netlify-image-cdn-hazel-mountain-duck.md

date	title	description	tags
2024-05-01T09:00-08:00	Handling images with B2, Netlify's image CDN, Hazel and Mountain Duck	I've spent a while hosting and fetching images from bunny.net when my 11ty builds. I had multiple pull zones configured and wanted to leverage bunny.net's transforms, but the pricing of $15/month per zone wasn't feasible.	development javascript netlify backblaze macOS

I've spent a while hosting and fetching images from bunny.net when my 11ty builds. I had multiple pull zones configured and wanted to leverage bunny.net's transforms, but the pricing of $15/month per zone wasn't feasible.

My site is hosted on Netlify and they've had an image CDN in beta for a bit and recently made it publicly available. Rather than route requests to bunny.net through yet another CDN, I decided to drop my images into a B2 bucket over at Backblaze. I already use B2 for backups, raw storage and a few other things, so this was also an opportunity to consolidate some storage.

I upload new images to my site fairly regularly for display on my now page (and a few other pages) — the bulk of the images are artists and albums I use to build charts of my listening habits.

To simplify file uploads to B2, I mount the bucket for my site using Mountain Duck. This allows me to access, rename and update images quickly through Finder. It also allows me to automate image naming and uploading using Hazel.

My music charting feature relies on JSON maps of artist and album metadata — if a new artist or album isn't present in either, it assumes that the image it needs is in the format of artist-name.jpg or artist-name-album-name.jpg. I store the canonical copies of these image files in a separate GitHub repo and have Hazel watch the artist and album directories contained therein. It renames the files to match the aforementioned format, strips characters that typically break URLs and copies them to my mounted B2 Bucket.

---

Within the Netlify _redirects file for my site I have the following rule set:

# media
/media/* https://f001.backblazeb2.com/file/coryd-dev/:splat 200

I have the bucket in my source as it is public but the actual directories don't list their contents. Rewriting the URL to /media/ keeps image references a bit tidier.

You'll also need to set an array of allowed domains that you intend to source images from in your netlify.toml:

###
# IMAGES
###
[images]
  remote_images = ["https://f001.backblazeb2.com/file/coryd-dev/.*", "https://image.tmdb.org/.*", "https://books.google.com/.*"]

I'm primarily leveraging my B2 bucket, but also use the The Movie Database for TV/movie posters displayed on my now page and fetch book covers from Google books.

When I access an image, it's then done via Netlify's image CDN, allowing me to set optimal dimensions, fit and format: https://coryd.dev/media/albums/IMAGE.jpg. I apply similar parameters to book and TV/movie images to preserve a consistent aspect ratio, without coercing these images into a consistent shape with CSS¹.

Once I have my Netlify CDN URLs, I still process them via an 11ty image shortcode:

import Image from '@11ty/eleventy-img'
import htmlmin from 'html-minifier-terser'

const stringifyAttributes = (attributeMap) => {
  return Object.entries(attributeMap)
    .map(([attribute, value]) => {
      if (typeof value === 'undefined') return '';
      return `${attribute}="${value}"`;
    })
    .join(' ');
};

export const img = async (
  src,
  alt = '',
  className,
  loading = 'lazy',
  sizes = '90vw',
  formats = ['avif', 'webp', 'jpg', 'jpeg']
) => {
  const widths = [80, 200, 320, 570, 880, 1024, 1248];
  const metadata = await Image(src, {
    widths: [...widths],
    formats: [...formats],
    outputDir: './_site/assets/img/cache/',
    urlPath: '/assets/img/cache/'
  });

  const lowsrc = metadata.jpeg[metadata.jpeg.length - 1];

  const imageSources = Object.values(metadata)
    .map((imageFormat) => {
      return `  <source type="${
        imageFormat[0].sourceType
      }" srcset="${imageFormat
        .map((entry) => entry.srcset)
        .join(', ')}" sizes="${sizes}">`;
    })
    .join('\n');

  const imageAttributes = stringifyAttributes({
    src: lowsrc.url,
    width: lowsrc.width,
    height: lowsrc.height,
    alt,
    class: className,
    loading,
    decoding: 'async',
  });

  const imageElement = `<picture>${imageSources}<img ${imageAttributes} /></picture>`;

  return htmlmin.minify(imageElement, { collapseWhitespace: true });
};

All of this yields automated image naming, easier uploading, properly sized, formatted and cropped images that are then used to generate <picture> and <img … /> elements in the final markup.

UPDATE: I'm currently giving some thought to moving image optimization to the CDN altogether and serving the resulting .webp file. This simplifies my markup and yields build times down from 2+ minutes to less than or just about one.

---

1. I could display them at the source aspect ratio, but I prefer the visual consistency this approach allows. ↩︎