Filestack Adaptive is the tool you need to solve the responsive images problem
The problem with responsive images:
Solutions for responsive images have come a long way, but they still require a considerable amount of developer effort. We were given a gift a few years back with the HTML5 <picture> tag, which now has widespread support in modern browsers, and it gives web authors even more control over managing their images across different devices. Of course with this power comes a learning curve. Extensive usage of srcsetattributes require backend image processing at some level. Filestack offers a fast and highly-available image processing engine, and it’s a great fit for implementing on-demand resize operations as URLs in a srcset. But there is still a lot of boilerplate markup work to get started if you want to use <picture>.
Current state of the art:
Self-initializing solutions like lazysizes provide a lot of convenience at the cost of some performance. Since the entire DOM must be parsed before script execution, and markup still needs custom attributes this solution takes considerable commitment to implement. Cloudinary offers a responsive image breakpoint generator, which provides users with custom markup and an archive of resized images for self-hosting. This lets you use native <picture>elements but you have to generate all the images in advance, and content delivery is its own problem.
Ready to get started?
Create an account now!
Why Filestack Adaptive?
Any business making an impactful and high performing website needs responsive images. Beginning with SEO, responsive images are critical when creating a seamless mobile experience. If a user can’t interact with your website due to a non-responsive image, it will completely tank all the hard work put into your website’s user experience. Even if you currently employ responsive images, your developers are wasting time managing the process instead of focusing on your core product.
What is the solution?
Enter Filestack Adaptive, a new open-source Javascript library that intends to do one thing and do it well: allow Filestack users to combine the power of on-the-fly image processing with the latest standard for responsive web images. At a high level Adaptive exposes a function for generating a <picture> element from a Filestack handle — the primary identifier for all Filestack assets. With only a handful of options that include <picture> attributes like media, sizes, and formats you can generate <picture> DOM nodes or virtual DOM components for React and others. Developers can also write their own interpreters for the generated picture tree, and a JSX example is provided in the library documentation.
The initial release supports image resizing for a customizable range of width descriptors or pixel densities, and image conversions such as WebP. This means you can start using WebP in <picture> elements on browsers that support it, and Filestack will take care of the conversion and delivery. Adaptive is a new library and we’d love to hear from developers about what could make it more useful. Responsive images are still an important part of the web, and we believe the current <picture> specification is a path forward. With Filestack you can harness the latest standards in your application and leave the image processing to us.
If you don’t already have a Filestack API key it is easy to sign up and start today. We hope that you are as excited about using Filestack Adaptive as we are!
Filestack is a dynamic team dedicated to revolutionizing file uploads and management for web and mobile applications. Our user-friendly API seamlessly integrates with major cloud services, offering developers a reliable and efficient file handling experience.