Adding Missing Attributes to Markdown Images with Rehype

• Reduce image dimensions no larger than necessary for the user’s viewport
• Use the best image format available in the user’s browser
• Avoid Cumulative Layout Shift (CLS) when the page loads by immediately rendering a placeholder that matches the dimensions of the incoming image

Why Cloudinary images instead of Astro/Gatsby/Eleventy images?

• Build times remain as fast as possible (in my experience with Gatsby, image processing via sharp greatly increased site build times)
  • I have a Likes page with hundreds of images, so waiting minutes for that page to render every time I push a copy update is not what I want
• Smaller images delivered
• Generous free tier
• Should I use CloudFlare images instead Is it cheaper like Kent C. Dodds says?
  • Should I use their hosting as well?

Creating a Rehype plugin

• Builds a Cloudinary URL
• Renders the appropriate HTML markup based on whether a caption is included
• Pulls image dimensions from Cloudinary?
• Pulls image alt text from Cloudinary?
• Accepts just the image nickname/id and doesn’t require the full URL to be entered in the shortcode?
• Throws a build-time error if no image by that name is found in Cloudinary?
• Don’t include dpr_2.0 — srcset works better with just supplying more images for multiple DPRs and let the browser automatically request the right one
  • I was confused about why the browser was requesting the images it was until I removed dpr_2.0

Inbox

• ⭐️ ELEVENTY, IMAGES AND CLOUDINARY
  • use fl_getinfo transformation to get image url metadata as json
    • post includes example url and json response
    • post includes a simple shortcode for fetching the info and populating the img tag with width, height and multiple image sizes
    • store my cloudinary account name as an env var
    • shows srcset and sizes example with three preset widths
• Building an awesome image loading experience ✍️ • Kent C. Dodds
  • Includes more examples of srcset and sizes approaches (sizes appears to be helpful to set different in each template based on how wide the template displays that image)
• Optimize Media with Cloudinary to Deliver Smaller and Performant Images
  • Clear beginner walkthrough from no optimization to using basic cloudinary f_auto and q_auto urls
• https://cloudinary.com/blog/responsive_images_guide_part_2_variable_image_resolution
  • explains how to use srcset and sizes (specifically with w units) to generate transformations with the correct dimension and pixel density
• JavaScript Image Transformations • Cloudinary
• https://cloudfour.com/thinks/responsive-images-the-simple-way/
• https://www.smashingmagazine.com/2014/05/responsive-images-done-right-guide-picture-srcset/
• https://web.dev/learn/design/responsive-images/
• ⭐️ https://cloudinary.com/documentation/admin_api#get_details_of_a_single_resource_by_public_id
  • used this

Placeholders (follow up feature)

• An Introduction to Progressive Image Rendering
  • I’ll go the solid colour route
  • Lays out options for what to show until the image loads
• Cloudinary LQIP and Lazy Loading Best Practices

Further reading

Inbox

• Markdown & MDX 🚀 Astro Documentation
• Optimizing Cloudinary Images in Markdown Files - DevJams Episode • YouTube video by Brad Garropy
  • rehype-cloudinary-image-size/src/rehypeCloudinaryImageSize.ts at master · bradgarropy/rehype-cloudinary-image-size • rehype plugin to add width and height properties to Cloudinary images
    • covered in video above
• Cloudinary DevJams Live Stream: Elevating User Experience with Cloudinary, Markdown and Deno’s Fresh
  • great code examples of an image component that assembles Cloudinary URLs and includes HTML optimizations
  • doesn’t fetch any metadata from Cloudinary, just hard-codes it all in the markdown post and then assembles the URL in the component
  • in markdown, passes extra attributes by appending key:value pairs at the end of the title after a ”$$”, like this: ![alt text](image.jpg "title $$ key:value")