If you’re on our Growth or Scale plans, you have access to our feature “Adaptive Image Sizing”.
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.
More information about the feature and how to enable and test it can be found in our article:
In some rare cases, Adaptive Image Sizing may cause images to appear blurry or distorted.
What to do if you notice blurry images?
If you notice an image has become blurry after our service optimized it, you can exclude it from the Adaptive Image Sizing process.
To do this, you will have to identify the original image URL or parts of it.
Follow the steps below:
1. Visit the URL where the image is blurry or distorted and add "?nonitro" at the end of the URL to temporarily bypass NitroPack. The page will automatically reload.
2. Then, find the image on the page, right-click and then select “Inspect”.
Your browser’s Developer Tools console will open, and you will see the DOM tree with reference to the image.
In the above example, the full URL of the image is https://nitropack.ams3.cdn.digitaloceanspaces.com/upload/blog/ranking-site-speed-tools_b2a30a3319.png
3. Copy the URL of the affected image and go to your NitroPack dashboard at https://nitropack.io/user/settings.
4. Add it as an Excluded Resource by navigating to Cache Settings > Cache> Excluded Resources > Add an Exclude.
Complete the following configuration:
Step 1. Add the full image URL in the “Asset URL/Code” field
Step 2. Select “Resource type” - Image
Step 3. From the “Excluded Operations” drop-down, select only the “Resize” operation.
5. Once you complete the steps, go to https://nitropack.io/user/pages and purge the cache for the specific page where the blurry image was.
All done! Now, NitroPack will still compress, lazyload and deliver the image via our CDN, but it will not resize it.
ℹ️ Please repeat the process for other images affected in the same way.
How to disable Adaptive Image Sizing altogether
Navigate to your NitroPack Dashboard and open Settings > Images & Media.
Use the toggle button to deactivate Adaptive Image Sizing.
Once you deactivate Adaptive Image Sizing, go to Dashboard and purge your website’s cache.
📌 If you need any assistance or have questions, you can always reach out to our support team at [email protected] or via this link: https://support.nitropack.io