You can now request resized images from our GraphQL API.
query Example {
homepage {
heroImage {
url(width: 500, quality: 70)
}
}
}
Or via URL:
https://assets.basehub.com/2fa958b2/mBV9NVWPK632ZKmv9lffA/image.png?width=500
Photo by Patrick Konior on Unsplash.
There are actually a bunch of options to use. We use Cloudflare to handle this, and you can check their docs to see all of the options you have available.
A thin wrapper on top of Next.js’ <Image />
Component. Really, it’s literally just this:
import Image, { ImageProps } from 'next/image'
const basehubImageLoader = () => {...}
export const BaseHubImage = (props: ImageProps) => {
return <Image {...props} loader={basehubImageLoader} />;
};
And you can use it like this:
import BaseHubImage from "basehub/next-image"
const Home = async () => {
return (
<BaseHubImage
src="https://assets.basehub.com/2fa958b2/mBV9NVWPK632ZKmv9lffA/image.png"
width={846}
height={564}
/>
)
}
export default Home
We built this because most developers don’t want to query our GraphQL API to get images in different sizes and formats and whatnot: they want their framework to do that work. So, <BaseHubImage />
is the same as Next.js’ but uses BaseHub’s Image Pipeline directly instead of using Next.js as the middleman.
Although this is not something you should worry much about, if you plan on having many, many images, Next.js’ own image optimization might get resource intensive—and we’re already doing that optimization for you.
ThumbHash, created by Evan Wallace, is a library for creating “a very compact representation of an image placeholder”. Well, you can now get a thumbhash for every image you upload into BaseHub.
query Example {
blogPosts {
items {
coverImage {
url
thumbhash
placeholderURL
}
}
}
}
Keep in mind, in order to render the thumbhash
in the browser, you’ll need to decode it using the thumbhash package, or a library like unlazy.
To save you from the hassle of decoding the thumbhash, you can also get the placeholderURL
directly from our GraphQL API, which will be ready for use as an <img>’s src
.
When to use one vs the other? thumbhash
is more lightweight (~30 bytes) than placeholderURL
(~400 bytes), so if you want to save some KB (say you’re loading hundreds of images), then you might prefer to use thumbhash
. Else, you’ll probably be better off with placeholderURL
.
Putting it all together, your list of blog posts can render like this:
import { Pump } from "basehub/react-pump"
import { BaseHubImage } from "basehub/next-image"
const BlogPage = async () => {
return (
<Pump
queries={[
{
blogPosts: {
items: {
_id: true,
coverImage: {
url: true,
placeholderURL: true,
alt: true,
},
},
},
},
]}
>
{async ([data]) => {
"use server"
return (
<div>
{data.blogPosts.items.map((post) => {
return (
<div key={post._id}>
<BaseHubImage
src={post.coverImage.url}
placeholder={post.coverImage.placeholderURL}
alt={post.coverImage.alt ?? ""}
width={624}
height={220}
/>
</div>
)
})}
</div>
)
}}
</Pump>
)
}
export default BlogPage