Only for XenVn addon version 1.9.x
Responsive images are the set of techniques used to load the right image based on device resolution, orientation, screen size, network connection, and page layout. The browser should not stretch the image to fit the page layout, and loading it shouldn’t result in time & bandwidth wastage. It improves user experience as images load fast and look crisp to the human eye.
We used srcset & sizes to provide the browser with three different size images. The browser picked the right option based on the actual viewport size of the device.
Here are three main reasons why we need to implement responsive images:
- Render a high-quality image on different devices
- Loading the right image - Art direction
- Faster loading web pages
HTML:
You must log in to view content
(1 lines)Display images with srcset and sizes:
HTML:
You must log in to view content
(1 lines)We created the image with 2 different sizes (original and 640px wide):
https://xenvn.com/attachments/xenvn-add-on-for-xenforo-2-jpg.7466/
https://xenvn.com/attachments/xenvn-add-on-for-xenforo-2-jpg.7466/?width=640
We can create other custom sizes, but it's not necessary.
This feature only applies to attachments in posts, and the image size must be larger than 800px.
To enable this feature, go to:
XenVn Setting -> Attachments -> Add Responsive Image
You must run [XenVn] Rebuild responsive images to update your images
To delete generated responsive images, deactivate Add Responsive Image and run [XenVn] Rebuild responsive images again.
XenVn add-on will automatically compress your images and create responsive images (works only with image attachments).
Install Imagemagick PECL extension to get the best performance.
This is a feature part of XenVn addon, see details here:
https://xenvn.com/threads/xenvn-all-in-one-tools-for-xenforo-2.516/
Last edited:
