Adaptive Image Sizing (AIS for short) is a preemptive optimization of images, making them match the dimensions of the containers they’re displayed in for desktop, mobile, and tablet devices.
Currently, the feature is available for NitroPack users on our Growth and Scale plan.
If you’re already a Growth or Scale user, visit your NitroPack Dashboard and follow the steps below to activate Adaptive Image Sizing for your website.
Step 1: Go to Cache Settings > Images & Media
Step 2: Use the toggle button to activate Adaptive Image Sizing
How to test Adaptive Image Sizing on Your Website
NitroPack’s Test Mode can help you try out Adaptive Image Sizing without risking UX issues. Start by going to Settings > General, enabling Test Mode, and saving your settings.
When this mode is enabled, you can visit a test version of any page by adding ?testnitro=1 to its URL. While in Test Mode, all changes you make (including turning on AIS) affect only these test pages.
Next, find the “Adaptive Image Sizing” option under Images in Settings.
Make sure you’re still in Test Mode and save your settings after enabling AIS.
After that, open all pages you’d like to test by adding ?testnitro=1 to their URL. At a minimum, make sure to test:
The homepage - https://example.com/?testnitro=1;
Other high-traffic landing pages - https://example.com/landingpage1/?testnitro=1;
Product pages - https://example.com/product1/?testnitro=1;
Popular articles and other content pieces - https://example.com/blog/post1/?testnitro=1.
Browse around for a few minutes and refresh these pages. If you’re not sure whether AIS has been applied to a page, inspect any image on the pages you’re testing with. You should see the Rendered size (your image after AIS has been applied) and the Intrinsic size (the original dimensions of the image).
When you’re done testing, you can enable AIS on your live website by turning off the Test Mode and saving your settings. You should also purge your website’s cache as prompted.
On the other hand, if you don’t want to keep the feature on your website, disable both AIS and Test Mode and save your settings.
Ran into issues during the tests? Please reach out to our Support team for help.
How to Check if Your Images Are the Right Size Before Enabling Adaptive Image Sizing
Identify incorrectly-sized images with Lighthouse using the Performance Audit. The audit will list any images that need to be resized.
Once you’ve determined which images need to be fixed, you can either correct them manually or opt-in for the fully-automated Adaptive Image Sizing by us.
And we all know that time and resources are invaluable when it comes to any type of online business.
FAQ
1. How important is properly sizing my web images?
Your website benefits greatly from image optimization – starting with site responsiveness across different screen sizes, better user experience, improved loading speed, and going as far as positively affecting your SEO strategy.
2. What results can I expect after enabling Adaptive Image Sizing?
Adaptive Image Sizing compliments all existing image optimizations NitroPack has to offer. Upon activation, the feature will reduce your images’ file sizes by up to 4x so your visitors can enjoy a responsive site with a great user experience.
You’ve run into an issue or couldn’t find an answer to your question?
Reach out to our Support team for help.