On a daily basis, dozens of images are likely being uploaded and displayed in your Higher Logic Vanilla (Vanilla) 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 that may not display properly on certain devices (e.g., a phone)
To help mitigate these pitfalls, Vanilla includes the Cloudflare Image Resize addon that automatically generates several versions of each uploaded image and displays the most appropriate size based on the device someone is using (phone, tablet, or desktop). In this article, we'll cover how to turn this addon on and off and learn more about how it works.
How to turn Cloudflare Image Resize ON/OFF
⚠️ IMPORTANT: By default, this addon is enabled in your community. However, if you turn it OFF only Vanilla Support can turn it back ON for you.
Turn Cloudflare OFF
- Access the Dashboard.
- Navigate to Settings > Addons > Addons.
- Locate the Cloudflare Image Resize addon; click the toggle to the right to turn the addon OFF.
Turn Cloudflare ON
If Cloudflare has been turned off in your community, only Vanilla Support can turn it back ON. Create a case with Vanilla Support and request to have this addon enabled.
Benefits
- Generates multiple sizes 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 no additional storage is required on your end.
- 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. Why? 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: Read more about Cloudflare's supported formats and limitations below.
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 you can set on the Dashboard > Settings > Discussion > Posting page?
- A: The plugin does work in conjunction with the max image dimensions in the sense that the image is resized first before being provided to Cloudflare to resize 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 since it was already resized to 1500 pixels.
