28172 sujets

CSS et mise en forme, CSS3

Redimensionnement en css/html

Bonjour,

quand je teste mon site sur Gtmetrix, leur serveur me signale que mes images en 320x240 sont redimensionnées en html ou css en 156x124, et que de ce fait je gaspille de la bande passante.
Le message en Anglais : "The following images are resized in HTML or CSS. Serving scaled images could save 115.4KiB (50% reduction)". Et suit une longue liste de toutes mes images redimensionnées :

http://cliniquejembe.free.fr/Images/Jeli-Dunun-320-C.JPG is resized in HTML or CSS from 320x240 to 159x124. Serving a scaled image could save 20.0KiB (50% reduction).
........./
Pourtant, nulle part, dans mon css ou html, je ne redimensionne ces images. Je ne sais pas où il va chercher ces valeurs de 156x124. J'ai tenté de les mettre en 156x124, mais la dégradation est trop importante. J'ai aussi tenté de donner des dimensions à ces images width:"320px" height="auto". Rien n'y fait, j'ai toujours le même message.

Je n'utilise pas srcset, mes images sont servies de la façon suivante :


<div class="swip">		
<figure>
<picture> 
   <div id="cf">
  <img class="bottom" src="Images/Fer-Pret-320-C.jpg" width="320px" height="auto" alt="Fer pr&ecirc;t" title="Fer pr&circ;t" class="arrondie"/>
  <img class="top" src="Images/Croix-320-C.JPG" width="320px" height="auto" alt="Croix" title="Croix de cordes" class="arrondie"/>
</div>
</figure>
</picture>

et le css Smiley decu juste le début)


#cf {
  position:relative;
  height:auto;
  width:auto;
  margin:0 auto;
}

#cf img {
  position:absolute;
  left:0;
  height:8em;width:auto;/* Tenté ici des dimensions imposées, pour remplir le "swip" dans tous les cas */
  border-radius: 10px;
  -webkit-transition: opacity .5s ease-in-out;
  -moz-transition: opacity .5s ease-in-out;
  -o-transition: opacity .5s ease-in-out;
  transition: opacity .5s ease-in-out;
}

Il s'agit d'un bandeau d'images situé sous le menu. En résolutions desktop, une autre image se superpose à la première au survol de la souris. En résolution smartphones, chaque image est agrandie au survol.

Merci pour des infos sur ce problème.
parsimonhi a écrit :
mina8000 = spammer


j'avais aussi pensé à ça, je n'ai pas répondu.
Merci.
Modérateur
Bonjour,

Sinon, en ce qui concerne la taille des images, tu as un height: 8em dans le css pour tes images.

C'est peut-être ça ? (si 1em vaut 16 px, 8 em vaut 128 px)
EDIT: si 1em vaut 18px, 8em vaut 144 px, et 8em - 2*10px (le border) vaut 124px => CQFD

Amicalement,
Modifié par parsimonhi (29 Jan 2019 - 19:44)
Oui, mais ce "height:8em était là pour autre chose, arriver à faire en sorte que les images restent centrées verticalement dans la cellule grid qui les renferment, au changement de résolution. C'était pas très grave, mais un peu disgracieux. Ce height:8em résolvait le problème (sans que je sache comment), mais avec un étirement des photos sous certaines résolutions ! J'ai abandonné et carrément enlevé le background sous les images, ainsi que les deux lignes de séparation en bleu.. Ces images sont maintenant seules. A défaut d'avoir réglé ce problème en css, je le supprime, en le cachant Smiley langue
Par contre, l'autre problème est bien là et je n'ai pas la solution.

Cordialement.
Modérateur
Bonjour,
Bongota a écrit :
Par contre, l'autre problème est bien là et je n'ai pas la solution.

Quel autre problème (peu clair tout ça) ?

Amicalement,
Bonjour,
quel autre problème, mais le problème qui a donné le titre à mon post...
J'ai une information plus précise à ce sujet. En effectuant un test sur les images avec https://webspeedtest.cloudinary.com/
voilà une réponse :
"The current image size (320x240) is larger than the effective rendered size (159x119) and is being scaled down by the browser."
Voilà qui est plus précis, mais c'est la première fois que j'ai ce genre de réponse sur un test. C'est le navigateur qui redimensionne mes images, mais pourquoi ?
Ce site me propose aussi de convertir mes images au format webp.
Modérateur
Bonjour,

EDIT3: réponse modifiant les précédentes versions qui racontaient n'importe quoi (mea culpa)

1) Tu peux faire un redimensionnement de tes images si tu veux avec un logiciel de traitement d'images (ton site sera plus rapide à charger). Mais tu peux aussi bien les laisser comme elles sont.

2) Ensuite, dans les images, il peut y avoir tout un tas d'informations qui ne servent pas pour un usage dans une page web, d'où des conversions éventuelles à faire (les logiciels de traitement d'images ont en général une case à cocher qui permet de faire cette conversion).

3) Ton code, ça ne va pas du tout. Mais je ne sais pas trop quel résultat final tu veux obtenir (combien d'images, quelle taille elles doivent avoir au final, pour quelle résolution d'écran, et s'il y en a trop, retour à la ligne possible, ou bien utilisation de la propriété overflow, quel effet un hover doit produire, etc.)

Déjà, les attributs width et height de la balise image ne peuvent avoir comme valeur qu'un nombre (sans "px" derrière, et "auto" n'est pas une valeur possible). Ce b'est pas du css. Cette valeur est un nombre de pixels : c'est le navigateur qui fait la transformation de l'image. Mettre une valeur dans ces attributs met de plus la panique dans le css. Mon conseil : choisis soit les attributs, soit le css, mais pas un mélange des deux (tout en css est mieux selon moi).

Amicalement,
Modifié par parsimonhi (30 Jan 2019 - 12:08)
Modérateur
Bonjour,

Ha, il me semble avoir compris (j'avais lu trop vite la toute première phrase de ton premier post : mea culpa).

Tu as donc été tester ton site sur un testeur de site.

Bah, tu t'en fous de ce qu'ils racontent, et puis voilà Smiley smile

Amicalement,
mina8000 a écrit :
hmm J'ai compris mais selon toi quelle est la cause pour qu'une page web s'affiche différamment sur le même navigateur.


Tu sens l'intelligence du mec... Smiley vieux

Il te répond sur ton sujet (web)
MAIS son but est .... je sais pas.. partagé des liens de site pornos...   Smiley roflol

Mais là où sont QI dépasse tout entendement c'est qu'il cache les liens ! Smiley whattha

...... et non c'est faux... Smiley hum
il a pas caché les liens.....

Un génie.   Smiley director
Modifié par JENCAL (30 Jan 2019 - 11:33)
Modérateur
Bonjour,

A propos de mina8000

JENCAL a écrit :
Tu sens l'intelligence du mec... Smiley vieux


Il s'agit peut-être d'un robot. Il crée régulièrement des comptes ici. Il pioche sur le forum des textes au hasard pour essayer de passer inaperçu, il teste peut-être la vitesse de réaction des admins du site, et il place parfois ses liens pornos.

Ils sont peut-être plusieurs personnes/robots aussi.

Contrairement à ce que tu peux penser, ce n'est pas forcément de l'idiotie, y a peut-être du pognon derrière à la clé.

Amicalement,
parsimonhi a écrit :
Bonjour,

A propos de mina8000



Il s'agit peut-être d'un robot. Il crée régulièrement des comptes ici. Il pioche sur le forum des textes au hasard pour essayer de passer inaperçu, il teste peut-être la vitesse de réaction des admins du site, et il place parfois ses liens pornos.

Ils sont peut-être plusieurs personnes/robots aussi.

Contrairement à ce que tu peux penser, ce n'est pas forcément de l'idiotie, y a peut-être du pognon derrière à la clé.

Amicalement,

Merci pour ces précisions ^^
Pognon ou pas, c'est de l'idiotie de partager du porn sur un forum spé dev.
Je me demande bien comment fonctionne la rémunération, s'il y a.
parsimonhi a écrit :
Bonjour,

EDIT3: réponse modifiant les précédentes versions qui racontaient n'importe quoi (mea culpa)

1) Tu peux faire un redimensionnement de tes images si tu veux avec un logiciel de traitement d'images (ton site sera plus rapide à charger). Mais tu peux aussi bien les laisser comme elles sont.

2) Ensuite, dans les images, il peut y avoir tout un tas d'informations qui ne servent pas pour un usage dans une page web, d'où des conversions éventuelles à faire (les logiciels de traitement d'images ont en général une case à cocher qui permet de faire cette conversion).

3) Ton code, ça ne va pas du tout. Mais je ne sais pas trop quel résultat final tu veux obtenir (combien d'images, quelle taille elles doivent avoir au final, pour quelle résolution d'écran, et s'il y en a trop, retour à la ligne possible, ou bien utilisation de la propriété overflow, quel effet un hover doit produire, etc.)

Déjà, les attributs width et height de la balise image ne peuvent avoir comme valeur qu'un nombre (sans "px" derrière, et "auto" n'est pas une valeur possible). Ce b'est pas du css. Cette valeur est un nombre de pixels : c'est le navigateur qui fait la transformation de l'image. Mettre une valeur dans ces attributs met de plus la panique dans le css. Mon conseil : choisis soit les attributs, soit le css, mais pas un mélange des deux (tout en css est mieux selon moi).

Amicalement,


OK, free, c'est bien pour tester des sites, gratuitement, mais c'est certain que ce n'est pas un hébergeur et, comme tu le dis, ils limitent la bande passante. D'où le problème de ces images. J'ai un hébergeur pro pour un autre site, je vais effectuer un essai avec les mêmes images et la même page, juste pour vérifier.

J'ai effectué un redimensionnement des images sur la page d'accueil, sans pertes cette fois. Le message n'est effectivement plus là, et le poids des images à été divsé presque par trois. A moi de voir si je veux m'affranchir de cette contrainte de free ou pas. Par contre, je dois rectifier, les images sont devenues carrées avec les dimensions proposées.

Pour ce qui est des metadonnées, quand j'effectue des conversions sous Gimp, j'enlève systématiquement les informations inutiles, excepté l'option "progressif".

Merci pour l'indication des px à omettre, c'est l'habitude de les mettre dans les media queries. Tu pourras remarquer que j'ai déjà enlevé ces dimensions.

Ce que je veux ? Il me semble que le site parle de lui-même. Comme tout le monde, quelques images pour agrémenter les pages et montrer des exemples de réalisations. Un bandeau de cinq à six images (je ne veux pas de slider ici), avec changement d'image et un petit effet au survol, de façon à en avoir douze à disposition. Et en mode résolutions smartphones, où le poids devient un handicap, uniquement six images avec un effet "bounce" au survol. Et le tout en "responsive", ce qui fonctionne actuellement. Ce qui est là est ce que je veux, bien que de multiples options puissent êtres choisies pour des images. Sur ce site et sur d'autres, j'ai déjà testé des sliders, des images de fond, etc. Et ce qui est là est ce qui me convient pour le moment.

Merci, je considère ce problème comme résolu.
Meilleure solution
parsimonhi a écrit :
Bonjour,

Ha, il me semble avoir compris (j'avais lu trop vite la toute première phrase de ton premier post : mea culpa).

Tu as donc été tester ton site sur un testeur de site.

Bah, tu t'en fous de ce qu'ils racontent, et puis voilà Smiley smile

Amicalement,


Oui, mais les sites de test rendant parfois des services, en tous cas à mon niveau. Et ils sont loin de tous avoir la même façon de noter les sites.
JENCAL a écrit :

Merci pour ces précisions ^^
Pognon ou pas, c'est de l'idiotie de partager du porn sur un forum spé dev.
Je me demande bien comment fonctionne la rémunération, s'il y a.


La rémunération ? Je répondrais bien, mais je vais rester dans les clous de ce forum Smiley cligne
Tant qu'il n'enlève pas le "height", ça va, non ?
Cordialement.
Sujet clos
Aller à