Comment récupérer la taille d'une image HTML ?

Réponses rédigées par Antoine
Dernière mise à jour : 2021-01-02 13:59:54
Thèmes : image - html - javascript - php
Question

Comment puis-je récupérer la taille, c'est à dire la dimension en pixels, d'une image HTML ?

Réponse

Pour récupérer la taille en pixels, d'une image HTML, coté client, vous pouvez utiliser JavaScript et ses éléments clientWidth et clientHeight :

<!DOCTYPE HTML>  
<html>
<head>
<title>Comment récupérer la taille d'une image HTML en JavaScript ?</title>  
</head> 
<body> 
<img src="https://www.collaborativejob.com/os.jpg" id="image">
<script>
window.onload = function MaFonction() {
var image = document.getElementById("image");
alert("La longueur de l'image est de " + image.clientWidth + " pixels, et la hauteur est de " + image.clientHeight + " pixels.");
}
</script>  
</body> 
</html>

Pour récupérer les dimensions d'une image HTML, coté serveur, vous pouvez utiliser PHP et sa fonction getimagesize() :

<?php 
list($longueur, $hauteur) = getimagesize("https://www.collaborativejob.com/os.jpg");
echo "Longueur de l'image en pixels : " . $longueur . "<br>";
echo "Hauteur de l'image en pixels : " . $hauteur ;
?>