a post with advanced image components

This is an example post with advanced image components.

Image Slider

This is a simple image slider. It uses the Swiper library. Check the examples page for more information of what you can achieve with it.

Image Comparison Slider

This is a simple image comparison slider. It uses the img-comparison-slider library. Check the examples page for more information of what you can achieve with it.

<!--
  See https://www.debugbear.com/blog/responsive-images#w-descriptors-and-the-sizes-attribute and
  https://developer.mozilla.org/en-US/docs/Learn/HTML/Multimedia_and_embedding/Responsive_images for info on defining 'sizes' for responsive images
-->

  <source
    class="responsive-img-srcset"
    
      srcset="/assets/img/prof_pic-480.webp 480w,/assets/img/prof_pic-800.webp 800w,/assets/img/prof_pic-1400.webp 1400w,"
      type="image/webp"
    
      sizes="95vw"
    
  >

<img
  src="/assets/img/prof_pic.jpg"
  
    class="img-fluid rounded z-depth-1"
  
    width="100%"
  
    height="auto"
  
    loading="lazy"
  
  onerror="this.onerror=null; $('.responsive-img-srcset').remove();"
>

</picture>

</figure>

</img-comparison-slider> –>

Image Slider

Image Comparison Slider

Enjoy Reading This Article?