Opacité survol, petit coup de pouce html :)
Fermé
flea07
Messages postés
9
Date d'inscription
dimanche 14 juin 2015
Statut
Membre
Dernière intervention
2 août 2017
-
2 août 2017 à 14:12
Pitet Messages postés 2826 Date d'inscription lundi 11 février 2013 Statut Membre Dernière intervention 21 juillet 2022 - 2 août 2017 à 17:27
Pitet Messages postés 2826 Date d'inscription lundi 11 février 2013 Statut Membre Dernière intervention 21 juillet 2022 - 2 août 2017 à 17:27
A voir également:
- Opacité survol, petit coup de pouce html :)
- Editeur html - Télécharger - HTML
- Coup de pouce orange - Guide
- Nbsp html ✓ - Forum Webmastering
- Petit l ✓ - Forum Loisirs / Divertissements
- Espace en html - Astuces et Solutions
2 réponses
avion-f16
Messages postés
19246
Date d'inscription
dimanche 17 février 2008
Statut
Contributeur
Dernière intervention
21 avril 2024
4 497
2 août 2017 à 14:33
2 août 2017 à 14:33
Bonjour,
Voici le code modifié :
L'image doit au final être chargée, qu'elle soit hébergée sur ton propre domaine ou sur un autre domaine. Pour réduire le temps de chargement de manière notable, il faut réduire la dimension de l'image et/ou sa qualité. Toutefois, le fait de charger des fichiers depuis des adresses différentes permet d'améliorer très légèrement les performances dans le cas où le nombre de fichiers à charger est important. Il est notamment recommandé de placer tous les fichiers statiques (images, css, js, etc) sur un domaine à part sur lequel les cookies sont désactivés (pour réduire le volume des échanges HTTP) et le cache côté navigateur est activé.
Donc pour répondre à ta question :
Est-ce que cette méthode d'intégration pour les images permet de baisser le poids du contenu de mon site web ?
- Le poids devant être chargé par le navigateur reste le même
- Les performances sont très légèrement améliorées car plusieurs fichiers sont chargés en parallèle
- Le poids des images hébergées en externe n'est pas compté par ton hébergeur
Voici le code modifié :
<style>
.lien-hover {
opacity: .5;
}
</style>
<a onmouseover="this.className = 'lien-hover';" onmouseout="this.className='';" data-flickr-embed="true" href="https://www.flickr.com/photos/157160288@N06/36174693656/in/dateposted-public/" rel="nofollow noopener noreferrer" target="_blank" title="plaquette png"><img src="https://farm5.staticflickr.com/4322/36174693656_6febf0f96e_o.png" width="588" height="686" alt="plaquette png"></a><script async src="//embedr.flickr.com/assets/client-code.js" charset="utf-8"></script>
L'image doit au final être chargée, qu'elle soit hébergée sur ton propre domaine ou sur un autre domaine. Pour réduire le temps de chargement de manière notable, il faut réduire la dimension de l'image et/ou sa qualité. Toutefois, le fait de charger des fichiers depuis des adresses différentes permet d'améliorer très légèrement les performances dans le cas où le nombre de fichiers à charger est important. Il est notamment recommandé de placer tous les fichiers statiques (images, css, js, etc) sur un domaine à part sur lequel les cookies sont désactivés (pour réduire le volume des échanges HTTP) et le cache côté navigateur est activé.
Donc pour répondre à ta question :
Est-ce que cette méthode d'intégration pour les images permet de baisser le poids du contenu de mon site web ?
- Le poids devant être chargé par le navigateur reste le même
- Les performances sont très légèrement améliorées car plusieurs fichiers sont chargés en parallèle
- Le poids des images hébergées en externe n'est pas compté par ton hébergeur
Pitet
Messages postés
2826
Date d'inscription
lundi 11 février 2013
Statut
Membre
Dernière intervention
21 juillet 2022
524
2 août 2017 à 17:27
2 août 2017 à 17:27
Salut,
Pour gérer l'opacité au survol, on peut utiliser directement la pseudo classe css :hover :
Bonne journée,
Pour gérer l'opacité au survol, on peut utiliser directement la pseudo classe css :hover :
.hover-opacity:hover {
opacity: .5;
}
<img class="hover-opacity" src="http://via.placeholder.com/350x150" alt="" />
Bonne journée,
2 août 2017 à 14:39
L'image que je souhaite charger est hélas trop lourdes (7 Mo) elle est en 300PPP si je la passe en 72 PP la qualité devient vraiment trop médiocre (elle pixelise) connais-tu une méthode de compression qui ne pénalise pas trop la qualité ?
2 août 2017 à 15:08
Afin de rendre le chargement de ton site rapide, je te conseille :
- D'afficher des miniature en basse/moyenne qualité de chacune de tes images
- N'afficher que les premières images, charger les autres au fur-et-à-mesure que le visiteur descend
- Permettre l'ouverture d'une image de taille moyenne et de qualité moyenne au clic (avec Lightbox2 par exemple)
- Afficher un lien permettant de télécharger l'image en qualité/résolution max
2 août 2017 à 15:53