3 min read
Optimized Image Rendering in Blog Posts
Old and Slow
When I first created this blog with Astro, I was using the traditional approach of storing my image resources in the src/assets/ folder.
Every time I needed to insert an image or publish a blog post containing pictures, I had to follow this tedious process:
- Write my blog as a markdown file
- Upload images to the assets folder
- Check if the relative paths were correct
Beyond this cumbersome routine, I also noticed that this method significantly hindered the loading speed of my website. Since the website is hosted on Vercel, images were stored as static files and transferred to users when requested. Although Vercel provides responses from servers closest to the viewer, speed tests still showed my website was loading slowly.
Faster
After researching solutions, I found that some articles suggested serving pictures using Astro Image components:
<Image />can transform a local or authorized remote image’s dimensions, file type, and quality for better control over your displayed images.
However, this solution only applied to images in my website components - those written in .astro files that could be converted to self-contained components. Since most of my content was being transformed from .md files, I was hesitant to modify the rendering engine.
This led me to explore alternative ways to optimize image loading performance.
My second approach was to implement Vercel Image Optimization. According to the official documentation, this service:
Vercel supports dynamically transforming unoptimized images to reduce file size while maintaining high quality. These optimized images are cached on the Vercel Edge Network, meaning they’re available close to users whenever they’re requested.
Following the quickstart tutorial, I successfully updated my website to use the Vercel Edge Network to serve my image files. The results were remarkable.
Faster and Faster
With the speed issue resolved, I still needed to address the tedious image management workflow.
Fortunately, I came across an article about self-hosting an image bed that aligned perfectly with my requirements. Credit to pseudoyu for this excellent resource.
The ultimate solution turned out to be Cloudflare R2 + PicList.
Self Hosting an Image Bed
Cloudflare provides a free solution for S3-compatible object storage. For free tier users, they offer 10GB per month of storage, which is more than adequate for most personal bloggers.
After a quick deployment, I had my static asset bucket up and running.
I configured my credentials in PicList, which is supported by Typora as an official plugin. Now, whenever I paste an image into the text editor, it’s automatically uploaded to my R2 bucket through PicList.
What a seamless experience!
WebP Cloud Proxy
The most exciting part came when I discovered WebP Cloud, which provides free image caching and delivery.
All you need to do is add your public image asset URLs, and they convert them into lightweight WebP/AVIF formats, resulting in significantly smaller file sizes and lightning-fast loading times.
This complete solution has transformed my blog’s image management workflow from a pain point to a pleasure, while simultaneously improving loading performance for my readers.