<-- 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>
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.