Using Picture Tag In Magento 2 Optimization
The < img > element serves two purposes:
- It describes the size and other attributes of the image and its presentation.
- It provides a fallback in case none of the offered elements are able to provide a usable image.
1.What are Different breakpoints
Following are the different types of breakpoints for desktop to various types of mobile devices Like:
- 320 * 568
- 375 * 667
- 414 * 736
- 375 * 812
- 768 * 1024
- 1024 * 1366
- 540 * 720
- 280 * 653
- 1024 * 600
- 1280 * 800
- 360 * 640
- 411 * 731
- 411 * 823
2. In which version of Magento this is supported
Magento 2 all versions are supported with
tag.
- Magento2.4
- Magento2.3
- Magento2.2
- Magento2.1
- Magento2.0
3. Theme that supports tag
All Magento based themes are supported with
tag.4. Example
Before
< img src=”https://.cloudwaysapps.com/pub/media/wysiwyg/infortis/banners/mobile-banner.jpg”/ >
After
< picture >
< source srcset=”https://.cloudwaysapps.com/pub/media/wysiwyg/infortis/banners/mobile-banner.jpg”
alt=”mobile-banner” media=”(max-width: 480px)” >
< source srcset=”https://.cloudwaysapps.com/pub/media/wysiwyg/infortis/banners/tab-banner.jpg”
alt=”Tablet-banner”
media=”(max-width: 770px)”>
< img class=”banner-img lazyload”
src=”https://.cloudwaysapps.com/pub/media/wysiwyg/banner-placeholder.png”
data-src=”https://.cloudwaysapps.com/pub/media/wysiwyg/infortis/banners/banner.jpg”
width=”1920″
height=”520″
alt=”banner-img”
style=”width:100%;
height:100%;”>
< /picture >
Skip to content
