Get NitroPack with up to 37% OFF
Once you start with NitroPack, you can freely choose your integration platform.
Everything you need to know about
NitroPack features and compatibilities.
Whether you run a blog or
an agency, we have a
partnership opportunity for you!
The place to learn how to
improve your web performance,
how to get the most out of
NitroPack, and what is coming
next to our product.
Unoptimized images can account for 2–4x more data usage, slower loading times, and bad page experience.
So we created a way for you to serve large quantities of correctly-sized images saving you bandwidth and CPU power
The new Adaptive Image Sizing is the latest addition to our powerful Image Optimization stack!
It’s a preemptive optimization of images making them match the dimensions of the containers they’re displayed in across desktop, mobile, and tablet devices.
Unlike “srcset” in WordPress and other image optimization plugins in the ecosystem, NitroPack’s approach is refined.
We run this type of optimization only once, then cache it so you can serve all images as the end user requests them.
Adaptive Image Sizing works on all standard images identified by a markup element for an image in HTML, including:
Optimization coverage for background images is in the works along with other improvements our product team has in the pipeline.
We’ve simplified the process to help decrease the initial page optimizations to less than a second.
The process is divided into two steps:
Using a headless browser, we render a web page and try to identify the dimensions of the containers images should be displayed in.
Our Adaptive Image Sizing crawls all page layouts only once and then caches the results. This way, you can serve images upon request for excellent load times and page experience.
We then rescale all images to fit the dimensions of the containers they’re displayed in and rename the image’s file name including the optimized dimensions at the end of it.
The fastest way to check if Adaptive Image Sizing is doing its job is to open a web page and inspect the images on it.
Ideally, upon inspection, you want your images to only display “render size”. That means they match the dimensions of their containers perfectly.
Loading the same page without NitroPack Adaptive Image Sizing, we now see a new attribute called “intrinsic size”. It corresponds to the original size of the image.
Thanks to the new feature, it has been scaled down to 650 x 205 px from the original 1194 x 376 px.
Serving images with proper dimensions via Adaptive Image Sizing is a small optimization step with a big payout.
As with everything else in our Image Optimization stack, it is fully automated and doesn’t require any additional tweaking on your end.
You could say “The more, the merrier!” is a fitting motto for this feature. This makes it perfect for eCommerce websites, media outlets, digital publishing, and digital creators with image-heavy blogs.
“Adaptive Image Sizing shaves off hundreds of hours on repetitive resizing tasks and automates the way to responsive images on any device.”
– Patryk Wodniak, Product Manager @NitroPack
No more clunky tools for bulk image resizing, no more repetitive tasks that waste your design resources.
The more images on your website, the greater site performance boost you will enjoy:
Combined with other powerful NitroPack image optimization features like Advanced Lazy Loading, WebP Conversion, and Lossy&Lossless Compression your website is guaranteed to offer an excellent page and user experience.
Currently, the feature is available through our Growth and Scale Plan.
To gain access to Adaptive Image Sizing you can either sign up or upgrade to either of the two paid subscriptions.
If you need assistance with your upgrade you can contact our Support team.
The feature is available for activation through our refreshed Dashboard.
Navigate to your NitroPack Dashboard and open Settings > Images.
Use the toggle button to activate Adaptive Image Sizing.
And finally, don’t forget to save your changes using the button at the top.
For detailed instructions on how to explore and test Adaptive Image Sizing visit our Help Center article.
Got additional questions about the feature? Drop them in the comment section below for our product team to answer :)
Lora has spent the last 8 years developing content strategies that drive better user experiences for SaaS companies in the CEE region. In collaboration with WordPress subject-matter experts and the 2024 Web Almanac, she helps site owners close the gap between web performance optimization and real-life business results.
