Opacité survol, petit coup de pouce html :)
flea07
Messages postés
9
Date d'inscription
Statut
Membre
Dernière intervention
-
Pitet Messages postés 2826 Date d'inscription Statut Membre Dernière intervention -
Pitet Messages postés 2826 Date d'inscription Statut Membre Dernière intervention -
Bonjour,
J'aimerais intégrer cette image sur mon site via ce code HTML :
<a 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>
Cependant j'aimerais que l'image baisse d'opacité ( à 50%) lors de d'un survol souris, savez-vous quel code intégrer ?
Est-ce que cette méthode d'intégration pour les images permet de baisser le poids du contenu de mon site web ?
Merci pour votre expérience :)
J'aimerais intégrer cette image sur mon site via ce code HTML :
<a 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>
Cependant j'aimerais que l'image baisse d'opacité ( à 50%) lors de d'un survol souris, savez-vous quel code intégrer ?
Est-ce que cette méthode d'intégration pour les images permet de baisser le poids du contenu de mon site web ?
Merci pour votre expérience :)
A voir également:
- Opacité survol, petit coup de pouce html :)
- Editeur html - Télécharger - HTML
- Coup d'un soir avis ✓ - Forum Consommation & Internet
- Offre coup de pouce orange fibre - Accueil - Box & Connexion Internet
- Br html ✓ - Forum Webmastering
- Petit 2 ✓ - Forum Bureautique
2 réponses
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
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é ?
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