mfs83 Posted July 16, 2021 Posted July 16, 2021 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 Share this post Link to post Share on other sites More sharing options...
Alexandre Carette Posted July 16, 2021 Posted July 16, 2021 salut, en mettant en place l'attribut "srcset=" dans les balise <img> cdt Share this post Link to post Share on other sites More sharing options...
mfs83 Posted July 16, 2021 Posted July 16, 2021 ok car dans l'article ils disent d'ajouter un fichier html ? Et ça fonction vraiment ? Share this post Link to post Share on other sites More sharing options...
Alexandre Carette Posted July 16, 2021 Posted July 16, 2021 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, Share this post Link to post Share on other sites More sharing options...
mfs83 Posted July 18, 2021 Posted July 18, 2021 OK mais on le place où exactement ce code ,dans quel fichier ? Share this post Link to post Share on other sites More sharing options...
Alexandre Carette Posted July 18, 2021 Posted July 18, 2021 dans tout tpl qui injecte des images, avec les bonne variables bien sur, cdt Share this post Link to post Share on other sites More sharing options...
mfs83 Posted July 18, 2021 Posted July 18, 2021 ok merci je vais aller étudier tous ça Share this post Link to post Share on other sites More sharing options...
Manu-41 Posted July 18, 2021 Posted July 18, 2021 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. Share this post Link to post Share on other sites More sharing options...
mfs83 Posted July 18, 2021 Posted July 18, 2021 Lequel ? Share this post Link to post Share on other sites More sharing options...
Manu-41 Posted July 19, 2021 Posted July 19, 2021 https://addons.prestashop.com/fr/performance-site/44906-images-adaptatives.html Share this post Link to post Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now