<-- EXEMPLE 1 - Here is a simple SEO example of image integration -->
<img src="http://yourimg.jpg" alt="add images detail for seo">
  
<-- EXEMPLE 2 - Here is how to make an expert SEO integration of your images -->

<-- Add javascript script LAZY vanilla for support on the page -->
<script src="https://cdn.jsdelivr.net/npm/vanilla-lazyload@17.8.3/dist/lazyload.min.js"></script>
  
<-- Here is the implementation of SEO optimized image -->
<picture>
  <source type="image/jpg"  media="(max-width:800px)" data-srcset="http://yourimg-low-resolution-traditional-format.jpg 640w"/>
  <source type="image/jpg"  media="(min-width:801px)" data-srcset="http://yourimg-high-resolution-traditional-format.jpg 1200w"/>
  <source type="image/webp"  media="(max-width:800px)" data-srcset="http://yourimg-low-resolution-specfial-format.webp 640w"/>
  <source type="image/webp"  media="(min-width:801px)" data-srcset="http://yourimg-high-resolution-specfial-format.webp 1200w"/>
  <img alt="add images detail for seo" class="lazy" 
               src="http://yourimg-low-resolution-traditional-format.jpg 640w" 
               data-src="http://yourimg-high-resolution-traditional-format.jpg 1200w"/>
 </picture>

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.