On a daily basis, dozens of images are likely being uploaded and displayed in your community by members and staff alike. In some cases, a user may not resize or scale down an image before uploading it, resulting in two potential issues:
- large file sizes that may impact page-load speeds
- an image may not display properly on certain devices (e.g., a phone)
To help mitigate these pitfalls, Vanilla includes the Cloudflare Image Resize feature in all Vanilla accounts. This feature:
- automatically generates several versions of each uploaded image and
- displays the most appropriate-sized image based on the device (phone, tablet, desktop) that someone is using.
NOTE: This feature is enabled/ON by default in your community. If you want it disabled (not recommended), you must contact Vanilla Support.
If it is disabled, you cannot re-enable it. You must create another case with Vanilla Support and request that it be enabled for you.
Benefits of the feature
- Generates multiple versions of each uploaded image and seamlessly displays the appropriate size based on the user's device (phone, tablet, or desktop). These extra versions are cached on their server; so, additional storage on your end is not required.
- Increases site performance due to how the images are pre-generated and processed for user download when visiting a webpage.
- Improves your community's SEO because larger images result in slower page loads and hurt page rank with search engines.
- Improves mobile accessibility.
Supported image formats
Input formats
- JPEG
- PNG
- GIF (including animations)
- WebP (no animations)
- SVG
Output formats
- JPEG
- PNG
- GIF (including animations)
- WebP (including animations)
- SVG
- AVIF
NOTE: Click the link below to read about Cloudflare's supported formats and limitations.
FAQ
Q: What is the max image size that can be displayed on a page?
- A: This depends on the current viewport size. An image is resized based on a fixed set of breakpoints. Those breakpoints are 10, 300, 800, 1200, and 1600 pixels. The browser selects the image size to use based on the current viewport (or window) size. If the viewport is greater than 1200, and the source image is 1600 pixels wide or higher, the largest possible image size used is 1600 pixels wide (since any image greater than 1600 pixels wide would be scaled down to 1600 pixels).
Q: What factors into the size of the image displayed on a page?
- A: As mentioned above, the browser selects the appropriate image based on the viewport. For a given viewport size, the browser selects an image based on the next breakpoint higher than the viewport. For example, if the viewport is 900 pixels wide, the browser would select the image corresponding to the 1200 pixel breakpoint. Note that this image could be less than 1200 pixels wide if the source image is smaller than 1200 pixels. In which case the image would be the same size as the original. Images resized by Cloudflare are only scaled down.
Q: Does Cloudflare work in conjunction with the max image dimensions that are set on the Dashboard > Settings > Posts > Posting page?
- A: The plugin does work in conjunction with the max image dimensions in the sense that the image is resized before being provided to Cloudflare to be resized again. For example, if you set the max width to 1500 pixels, and you upload an image that is 2000 pixels wide, the image would be resized to 1500 pixels wide before being resized by Cloudflare. Cloudflare would then resize the image for the 10, 30, and 1200 pixel breakpoints but not the 1600 pixel breakpoint because it was already resized to 1500 pixels.