Image Optimizations
Filebase includes an image resizing and optimization feature that can be accessed through any Filebase dedicated gateway. These features allow you to dynamically resize and optimize images served through your IPFS gateway, improving performance and load times for your web applications.
Any image that can be loaded using a dedicated gateway can be manipulated through query string parameters. ‌This includes both images that you have pinned to your account and images loaded from the public IPFS network.
Using Image Optimization
To utilize image optimization, at least one option must be specified. These parameters can be added to the URL of the image file. For example:
To specify multiple options, simply add additional query string parameters in standard format:
Options
img-width=x
Specifies the maximum width of the image in pixels.
img-height=x
Specifies the maximum height of the image in pixels.
img-dpr=x
Refers to the device pixel ratio. The default value is 1.
img-fit
Refers to the image’s width and height. Any resizing modes will retain the image’s aspect ratio. Additional modifiers include:
img-fit=scale-down: The image will be decreased in size that matches the provided width or height.
img-fit=contain: The image will be resized to be as large as possible within the provided parameters.
img-fit=cover: The image will be resized to match the amount specified through the width and height parameters.
img-fit=crop: The image will be downsized and cropped to fit within the size specified by the width and height parameters.
img-fit=pad: The image will be resized to be as large as possible within the given width or height parameters.
img-gravity
img-gravity=auto
img-gravity=side and img-gravity=XxY
img-quality=x
This parameter specifies the quality of images in the JPEG and WebP formats.
img-format=auto
This parameter refers to the standard image format JPEG/PNG, which will be used if this option is not specified.
img-anim=false
This parameter reduces frames for animated images such as GIFs.
img-sharpen=x
This parameter specifies the strength of the sharpening filter. The value 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.
img-onerror=redirect
img-metadata
Controls if the metadata should be preserved for the specified image.
img-metadata=keep
img-metadata=copyright
Examples
Dynamic Resizing
You can resize images dynamically by appending query parameters to the image URL. The following parameters are available:
img-width: Specifies the width of the image in pixels.img-height:Specifies the height of the image in pixels.
Example: Resizing an Image
To resize an image to 200x200 pixels, use the following URL format:
Format Conversion
You can convert images to different formats by specifying the img-format parameter. Supported formats include jpeg, png, and webp.
Example: Converting an Image Format
To convert an image to WebP format, use the following URL format:
Compression
Image compression is automatically applied to optimize the file size. You can control the quality of compression using the img-quality parameter, which accepts values from 0 to 100 (where 100 is the highest quality).
Example: Compressing an Image
To compress an image with 80% quality, use the following URL format:
Combining Parameters
You can combine multiple parameters to apply resizing, format conversion, and compression in a single request.
Example: Resizing, Converting, and Compressing an Image
To resize an image to 300x300 pixels, convert it to JPEG format, and apply 90% quality compression, use the following URL format:
Best Practices
Use Appropriate Dimensions: Resize images to the dimensions required for display to avoid serving unnecessarily large files.
Choose Optimal Formats: Use modern formats like WebP for better compression and quality.
Balance Quality and Size: Adjust the quality parameter to find a balance between image quality and file size.
Last updated
Was this helpful?