Image Optimization

Images uploaded to Nibgate Subblogs are processed and optimized automatically. Uploads go through Cloudflare R2 with sharp-based server-side processing, ensuring fast delivery and optimal file sizes.

All image processing happens server-side at upload time. No client-side libraries or build-time processing needed.

Processing pipeline


Upload
  -> R2 storage (or local /uploads in dev)
  -> sharp processing (WebP conversion, resize)
  -> Single optimized file stored
  -> Public URL returned

What sharp does

sharp is a high-performance Node.js image processing library. When an image is uploaded, sharp:

Auto-rotates — applies EXIF orientation so the image displays upright.
Converts to WebP — produces modern, efficiently compressed WebP images that are significantly smaller than JPEG or PNG equivalents.
Resizes — caps the width at 2560px (withoutEnlargement), so small images stay untouched and huge images are bounded. A single file is produced per upload — there are no size variants.

Image types

Images fall into a few categories depending on where they appear:

The primary hero image for a post. Displayed on the blog homepage, in Explore cards, and in social sharing previews.

Cover images

Images embedded within an article body, stored alongside the post content.

Inline images

Images in a Photo content type gallery. Each image gets its own caption. Displayed in a responsive grid layout.

Gallery images

All of them go through the same pipeline: auto-rotate, WebP conversion, and a 2560px width cap. There are no per-type size variants or square crop processing.

Storage

Images are stored in Cloudflare R2 object storage. R2 provides:

S3-compatible API for easy integration
Global content delivery via Cloudflare’s edge network
No egress fees
Automatic caching and CDN distribution

URL format

Optimized images are served from the R2 public bucket:


{R2_PUBLIC_URL}/blog/{siteId}/{timestamp}-{random}.webp

Example: https://pub-…r2.dev/blog/{siteId}/1785469232629-8021a40a8489.webp

There are no variant sub-paths or responsive parameters — each upload stores exactly one WebP file and returns its URL directly.

Cover images

Cover images are the most important image on a post. They appear in:

The blog homepage post card
The post page header
Nibgate Explore cards
Open Graph and Twitter card previews
Search engine result snippets

Always set a cover image for each post to ensure it displays correctly across all surfaces.

Next reads

Content Types Create a Subblog Architecture