I was all ready to publish the previous post, but noticed that the images weren’t showing up. After inspecting the rendered HTML, I realized Contentful’s documentToHtmlString method doesn’t include a renderer for images (or assets). This method is part of the @contentful/rich-text-html-renderer package, which takes an entry’s payload—a serious amount of JSON—and maps it to rendered HTML. Looking at the documentation, I found that you can configure custom renderers to handle nodes that aren’t mapped, like assets.

For now, I set up a dead-simple renderer that assumes the asset is an image, and renders a <img> tag with the title as the alt attribute. After deploying the update, I ran Lighthouse again, and noticed that my score went down. There was a new alert indicating that I’m not using modern image formats, like webp. On a whim, I googled “contentful webp”, and discovered that Contentful has a very nice asset API, which includes specifying a format, like webp. I appended ?fm=webp to my renderer, that was that. My Lighthouse score is back up, and I’m serving webp images by default. The modern web is a beautiful thing.