With our Image API, users can easily resize and transform their images in numerous ways, saving the developers from resorting to unreliable libraries to perform image transformations.
Whether you are building an ecommerce store or a personal blog, having a fast website has numerous benefits. Some are implicit, such as when you can get ranked higher on google search because of better optimization. Other benefits are more explicit, where users can appreciate the fast loading time on their devices.
Having an optimized, fast website decreases bounce rates, improves user satisfaction and does wonders when it comes to bringing in new traffic to the site. Take a look at these two images of cute kittens, the first image is resized using Libpixel’s image resizing API while the other is presented with its original resolution but is scaled down to 300px on the client side.
On the first look, both look more or less the same, but the right one takes 4x times more to load. It is easy to overlook the effect optimizing images has on site performance. As there is no easy way to optimize images, developers have to rely on storing multiple instances of an image and then decide which instance to be presented at which device.
This can be a gruelling process, especially if your website relies heavily on media. To resolve this issue efficiently, you can use Libpixel’s resizing image API that allows you to easily resize images programmatically by declaring parameters in the `src` tag.
Using Libpixel’s resize CDN, a developer is also saved from having to save multiple instances of an image, rather they just have to store the highest resolution of the image and can transform it on the go using our API. The API is very high performant, it takes longer for the image to be communicated than for it to be processed in our data center.
With our Image API, users can easily resize their images and transform them in numerous ways. This saves the developers from resorting to different unreliable libraries to perform image transformations and can simply use one API for all functionality.
Some main features of our resizing API include:
You can resize an image while maintaining its original aspect ratio by passing the image through the API and defining its output width and height. The default mode is `fit`, which means that the image will be resized while maintaining its aspect ratio.
To crop the image to a new aspect ratio, you can override the default mode to `crop`, which will allow you to resize the image to new aspect ratios.
Here’s an example URL for resizing an image if you are using the`src` tag:
Here we are defining the new width as 300px. You can place this URL in the `src` attribute of an image tag and it will deliver an image with 300px width.
Another very useful function is the ability to crop images on the go. With Libpixel’s resize CDN, you can easily crop a portion of the image by defining four parameters, x,y origins and the width and height of the rectangular crop.
Depending upon the type of the `mode` you have set, additional cropping may be applied. By default the `mode` is `fit`.
You can specify the DPR of an image between 0.1 and 10.0. This acts as a multiplier for both width and height and allows you to customize the presentation of the image depending upon the resolution of the device.
This is especially useful when you are presenting images for devices with high DPI such as iPhones and want to provide a clearer image to such devices. The default DPR value is 1.0.
You can easily change the format of your images depending upon the requirements by using Libpixels image API. With the API, you can transform a transparent PNG image to a normal JPG image or transform either of these into the modern WebP format that google prefers.
Having images in the right format also provides a huge boost in the SEO rating of your website. The modern WebP format is supported by the latest browsers and supports the maximum compression of files, allowing for reduced load on the page.
The above mentioned only cover some of the major functionalities of our image CDN, it supports numerous other functionalities that you can read more about in our documentation. Now let’s talk about where you can employ the image API to better optimize your website.
If you are managing an online marketplace, chances are there are tons of images on the page and many are used in multiple places but presented with different dimensions. Same goes for a blog site or any other website that heavily relies on graphic media.
In such situations, using Libpixel’s resize API makes sense, where you can resize the same image to be presented as a thumbnail in the main menu of your site. This will decrease the load on the graphic heavy page while maintaining its aesthetic quality.
Here’s an example of an image of a giraffe presented at a lower resolution with DPR set as 2.
In other cases, you want to generate responsive images for different devices to reduce data consumption and improve user experience. The conventional way to do this is by storing multiple sizes of the same image and then calling them through the `srcset` attribute of an `img` tag.
With Libpixel, you can simply use the srcset tag on the original high quality version of the image and simply define its sizes for the various view ports. Here’s an example of how one can use the `srcset ` with Libpixel’s resize API:
Getting started with Libpixel is very easy, just signup, create your organization URL and try out Libpixel for a limited time period. Read our comprehensive documentation to learn more about what we offer and how you can perform all sorts of image manipulation.
Check out this quick start article that guides you step by step to successfully present an image using Libpixel. If you get stuck or want to request a feature email us or open an issue on our repository.
