Optimize and Speed Up IPFS Images

When it comes to serving images on the web, performance matters. But if you’re using IPFS to store your images, you’ve likely run into a common set of problems: files are large, delivery is slow, and there’s no built-in way to resize or optimize those images for different screens or use cases.

That’s where Filebase comes in. With our image optimization support on Dedicated IPFS Gateways, you can now dynamically resize, reformat, and compress images stored on IPFS—without repinning or duplicating assets. Whether you're building an e-commerce storefront, a decentralized media gallery, or just need a faster way to serve images, Filebase provides a simple and powerful solution.

Why Image Optimization Matters for IPFS

IPFS is excellent for decentralization, persistence, and content integrity. But raw IPFS assets are immutable and static. If you upload a 4K image, every request to that CID will fetch the full-resolution file, even if you only need a 300px thumbnail. This leads to:

• Slower page loads
• Poor mobile responsiveness
• Higher bandwidth costs for both users and servers
• No way to support responsive image variants without pre-processing

Filebase bridges this gap by letting you transform any IPFS-hosted image directly at the gateway layer. The result? Faster loads, smaller payloads, better UX.

Who Should Use It

You don’t have to be building a Web3 app or decentralized gallery to take advantage of Filebase’s image optimization tools. In fact, many of our users come from Web2 backgrounds—small businesses, dev teams, open-source maintainers—who just want reliable, flexible image hosting that won’t suddenly throttle them, delete files, or break links.

Here’s who benefits most:

• E-commerce teams struggling with image load times on product pages, or hitting limits on traditional hosts. Filebase enables dynamic resizing and bandwidth-efficient delivery.
• Web developers frustrated by Imgur or Dropbox restrictions. Imgur has strict link usage policies and bandwidth ceilings, while Dropbox can remove files if used as a CDN.
• Teams migrating from platforms like Google Drive, Box, or GitHub Pages, who need more control, CDN-backed delivery, and reliable file availability.
• dApp builders and Web3 developers working with NFTs, media-rich feeds, or content-addressed assets.
• Open-source maintainers or data archivists distributing image-heavy datasets.

Unlike centralized hosts, Filebase supports decentralized storage on IPFS and wraps it in the usability of a modern gateway. No takedown threats, no opaque limits—just scalable, flexible delivery.

How It Works: As Easy As a Query String

One of the most powerful aspects of Filebase’s image optimization is how simple it is to implement. You don’t need an SDK, plugin, or integration—just modify the URL of your image using query string parameters.

For example, appending ?img-width=300 to any Filebase gateway image URL will resize the image to 300 pixels wide:

https://your-gateway.myfilebase.com/ipfs/<CID>?img-width=300

You can stack parameters, like adding format conversion and compression:

https://your-gateway.myfilebase.com/ipfs/<CID>?img-width=300&img-format=webp&img-quality=85

Because it’s just a URL, this system works equally well for static sites, hand-coded HTML, and dynamic frameworks like React, Vue, or Next.js. You can programmatically adjust image properties based on user device, layout, or performance needs—no server-side logic required.

This makes it easy to:

• Display avatars in different sizes across a UI
• Serve retina images only when needed
• Optimize mobile vs desktop experience
• Dynamically build image galleries

Whether you're customizing an image manually or automating delivery at scale, the entry point is the same: query strings on a CDN-backed gateway.

Core Features and What They Enable

img-width and img-height

Resize images to specific dimensions. This drastically reduces load times and data usage when full-resolution images aren’t needed. For example, you can serve a 1200px-wide image for desktops and a 400px-wide version for mobile—all from the same CID.

Use cases: Responsive design, mobile optimization, thumbnail creation
Industries: E-commerce, media platforms, blogs, marketplaces

img-dpr

Device Pixel Ratio (DPR) allows you to serve sharper images on high-resolution displays without resizing your source image. A DPR of 2 means doubling the resolution for retina-quality rendering.

What it enables: Retina-ready visuals without uploading higher-resolution variants
Industries: Web design, SaaS dashboards, mobile-first platforms, high-end e-commerce

img-fit

This defines how your image fits into the target width and height:

• contain: Keeps entire image visible while preserving aspect ratio
• cover: Fills target dimensions, crops overflow
• scale-down: Resizes only if image is larger than the defined dimensions
• crop: Hard crops to fit the target box
• pad: Adds whitespace to make it fit without cropping

What it enables: Layout control across cards, carousels, preview panels, and grids
Industries: News sites, content platforms, NFT galleries, UI libraries

img-gravity

Choose the focal point of a crop operation. You can auto-detect the best region, pick a side (e.g., top, left), or use pixel coordinates (e.g., 100x200).

Why it matters: Cropping centered around a subject (like a face or product) ensures visual consistency
Industries: Social apps, avatars, e-commerce zooms, galleries

img-format

Convert between image formats:

• webp: Modern, efficient, fast to load
• jpeg: Classic balance of quality and size
• png: High-fidelity with transparency support

What it solves: Modern format delivery without re-uploading or editing the source image
Industries: SEO-optimized blogs, CMS platforms, app UIs

img-quality

Control compression level for JPEG/WebP. Ranges from 0 (heavily compressed) to 100 (maximum quality).

What it enables: Fast-loading visuals tailored to context: low-bandwidth users, hero banners, galleries
Industries: Mobile-first apps, streaming, e-learning

img-anim

Toggle animation on formats like GIF. Set to false to serve only the first frame.

Why it's useful: Reduces bandwidth, speeds up load times when animation isn’t needed
Industries: Docs, community sites, dashboards, notifications

img-sharpen

Applies post-resize sharpening (scale of 0 to 10). Helps offset softening caused by compression or downscaling.

What it fixes: Blurry previews and downsampled content
Industries: Photography sites, product galleries, printing previews

img-onerror

Fallback behavior when image loading fails. You can redirect to a placeholder or safe default.

What it enables: UX fail-safes and graceful degradation
Industries: CMS platforms, community portals, multi-user platforms

img-metadata

Choose to strip metadata (none), keep all metadata (keep), or preserve copyright-only (copyright).

What it protects: Privacy, compliance, smaller files
Industries: Journalism, medical apps, open data publishing

These transformations are composable—meaning you can chain multiple options in a single URL—and they’re cached at the CDN layer. All transformations are non-destructive: your original IPFS CID remains untouched.

Real-World Use Cases

1. NFT Galleries: Serve resized previews and thumbnail strips without loading the full asset.
2. Profile Avatars: Let users upload a high-res image and serve the right size across different UI contexts.
3. Blog Images: Compress and standardize large editorial photos for web delivery.
4. Documentation Sites: Use IPFS as your image host without sacrificing performance or flexibility.
5. E-Commerce Thumbnails: Reduce image payload on product listing pages without rehosting or resizing manually.

Why Filebase Over Traditional Hosts?

Most centralized image hosts (like Imgur or Dropbox) weren’t built with developer-first or decentralized workflows in mind. They come with file limits, deletion policies, or rate limits that don’t scale with production needs.

Filebase is built to support content-addressed storage and decentralized apps from day one. Our image optimization tools respect that model: we don’t modify your source files, and we don’t require you to re-architect your stack.

Get Started

Explore the full set of features, examples, and docs.

Whether you’re optimizing for mobile, performance, or pixel-perfect layout, Filebase gives you the tools to make IPFS images fast, flexible, and production-ready.

Looking to control access to your IPFS content? Check out our latest post on Pre-Signed URLs: The Key to Gated IPFS Content.