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

Donne une classe a ton tag "a", disons "overlay", ensuite en CSS:
 

 
Voila.
 
Et pour le poids, non ton site ne devient pas plus léger.

Merci pour cette astuce, j'ai peur de ne pas tout comprendre, le code finale donnerait quoi du coup ?  
 
Aurais-tu une méthode pour que les images soient moins lourdes sans détériorer trop leur qualité ? J'ai essayé de les passer de 300 à 72 PPP mais elles pixelisent vraiment trop en baissant ce niveau de qualité

cette regle CSS se traduit par:
 
Lorsque tu tombes sur un tag "a" ayant pour classe "overlay", et que ce tag est survolé par la souris (le :hover), alors toutes images dans ce tag auront les propriétés opacité a 50%.
 
Pour ton site, le mieux habituelement pour gérer ca c'est le PNG.