BootStrap 5 breakpoints vs Vanjaro previewer breakpoints vs. Vanjaro Image Optimizer breakpoints #892
Replies: 1 comment 1 reply
-
Responsive ModeThere are 3 different Device Views in Vanjaro. Here's how they correspond to Bootstrap, Media Queries, and Preview. DesktopThe screen width preview is 100% TabletThe screen width preview is 768px MobileThe screen width preview is 360px Vanjaro Image Optimizer
Images are specifically saved in these different formats to handle devices across all viewports including Mobile, Tables, Desktops, and Ultra Desktops. It's important to understand that image dimension has very little to do with the viewport width; rather, the actual size the image is shown on the page. For example, we could have an image that is 120px wide displayed on a mobile device. In this use case, 360px is the correct size as long as the device's DPR (Device Pixel Ratio) is 3 or less. Vanjaro will automatically serve a 720px image if the DPR is greater than 3. Other Questions
Not really. Unless you have a specific requirement, you can easily build a site for mobile all the way up to Ultra Desktops.
No. Refer to Vanjaro Image Optimizer explanation above. |
Beta Was this translation helpful? Give feedback.
-
|
Excellent explanation. Thanks @meetmandeep ! |
Beta Was this translation helpful? Give feedback.
-
BootStrap 5 has 6 breakpoints: xs>0px, sm>576px, md>768px, lg>992px, xl>1200px, xxl>1400px.
The Vanjaro preview function does mobile=360px, tablet=768px, and desktop .
The Vanjaro Image optimizer is saving 5 different images sizes (360px, 720px, 1280px, 1920px and original) in both webp and jpeg.
Why the different number of breakpoint tiers and pixels?
Would it make sense to have a preview function for all 6 BootStrap breakpoints?
And to have optimized images for each BS5 breakpoint as well?
Beta Was this translation helpful? Give feedback.
All reactions