Yann74 Posted June 3, 2016 Share Posted June 3, 2016 Bonjour à tous ! Savez-vous comment est géré l'option "images haute définition" ? Ce qui me paraitrais logique, c'est de créer des images de deux fois la taille souhaitée, d'envoyer cette image et que PrestaShop génère deux fichiers : un à la résolution classique et un autre à la résolution haute définition, et que selon écran de l'internaute, l'une ou l'autre image soit chargée. Mais apparemment c'est pas comme ça que ça marche Link to comment Share on other sites More sharing options...
doekia Posted June 3, 2016 Share Posted June 3, 2016 (edited) Ce qui me paraîtrait logique c'est de regarder la configuration des images et de s'interroger un minimum sur son usage, mais apparemment c'est pas comme ça que ça marche Edited June 3, 2016 by doekia (see edit history) 1 Link to comment Share on other sites More sharing options...
Yann74 Posted June 5, 2016 Author Share Posted June 5, 2016 J'ai regardé la configuration des images et je me suis interrogé sur son usage, j'ai cherché à résoudre mon problème seul avant de poser la question sur le forum. En ce qui concerne la gestion des écrans haute définition, ce que j'ai toujours observé, c'est soit l'utilisation de formats d'images vectorielles, soit le changement de l'image source si l'écran de l'internaute possède une définition de 1,5 fois la normale. Sur un autre site, j'ai mis en place un script disponible gratuitement qui permet de remplacer la source de l'image par le rajout de "@2x" à la fin de l'URL. Il faut donc envoyer sur le serveur deux images : une qui s'appelle monimage.png qui possède la résolution souhaitée, et une autre [email protected] qui possède deux fois la résolution souhaitée. J'ai inspecté le code source d'une page produit sous PrestaShop et je n'ai remarqué aucun changement, que je soit sur un écran à résolution classique ou que je soit sur un écran à haute résolution. Je n'ai remarqué aucun rajout de class ou tentative de modification de la source de l'image. Pourtant, dans le répertoire des images, accessible via FTP, il y a bien deux formats d'images générés (25-thickbox_default.jpg et 25-thickbox_default2x.jpg). Quand je suis sur l'écran THD, même en vidant le cache du navigateur utilisé, je voit bien que l'image utilisée est à résolution classique et pas adaptée THD. Link to comment Share on other sites More sharing options...
doekia Posted June 5, 2016 Share Posted June 5, 2016 Tu envois ton image a 2x la taille genre 1200x1200, tu as 2 miniatures définies, l'une dite standard (admettons 500x500), l'autre hires (admettons 1200x1200) et voilà. Il te suffit en fonction de la definition de racharger en ajax l'image 1200x1200 pour toute image 500x500 L'option haute def du BO concerne le mode de compression (donc perte visuelle), rien à voir avec rétina Quand aux images vectorielles ... pour tes produits ... restons sérieux Link to comment Share on other sites More sharing options...
Yann74 Posted June 6, 2016 Author Share Posted June 6, 2016 (edited) L'image vectorielle était un exemple des pratiques pour s'adapter aux écrans THD, je suis donc très sérieux J'ai créé une image de 916 x 916 pixels, soit deux fois la résolution des images produits du thème bootstrap d'origine, j'ai chargé cette image depuis le BO, vidé tous les caches, et je n'observe aucun changement sous un écran THD, l'image semble toujours pixelisée. Donc par défaut PrestaShop n'affiche pas une image de deux fois la taille si l'écran est THD mais réduit simplement la compression ? Edited June 6, 2016 by Yann74 (see edit history) Link to comment Share on other sites More sharing options...
Mediacom87 Posted June 6, 2016 Share Posted June 6, 2016 Bonjour, pour afficher 2 types d'images différent si c’est un écran retina il faut le développer que se soit au niveau du choix du format d'image et du css. Mais bon de bonne images restent de bonnes images sur un retina. Link to comment Share on other sites More sharing options...
doekia Posted June 6, 2016 Share Posted June 6, 2016 J'ai vraiment l'impression que tu as ouvert ce topic sur un sujet pour lequel tu ne comprends pas grand chose. Le format jpg permet lors de l'enregistrement d'appliquer un facteur de compression dite 'losy', on perd volontaire des pixel car l'oeil humain ne les différencient pas (un peu comme la compression mp3 à 64Kbits). De plus lors de la réduction des images une précision plus ou moins grande s'applique aux algorithme d'aliasing ce qui donne une qualité d'image +/- grande à définition égale. Ici le format final n'importe pas Lorsque tu parles de rétina HD, tu veux envoyer une image 2x plus grande car le périphérique zoom en quelque sorte, il te faut donc une image avec 2x plus de détail. PrestaShop sait gérer cette image en miniature et il ne te reste plus qu'a modifier ton thème pour tirer parti de cela, donc afficher l'image "crisp" quand tu détectes rétina Link to comment Share on other sites More sharing options...
Yann74 Posted June 6, 2016 Author Share Posted June 6, 2016 J'ai vraiment l'impression que tu as ouvert ce topic sur un sujet pour lequel tu ne comprends pas grand chose. Parce qu'on devrais ouvrir un topic uniquement sur un sujet qu'on maitrise ? Qu'est-ce qu'on pourrais avoir de beau à se raconter alors ? J'ai créé pas mal de sites sous WP, tous optimisés écrans THD, je connais un peu le sujet, même si je ne suis pas expert. J'ai ouvert ce topic parce que je pense qu'il y d'autres personnes qui, comme moi, se posent la question de comment fonctionne cette option. Il y a d'autres sujets ouverts, mais en Anglais, pas facile pour tout le monde de comprendre ce qui est dit. Ma question initiale n'était pas "comment gérer les écrans haute définition" mais "comment est gérée l'option images haute définition". Je vais continuer à creuser la question, je me ferais un plaisir d'apporter une réponse claire, et non condescendante aux utilisateurs souhaiteraient également proposer une qualité d'image top à tous les utilisateurs. Merci de votre aide. Link to comment Share on other sites More sharing options...
Yann74 Posted June 6, 2016 Author Share Posted June 6, 2016 Sur product.tpl, ligne 84, en changeant 'large_default' par 'large_default2x' on arrive à afficher une image adaptée écrans THD, mais celle-ci s'affiche aussi sur les écrans normaux, de même sur product-list.tpl. Je vais donc chercher à ce que dès que l'écran de l'internaute est THD, la source de l'image rajoute '2x' à la fin, sinon rien ne change, pour voir ce que ça donne. Dès que je trouve la solution je la poste ici. Link to comment Share on other sites More sharing options...
Mediacom87 Posted June 6, 2016 Share Posted June 6, 2016 vous pouvez aussi utiliser ce plugin jquery http://dense.rah.pw/ qui permet de lié le ratio au nom de d’image et en créant des format d’images différent vous devriez réussir à tout faire correspondre. Link to comment Share on other sites More sharing options...
Yann74 Posted June 6, 2016 Author Share Posted June 6, 2016 vous pouvez aussi utiliser ce plugin jquery http://dense.rah.pw/ qui permet de lié le ratio au nom de d’image et en créant des format d’images différent vous devriez réussir à tout faire correspondre. Merci ! Je vais creuser tout ça cet après-midi Link to comment 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