Long test added so that images are pushed below the fold. For Lazy Load purposes.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed placerat mattis enim quis malesuada. Suspendisse sit amet facilisis augue. Proin eget porttitor nisi. Aenean ullamcorper tincidunt urna, et varius sapien hendrerit non.
Nulla facilisi. Aliquam ut laoreet ex. Curabitur vulputate placerat urna, nec convallis enim consectetur at. Proin sit amet leo at lorem faucibus porta eu eget ipsum.
Nunc consectetur nisi vitae auctor ultrices. Donec a nisi purus. Vestibulum vehicula risus ante, nec egestas urna suscipit in. Fusce sit amet porta lectus, vitae iaculis magna. Sed at lobortis lorem, non molestie metus.
Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Maecenas eget laoreet enim. Nam posuere neque et orci sagittis finibus.
Vivamus venenatis tincidunt volutpat. Vivamus interdum vulputate purus non vestibulum. Donec rhoncus, lorem at lacinia tristique, ipsum sapien dictum sem, ac maximus lorem diam ac est. Ut ornare, tellus a venenatis finibus, nisl massa auctor leo, id efficitur ipsum turpis quis libero. Aenean vitae maximus lacus, at dictum sapien.
Etiam sed odio lorem. Mauris sit amet diam accumsan tellus bibendum vulputate sed sed leo. Nunc vitae ante sem. Praesent maximus eget nisi sed semper. Cras eu tellus vitae dolor mollis congue id sit amet dui.
Nam sit amet metus non risus cursus pretium. Fusce nec sapien lobortis, mattis nibh vitae, malesuada ipsum. Suspendisse neque tortor, sagittis vel vestibulum eu, auctor ac felis. Donec eleifend felis in ligula semper feugiat vitae eget libero. Quisque vitae convallis ipsum. Nulla facilisi. Nullam non tempus leo.
Sed non sem convallis, commodo dui eu, aliquet nisi. Nulla dictum est non sem pulvinar finibus. Donec semper augue tellus, id varius mi faucibus non. Fusce laoreet rhoncus faucibus. Fusce eget faucibus nisi. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Nunc vitae tortor scelerisque, ornare ipsum ut, maximus nunc.
Morbi nec eros eget mi tempus porttitor ut at dui. Cras lobortis lorem sit amet leo dapibus volutpat. Quisque congue ligula id urna dapibus, eu tristique eros vestibulum. Praesent tristique tristique lorem, eu sodales quam. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.
Sed dapibus justo lacus, ac tincidunt urna accumsan a. Morbi tristique, sem ac commodo rhoncus, ipsum arcu posuere odio, vel mattis ipsum nulla non quam. Cras vel ex metus. Nulla ultrices, lacus a tincidunt eleifend, lorem lectus viverra metus, vitae volutpat tortor mi id ex.
Sed eu justo scelerisque, convallis magna sagittis, ultrices diam. Aliquam luctus augue vel magna tempus bibendum ut nec sem. Nam leo augue, volutpat vel purus quis, lobortis iaculis ante.
WordPress Block: Image
HTML: IMG with Retina 2x and 3x in srcset
<img
id="smush-test-2-img" src="https://playground.damirpecnik.com/wp-content/uploads/2024/11/smush-test-2-1024x684.jpg"
srcset="https://playground.damirpecnik.com/wp-content/uploads/2024/11/smush-test-2-2048x1369.jpg 2x,
https://playground.damirpecnik.com/wp-content/uploads/2024/11/smush-test-2-scaled.jpg 3x"
alt="IMG with Retina 2x and 3x in srcset" style="max-width:100%" />
HTML: IMG with alternate widths in srcset
<img id="smush-test-3-img" src="https://playground.damirpecnik.com/wp-content/uploads/2024/11/smush-test-3-scaled.jpg"
srcset="https://playground.damirpecnik.com/wp-content/uploads/2024/11/smush-test-3-2048x1299.jpg 2048w,
https://playground.damirpecnik.com/wp-content/uploads/2024/11/smush-test-3-1536x974.jpg 1536w,
https://playground.damirpecnik.com/wp-content/uploads/2024/11/smush-test-3-1024x649.jpg 1024w,
https://playground.damirpecnik.com/wp-content/uploads/2024/11/smush-test-3-768x487.jpg 768w,
alt="IMG with alternate widths in srcset" style="max-width:100%" />
HTML: IMG with alternate widths in srcset and sizes
<img
id="smush-test-4-img" src="https://playground.damirpecnik.com/wp-content/uploads/2024/11/smush-test-4-scaled.jpg"
srcset="https://playground.damirpecnik.com/wp-content/uploads/2024/11/smush-test-4-768x432.jpg 768w,
https://playground.damirpecnik.com/wp-content/uploads/2024/11/smush-test-4-1024x576.jpg 1024w,
https://playground.damirpecnik.com/wp-content/uploads/2024/11/smush-test-4-1536x864.jpg 1536w,
https://playground.damirpecnik.com/wp-content/uploads/2024/11/smush-test-4-2048x1152.jpg 2048w"
sizes="100vw"
alt="IMG with alternate widths in srcset and sizes" style="max-width:100%" />
HTML: IMG with defined data-src
<img id="smush-test-5-img" src="https://playground.damirpecnik.com/wp-content/uploads/2024/11/smush-test-5-2048x1217.jpg"
data-src="https://playground.damirpecnik.com/wp-content/uploads/2024/11/smush-test-5-2048x1217.jpg"
alt="IMG with defined data-src" style="max-width:100%"/>
HTML: IMG with defined data-srcset
<img id="smush-test-6-img" src="https://playground.damirpecnik.com/wp-content/uploads/2024/11/smush-test-6-2048x1365.jpg"
data-srcset="https://playground.damirpecnik.com/wp-content/uploads/2024/11/smush-test-6-2048x1365.jpg"
alt="IMG with defined data-srcset" style="max-width:100%"/>
HTML: IMG with defined data-thumb
<img id="smush-test-7-img" src="https://playground.damirpecnik.com/wp-content/uploads/2024/11/smush-test-7-2048x1534.jpg"
data-thumb="https://playground.damirpecnik.com/wp-content/uploads/2024/11/smush-test-7-2048x1534.jpg"
alt="IMG with defined data-thumb" style="max-width:100%"/>
HTML: IMG with defined data-thumbnail
<img id="smush-test-8-img" src="https://playground.damirpecnik.com/wp-content/uploads/2024/11/smush-test-8-2048x1536.jpg"
data-thumbnail="https://playground.damirpecnik.com/wp-content/uploads/2024/11/smush-test-8-2048x1536.jpg"
alt="IMG with defined data-thumbnail" style="max-width:100%"/>
HTML: IMG with defined data-back
<img id="smush-test-9-img" src="https://playground.damirpecnik.com/wp-content/uploads/2024/11/smush-test-9-2048x1362.jpg"
data-back="https://playground.damirpecnik.com/wp-content/uploads/2024/11/smush-test-9-2048x1362.jpg"
alt="IMG with defined data-back" style="max-width:100%"/>
HTML: IMG with defined data-lazyload
<img id="smush-test-10-img" src="https://playground.damirpecnik.com/wp-content/uploads/2024/11/smush-test-10-2048x1152.jpg"
data-lazyload="https://playground.damirpecnik.com/wp-content/uploads/2024/11/smush-test-10-2048x1152.jpg"
alt="IMG with defined data-lazyload" style="max-width:100%"/>
HTML: PICTURE
<picture>
<source media="(min-width:1536px)" srcset="https://playground.damirpecnik.com/wp-content/uploads/2024/11/smush-test-11-1536x794.jpg">
<source media="(min-width:1024px)" srcset="https://playground.damirpecnik.com/wp-content/uploads/2024/11/smush-test-11-1024x529.jpg">
<source media="(min-width:768px)" srcset="https://playground.damirpecnik.com/wp-content/uploads/2024/11/smush-test-11-768x397.jpg">
<source media="(min-width:300px)" srcset="https://playground.damirpecnik.com/wp-content/uploads/2024/11/smush-test-11-300x155.jpg">
<source media="(min-width:150px)" srcset="https://playground.damirpecnik.com/wp-content/uploads/2024/11/smush-test-11-150x150.jpg">
<img id="smush-test-11-img" src="https://playground.damirpecnik.com/wp-content/uploads/2024/11/smush-test-11-2048x1059.jpg" alt="PICTURE" style="max-width:100%">
</picture>
HTML: PICTURE with Retina 2x in srcset and sizes
<picture>
<source media="(min-width:1536px)" srcset="https://playground.damirpecnik.com/wp-content/uploads/2024/11/smush-test-12-1536x864.jpg, https://playground.damirpecnik.com/wp-content/uploads/2024/11/smush-test-12-2048x1152.jpg 2x" sizes="100vw">
<source media="(min-width:768px)" srcset="https://playground.damirpecnik.com/wp-content/uploads/2024/11/smush-test-12-768x432.jpg, https://playground.damirpecnik.com/wp-content/uploads/2024/11/smush-test-12-1024x576.jpg 2x" sizes="100vw">
<source media="(min-width:300px)" srcset="https://playground.damirpecnik.com/wp-content/uploads/2024/11/smush-test-12-300x169.jpg, https://playground.damirpecnik.com/wp-content/uploads/2024/11/smush-test-12-768x432.jpg 2x" sizes="100vw">
<source media="(min-width:100px)" srcset="https://playground.damirpecnik.com/wp-content/uploads/2024/11/smush-test-12-150x150.jpg, https://playground.damirpecnik.com/wp-content/uploads/2024/11/smush-test-12-300x169.jpg 2x" sizes="100vw">
<img id="smush-test-12-img" src="https://playground.damirpecnik.com/wp-content/uploads/2024/11/smush-test-12-scaled.jpg" alt="PICTURE with Retina 2x in srcset and sizes" style="max-width:100%">
</picture>
INLINE CSS: background-image
<p style="background-image: url('https://playground.damirpecnik.com/wp-content/uploads/2024/11/smush-test-13-1366x2048.jpg');">...</p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Duis dapibus metus eu est pellentesque, ac fermentum turpis laoreet. Suspendisse potenti. Etiam mauris ex, tempus eget ligula ac, sollicitudin euismod lectus.
Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Proin scelerisque leo nec mi facilisis, non finibus velit venenatis.
Fusce semper erat ac dolor feugiat, id vehicula eros ullamcorper. Duis luctus sem eget dolor feugiat dignissim. Vestibulum vel est ut orci ornare tristique imperdiet ut ex.
Fusce dapibus enim nibh, fringilla pharetra massa viverra sed. Nunc laoreet nibh ac velit tincidunt, id scelerisque quam efficitur. Vivamus imperdiet libero eget suscipit posuere. Nam at ligula orci.
INLINE CSS: background (01)
<p style="background: url('https://playground.damirpecnik.com/wp-content/uploads/2024/11/smush-test-14-1536x2048.jpg');">...</p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Duis dapibus metus eu est pellentesque, ac fermentum turpis laoreet. Suspendisse potenti. Etiam mauris ex, tempus eget ligula ac, sollicitudin euismod lectus.
Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Proin scelerisque leo nec mi facilisis, non finibus velit venenatis.
Fusce semper erat ac dolor feugiat, id vehicula eros ullamcorper. Duis luctus sem eget dolor feugiat dignissim. Vestibulum vel est ut orci ornare tristique imperdiet ut ex.
Fusce dapibus enim nibh, fringilla pharetra massa viverra sed. Nunc laoreet nibh ac velit tincidunt, id scelerisque quam efficitur. Vivamus imperdiet libero eget suscipit posuere. Nam at ligula orci.
INLINE CSS: background (02)
<p style="background: no-repeat url('https://playground.damirpecnik.com/wp-content/uploads/2024/11/smush-test-15-1536x2048.jpg');">...</p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Duis dapibus metus eu est pellentesque, ac fermentum turpis laoreet. Suspendisse potenti. Etiam mauris ex, tempus eget ligula ac, sollicitudin euismod lectus.
Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Proin scelerisque leo nec mi facilisis, non finibus velit venenatis.
Fusce semper erat ac dolor feugiat, id vehicula eros ullamcorper. Duis luctus sem eget dolor feugiat dignissim. Vestibulum vel est ut orci ornare tristique imperdiet ut ex.
Fusce dapibus enim nibh, fringilla pharetra massa viverra sed. Nunc laoreet nibh ac velit tincidunt, id scelerisque quam efficitur. Vivamus imperdiet libero eget suscipit posuere. Nam at ligula orci.
INLINE CSS: background (03)
<p style="background: left 5% / 15% 60% repeat-x url('https://playground.damirpecnik.com/wp-content/uploads/2024/11/smush-test-16-2048x1362.jpg');">...</p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Duis dapibus metus eu est pellentesque, ac fermentum turpis laoreet. Suspendisse potenti. Etiam mauris ex, tempus eget ligula ac, sollicitudin euismod lectus.
Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Proin scelerisque leo nec mi facilisis, non finibus velit venenatis.
Fusce semper erat ac dolor feugiat, id vehicula eros ullamcorper. Duis luctus sem eget dolor feugiat dignissim. Vestibulum vel est ut orci ornare tristique imperdiet ut ex.
Fusce dapibus enim nibh, fringilla pharetra massa viverra sed. Nunc laoreet nibh ac velit tincidunt, id scelerisque quam efficitur. Vivamus imperdiet libero eget suscipit posuere. Nam at ligula orci.
INLINE CSS: background (04)
<p style="background: left 5% / 15% 50% repeat-y url('https://playground.damirpecnik.com/wp-content/uploads/2024/11/smush-test-17-2048x1536.jpg');">...</p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Duis dapibus metus eu est pellentesque, ac fermentum turpis laoreet. Suspendisse potenti. Etiam mauris ex, tempus eget ligula ac, sollicitudin euismod lectus.
Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Proin scelerisque leo nec mi facilisis, non finibus velit venenatis.
Fusce semper erat ac dolor feugiat, id vehicula eros ullamcorper. Duis luctus sem eget dolor feugiat dignissim. Vestibulum vel est ut orci ornare tristique imperdiet ut ex.
Fusce dapibus enim nibh, fringilla pharetra massa viverra sed. Nunc laoreet nibh ac velit tincidunt, id scelerisque quam efficitur. Vivamus imperdiet libero eget suscipit posuere. Nam at ligula orci.
INLINE CSS: background (05)
<p style="background: center / contain no-repeat url('https://playground.damirpecnik.com/wp-content/uploads/2024/11/smush-test-18-2048x1241.jpg'), #eee 35% url('https://playground.damirpecnik.com/wp-content/uploads/2024/11/smush-test-18-2-2048x1538.jpg');">...</p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Duis dapibus metus eu est pellentesque, ac fermentum turpis laoreet. Suspendisse potenti. Etiam mauris ex, tempus eget ligula ac, sollicitudin euismod lectus.
Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Proin scelerisque leo nec mi facilisis, non finibus velit venenatis.
Fusce semper erat ac dolor feugiat, id vehicula eros ullamcorper. Duis luctus sem eget dolor feugiat dignissim. Vestibulum vel est ut orci ornare tristique imperdiet ut ex.
Fusce dapibus enim nibh, fringilla pharetra massa viverra sed. Nunc laoreet nibh ac velit tincidunt, id scelerisque quam efficitur. Vivamus imperdiet libero eget suscipit posuere. Nam at ligula orci.
INLINE CSS: background (06)
<p style="background: url('https://playground.damirpecnik.com/wp-content/uploads/2024/11/smush-test-19-2048x1152.jpg'), url('https://playground.damirpecnik.com/wp-content/uploads/2024/11/smush-test-19-2-2048x1152.jpg');">....</p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Duis dapibus metus eu est pellentesque, ac fermentum turpis laoreet. Suspendisse potenti. Etiam mauris ex, tempus eget ligula ac, sollicitudin euismod lectus.
Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Proin scelerisque leo nec mi facilisis, non finibus velit venenatis.
Fusce semper erat ac dolor feugiat, id vehicula eros ullamcorper. Duis luctus sem eget dolor feugiat dignissim. Vestibulum vel est ut orci ornare tristique imperdiet ut ex.
Fusce dapibus enim nibh, fringilla pharetra massa viverra sed. Nunc laoreet nibh ac velit tincidunt, id scelerisque quam efficitur. Vivamus imperdiet libero eget suscipit posuere. Nam at ligula orci.