Using NitroPack's Adaptive Image Sizing For Responsive Web Design

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!

Haven't seen what NitroPack can do for your site yet? Run a test now →

What is Adaptive Image Sizing?

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:

• above and below-the-fold images
• carousels
• sliders
• galleries, and more.

Optimization coverage for background images is in the works along with other improvements our product team has in the pipeline.

How Does NitroPack Adaptive Image Sizing Work?

We’ve simplified the process to help decrease the initial page optimizations to less than a second.

The process is divided into two steps:

1. Evaluate Page

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.

2. Resize Images

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.

 

 

How to check if Adaptive Image Sizing is working

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.

 

 

Perfect Page Experience is #1 Priority

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:

• More bandwidth saved
• More processing power saved
• Tangible responsiveness boost
• Greatly reduced amount of unnecessary bytes downloaded
• Improved user and page experience for first-time and returning viewers
• Reduced LCP (as images are the main culprit for issues with the most difficult Core Web Vitals metric)
• Minimized page Cumulative Layout Shift

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.

Get Started With Adaptive Image Sizing

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.

How to Enable Adaptive Image Sizing

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 :)