IPFS Dedicated Gateways: Optimizing Images

Learn about the Filebase IPFS Dedicated Gateways Image optimization features.

The Filebase IPFS Dedicated Gateways support image optimization features. This tutorial will walk through some of the common image optimization workflows, but for a full list of the supported image optimization tags, please see our documentation here:
IPFS Gateways
Filebase
This example uses an image file of the Filebase logo for demonstration purposes. You can follow along using any image file of your choice.
1. Navigate to the Filebase Web Dashboard. Create a new bucket on the IPFS network.
2. Select your bucket, then select ‘Upload’ > ‘File’.
3. Select your image file to upload. Copy the CID that is returned.
4. Next, navigate to the Gateways page on the Filebase web console.
Filebase IPFS Dedicated Gateways are a feature only available to paid users. They are not available for users on the free tier.
5. Select the ‘Create Gateway’ button in the upper right corner.
6. A new window will open prompting you to provide a gateway name and select the gateway’s access level.
Gateway names are subject to the same naming restrictions as bucket names. All gateway names must be lowercase, between 3-63 characters, and must be unique.
7. Select "Private".
8. Next, navigate to the IPFS CID of your image using your IPFS Dedicated Gateway in the following format:
https://gateway-name.myfilebase.com/ipfs/IPFS_CID
Replace gateway-name with your IPFS Dedicated Gateway name, and IPFS CID with your image’s IPFS CID.
9. Now, let’s explore some of the image optimization options. To resize the image, we can use the img-width option to change the image’s displayed width:
https://gateway-name.myfilebase.com/ipfs/IPFS_CID?img-width=300
10. The img-height option can also be used to resize the image:
https://gateway-name.myfilebase.com/ipfs/IPFS_CID?img-height=800
The height will be automatically scaled to fit the image’s resolution when the width is changed.
11. The img-fit=contain option can be used to resize the image as large as possible given the image’s original size parameters.
https://gateway-name.myfilebase.com/ipfs/IPFS_CID?img-fit=contain
12. The img-quality=x option can be used to specify the quality for images that are in the JPEG and WebP formats.
https://gateway-name.myfilebase.com/ipfs/IPFS_CID?img-quality=100
13. The img-anim=false option can be used to reduce frames for images that may be animated, such as GIF files.
https://gateway-name.myfilebase.com/ipfs/IPFS_CID?img-anim=false
14. The img-sharpen=x option can be used to specify the strength of the sharpening filter.
The value of this filter is a floating-point number between 0, which refers to no sharpening, and 10, which refers to maximum sharpening. For most images, 1 is the recommended value.
https://gateway-name.myfilebase.com/ipfs/IPFS_CID?img-sharpen=0.5
For the full list of possible image optimization options, please refer to our documentation here:
IPFS Gateways
Filebase
If you have any questions, please join our Discord server, or send us an email at [email protected]​

IPFS Dedicated Gateways: Hosting a Static Website

IPFS Dedicated Gateways: Public vs Private

Last modified 8mo ago

IPFS Dedicated Gateways: Optimizing Images

This example uses an image file of the Filebase logo for demonstration purposes. You can follow along using any image file of your choice.

1. Navigate to the Filebase Web Dashboard. Create a new bucket on the IPFS network.

2. Select your bucket, then select ‘Upload’ > ‘File’.

3. Select your image file to upload. Copy the CID that is returned.

4. Next, navigate to the Gateways page on the Filebase web console.

5. Select the ‘Create Gateway’ button in the upper right corner.

6. A new window will open prompting you to provide a gateway name and select the gateway’s access level.

7. Select "Private".

8. Next, navigate to the IPFS CID of your image using your IPFS Dedicated Gateway in the following format:

9. Now, let’s explore some of the image optimization options. To resize the image, we can use the `img-width` option to change the image’s displayed width:

10. The `img-height` option can also be used to resize the image:

11. The `img-fit=contain` option can be used to resize the image as large as possible given the image’s original size parameters.

12. The `img-quality=x` option can be used to specify the quality for images that are in the JPEG and WebP formats.

13. The `img-anim=false` option can be used to reduce frames for images that may be animated, such as GIF files.

14. The `img-sharpen=x` option can be used to specify the strength of the sharpening filter.