Images adaptatives dans prestashop 1.7.7.5

[mfs83]

Bonjour,

Comment utiliser des images qui s’adaptent aux appareils selon les différentes tailles d’écran.

J’ai vu cet article

https://developer.mozilla.org/fr/docs/Learn/HTML/Multimedia_and_embedding/Responsive_images

quand pensez vous? Pourriez vous m'en
dire plus Merci
 

[Baba deCode]

salut,

en mettant en place l'attribut "srcset=" dans les balise <img>

cdt

[mfs83]

ok car dans l'article ils disent d'ajouter un fichier html ?

Et ça fonction vraiment ?

[Baba deCode]

1 minute ago, mfs83 said:

Et ça fonction vraiment ?

Bien sur c'est meme indispensable pour de bonne perf, perso je te conseille de faire du lazy loading + du responsive image avec la librairie Lazysizes: https://github.com/aFarkas/lazysizes

voila comment j'ai implenté ca sur mon site sur une page catégorie:

 <img
                src="{Link::getImageLink($product.link_rewrite,$img_cover.id_image,'cart_default')}"
                srcset="{Link::getImageLink($product.link_rewrite,$img_cover.id_image,'home_default')} 2x"
                  class="lazyload img-fluid"
                  data-src="{Link::getImageLink($product.link_rewrite,$img_cover.id_image,'home_default')}"
                 
                  alt="{if !empty($product.cover.legend)}{$product.cover.legend}{else}{Manufacturer::getnamebyid($product.id_manufacturer)} {$product.name} {l s='cheap' d='Shop.Theme.Venusproduct'}{/if}"
                  loading="lazy"
                  data-full-size-image-url="{$product.cover.large.url}"
                  width="302"
                  height="302"
                />

un exemple: https://venus.paris/produits/soin-des-cheveux/creme-capillaire/

 

cordialement,

[mfs83]

OK mais on le place où exactement ce code ,dans quel fichier ?

[Baba deCode]

dans tout tpl qui injecte des images, avec les bonne variables bien sur,

cdt

[mfs83]

ok merci je vais aller étudier tous ça   

[Manu-41]

Bonjour, j'ai vu un module qui fait cela sur addon.

Il n’y a pas d'avis, mais je vois de plus en plus de site qui utilise ce system.

À voir cotées performances 😉 si c'est bien ou pas.

 

[mfs83]

Lequel ?

[Manu-41]

https://addons.prestashop.com/fr/performance-site/44906-images-adaptatives.html