Derniers messages sur Zeste de Savoirhttps://zestedesavoir.com/forums/2023-02-13T12:40:39+01:00Les derniers messages parus sur le forum de Zeste de Savoir.Charger des images de taille différentes selon la largeur de l'écran, message #2491202023-02-13T12:40:39+01:00Ymox/@Ymoxhttps://zestedesavoir.com/forums/sujet/16811/charger-des-images-de-taille-differentes-selon-la-largeur-de-lecran/?page=1#p249120<p>Bon, au final, c’est tout bête : <code>max-width</code> plutôt que <code>max-size</code> <img src="/static/smileys/svg/langue.svg" alt=":p" class="smiley"></p>Charger des images de taille différentes selon la largeur de l'écran, message #2490802023-02-10T09:44:41+01:00Ymox/@Ymoxhttps://zestedesavoir.com/forums/sujet/16811/charger-des-images-de-taille-differentes-selon-la-largeur-de-lecran/?page=1#p249080<p>Alors le truc, c’est que je l’ai fait dès que je me suis rendu compte qu’un redimensionnement de viewport ne lançait pas de rechargement, et cela ne semble pas changer ce que j’espérais.</p>Charger des images de taille différentes selon la largeur de l'écran, message #2490592023-02-09T11:31:57+01:00WinXaito/@WinXaitohttps://zestedesavoir.com/forums/sujet/16811/charger-des-images-de-taille-differentes-selon-la-largeur-de-lecran/?page=1#p249059<blockquote>
<p>Pour information, j’utilise le simulateur de taille des navigateurs, mais je force le rafraichissement après avoir changé la taille. J’imagine que pour des raisons d’économie, ceertains navigateurs ne rechargent pas de nouvelles ressources dans ce cas.</p>
</blockquote>
<p>Pense à bien faire un Ctrl+F5, ça devrait (normalement) recharger toutes les ressources </p>Charger des images de taille différentes selon la largeur de l'écran, message #2490562023-02-09T10:38:53+01:00Ymox/@Ymoxhttps://zestedesavoir.com/forums/sujet/16811/charger-des-images-de-taille-differentes-selon-la-largeur-de-lecran/?page=1#p249056<p>Oui, je découvre d’ailleurs qu’au survol de l’image dans l’inspecteur de DOM, il est fournit la taille de l’image chargée. Edge Chromium ne semble pas s’en sortir avec la seule balise <code><img /></code>, Firefox m’affiche comme quoi ce serait l’image correcte qui est chargée, et c’est avec lui que j’ai fait la plupart des tests.</p>
<p>L’image par défaut n’est apparemment pas prise en compte dans ce que je fais, étant donné que c’est toujours la plus grande qui est prise et que par défaut j’ai demandé la plus petite.</p>
<p>Pour information, j’utilise le simulateur de taille des navigateurs, mais je force le rafraichissement après avoir changé la taille. J’imagine que pour des raisons d’économie, certains navigateurs ne rechargent pas de nouvelles ressources dans ce cas.</p>Charger des images de taille différentes selon la largeur de l'écran, message #2490502023-02-09T07:22:15+01:00WinXaito/@WinXaitohttps://zestedesavoir.com/forums/sujet/16811/charger-des-images-de-taille-differentes-selon-la-largeur-de-lecran/?page=1#p249050<p>Si tu test cette page (référencé par la doc MDN: <a href="https://mdn.github.io/learning-area/html/multimedia-and-embedding/responsive-images/responsive.html">https://mdn.github.io/learning-area/html/multimedia-and-embedding/responsive-images/responsive.html</a> ) est-ce que ça fonctionne comme attendu ?</p>
<p>D’après cette doc: <a href="https://developer.mozilla.org/fr/docs/Learn/HTML/Multimedia_and_embedding/Responsive_images">https://developer.mozilla.org/fr/docs/Learn/HTML/Multimedia_and_embedding/Responsive_images</a></p>
<p>Mais je ne vois pas de différence notable avec ton code. En dehors du fait qu’ils mettent l’image la plus grande par défaut.</p>Charger des images de taille différentes selon la largeur de l'écran, message #2490492023-02-09T00:13:31+01:00Ymox/@Ymoxhttps://zestedesavoir.com/forums/sujet/16811/charger-des-images-de-taille-differentes-selon-la-largeur-de-lecran/?page=1#p249049<p>Bonsoir</p>
<p>Une fois n’est pas coutume, j’ai des soucis de mise en page, et là, c’est l’histoire d’optimiser le chargement d’images en fonction de la "largeur d’écran" détectée.</p>
<p>Pour l’instant, je m’amuse avec des données de Random User Api, qui fournit gracieusement trois tailles d’image pour un utilisateur généré. Ce que j’aimerais, c’est réussir à comprendre et faire en sorte que la plus petite image se charge pour les petits écrans (moins de 576 pixels).</p>
<p>J’ai donc mis en place la balise suivante.</p>
<div class="hljs-code-div hljs-code-html"><div class="hljs-line-numbers"><span data-count="1"></span><span data-count="2"></span><span data-count="3"></span><span data-count="4"></span><span data-count="5"></span><span data-count="6"></span><span data-count="7"></span><span data-count="8"></span><span data-count="9"></span><span data-count="10"></span></div><pre><code class="hljs language-html"><span class="hljs-tag"><<span class="hljs-name">img</span>
<span class="hljs-attr">srcset</span>=<span class="hljs-string">"https://randomuser.me/api/portraits/thumb/men/30.jpg 48w,
https://randomuser.me/api/portraits/med/men/30.jpg 72w,
https://randomuser.me/api/portraits/men/30.jpg 128w"</span>
<span class="hljs-attr">sizes</span>=<span class="hljs-string">" (max-size: 575px) 48px,
(max-size: 767px) 72px,
128px"</span>
<span class="hljs-attr">src</span>=<span class="hljs-string">"https://randomuser.me/api/portraits/thumb/men/30.jpg"</span>
<span class="hljs-attr">alt</span>=<span class="hljs-string">"Pwet pwet"</span>
/></span>
</code></pre></div>
<p>De ce que je crois avoir finalement compris, c’est que dans <code>srcset</code>, on spécifie les images et leurs tailles respectives (pas en pixels pour les histoires de densité). Jusque là, ça me paraît OK.</p>
<p>Par contre, je dois avoir compris partiellement, ou mal, ou même totalement à l’envers ce que je dois mettre dans <code>sizes</code>, vu que c’est apparemment toujours la plus grande image qui semble se charger. Avec l’exemple que j’ai mis, je m’attendais à ce que l’image chargée pour un très petit écran soit celle qui est de 48 pixels.</p>
<p>Quelqu’un pourrait relever mon erreur ?</p>
<p>Merci beaucoup</p>Mauvaise adaptation "À la Une", message #1157882016-06-26T17:29:42+02:00the_new_sky/@the_new_skyhttps://zestedesavoir.com/forums/sujet/6407/mauvaise-adaptation-a-la-une/?page=1#p115788<p>À d'accord, merci de la réponse </p>Mauvaise adaptation "À la Une", message #1157592016-06-26T12:38:24+02:00Andr0/@Andr0https://zestedesavoir.com/forums/sujet/6407/mauvaise-adaptation-a-la-une/?page=1#p115759<p>En fait, c'est surtout voulu. C'est ce qui avait été décidé lors des discussions sur la refonte de la page d'accueil.</p>Mauvaise adaptation "À la Une", message #1157522016-06-26T11:59:26+02:00the_new_sky/@the_new_skyhttps://zestedesavoir.com/forums/sujet/6407/mauvaise-adaptation-a-la-une/?page=1#p115752<p>Salut ,
J'ai reçu un Nexus 5X et j'ai remarqué que sur son écran de 5,2" la page d'accueil s'adaptait moyennement bien…</p>
<p><figure><img alt="" src="/media/galleries/3378/6c7eb4f8-c5d4-468e-9a37-fa04cee5c05e.png"><figcaption>Le petit soucis </figcaption></figure></p>
<p>Comme vous le voyez, je ne peux voir que trois vignettes "À la Une" dont une qui plus grande que les autres, alors que visiblement on pourrait en afficher quatre de même dimension.</p>
<p>J'ignore si c'est connu ou non.</p>
<p>À vrai dire c'est presque un détail mais je trouve ça assez dommage.</p>Remonter en haut de la page, message #1017122016-03-08T00:25:23+01:00EtienneR/@EtienneRhttps://zestedesavoir.com/forums/sujet/5548/remonter-en-haut-de-la-page/?page=1#p101712<p>Effectivement j'utilise Firefox sur… FirefoxOS <img alt=":D" src="/static/smileys/heureux.png"></p>Remonter en haut de la page, message #1017052016-03-07T22:24:14+01:00PG06/@PG06https://zestedesavoir.com/forums/sujet/5548/remonter-en-haut-de-la-page/?page=1#p101705<p>Peut-être que le navigateur ne le fait pas, mais l'OS de l'appareil non plus ?</p>Remonter en haut de la page, message #1016872016-03-07T20:53:19+01:00gustavi/@gustavihttps://zestedesavoir.com/forums/sujet/5548/remonter-en-haut-de-la-page/?page=1#p101687<p>Firefox ne le fait pas.</p>Remonter en haut de la page, message #1016242016-03-07T17:15:50+01:00SpaceFox/@SpaceFoxhttps://zestedesavoir.com/forums/sujet/5548/remonter-en-haut-de-la-page/?page=1#p101624<p>Ton navigateur ne fais pas ça nativement ?</p>
<p>Le mien (Opera) m'affiche une flèche pour ce faire quand je défile un grand coup vers le haut.</p>Remonter en haut de la page, message #1016222016-03-07T17:05:07+01:00EtienneR/@EtienneRhttps://zestedesavoir.com/forums/sujet/5548/remonter-en-haut-de-la-page/?page=1#p101622<p>Bonjour,</p>
<p>Je ne sais pas si vous êtes nombreux et nombreuses à utiliser votre tablette / smartphone pour naviguer sur le site et en particulier sur le forum. Pour ma part, je trouve qu'il manque une fois arrivé en bas à ou mi-chemin (de la hauteur de la page) un bouton "remonter en haut" afin de retourner dans la navigation du site via le menu de navigation. Ou une autre solution, fixer la têtière (le header) en haut de la page.</p>icones pixelisees, message #469002015-03-07T15:33:34+01:00Sandhose/@Sandhosehttps://zestedesavoir.com/forums/sujet/2300/icones-pixelisees/?page=2#p46900<p>Nek: N'ayant pas le problème chez moi, j'aurais besoin que tu regardes de ton côté si c'est le bon sprite qui est chargé. Pour ça, suis les <a href="https://developer.chrome.com/devtools/docs/remote-debugging">instructions fournies par Google pour activer le Remote Debugging</a> sur Chrome, et inspecte une page sur le site en étant connecté. Il faudrait que tu navigues jusqu'à l'élément ci-dessous, et que tu vérifies dans l'onglet style que c'est bien le sprite<strong>@2x</strong> et non le sprite "normal" qui est appliqué en background (celui-ci devrait être barré, comme sur la screenshot).</p>
<p><img alt="" src="http://s.sandhose.fr/zestedesavoir/remote-debug.png"></p>
<p>Si tu as quelconque soucis, n'hésites pas à me MP ! <img alt=":)" src="/static/smileys/smile.png"></p>icones pixelisees, message #468542015-03-07T09:24:38+01:00Nek/@Nekhttps://zestedesavoir.com/forums/sujet/2300/icones-pixelisees/?page=1#p46854<p>P.S. Le problème est toujours présent.</p>icones pixelisees, message #417132015-01-30T17:39:27+01:00viki53/@viki53https://zestedesavoir.com/forums/sujet/2300/icones-pixelisees/?page=1#p41713<figure><blockquote>
<p>J'ai du mal a voir le rapport avec la compression
</p>
</blockquote>
<figcaption><p><a href="http://zestedesavoir.com/forums/sujet/2300/icones-pixelisees/?page=1#p41694">Kje</a></p></figcaption></figure><p>Ça m'est déjà arrivé que certains navigateurs décodent mal des JPEG (surtout des progressifs) compressés. Jamais des PNG, mais ça peut arriver, c'est vrai…</p>icones pixelisees, message #417092015-01-30T17:12:43+01:00Situphen/@Situphenhttps://zestedesavoir.com/forums/sujet/2300/icones-pixelisees/?page=1#p41709<figure><blockquote>
<p>Heu… tu es sur ? Tu n'a pas un Chrome dans le play store différent ? Avec la même icone que celui version PC ?</p>
</blockquote>
<figcaption><p><a href="http://zestedesavoir.com/forums/sujet/2300/icones-pixelisees/?page=1#p41704">Kje</a></p></figcaption></figure><p>Oui, Chrome est bien le navigateur par défaut des ROMs Android des Nexus !</p>icones pixelisees, message #417042015-01-30T16:31:13+01:00Kje/@Kjehttps://zestedesavoir.com/forums/sujet/2300/icones-pixelisees/?page=1#p41704<p>Heu… tu es sur ? Tu n'a pas un Chrome dans le play store différent ? Avec la même icone que celui version PC ?</p>icones pixelisees, message #416972015-01-30T15:47:33+01:00Nek/@Nekhttps://zestedesavoir.com/forums/sujet/2300/icones-pixelisees/?page=1#p41697<p>C'est le navigateur par défaut sur les nexus. :/</p>icones pixelisees, message #416942015-01-30T15:16:30+01:00Kje/@Kjehttps://zestedesavoir.com/forums/sujet/2300/icones-pixelisees/?page=1#p41694<p>J'ai du mal a voir le rapport avec la compression (surtout pour des formats si classique) mais pour info le PNG est un format avec compression, sans perte certes, mais avec compression tout de même.</p>
<p>Mais dans tous les cas, Chrome semble être en faute puisqu'il n'a pas de soucis avec FF.</p>
<p>@Nek : et avec la navigateur par défaut d'android ?</p>