If you work with uploads or media galleries, you’ll often need Image Resolution in JavaScript. In this guide, you’ll quickly learn how to read an image’s true width and height in the browser and display the result on the page. It’s fast, reliable, and can be easily reused.
Knowing an image’s pixel size lets you validate uploads and maintain sharp product photos for e-commerce. It also helps you enforce hero banner or ad specifications and check image size in the browser before sending files. This also helps pick the right responsive image or crop ratio on the fly.
Example of JavaScript Get Image Resolution in the Browser
Let’s start with an example where you upload an image and immediately see its resolution. Sometimes you need this to make better UI decisions based on user input.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Find Image Resolution in JavaScript Demo</title>
<link
href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css"
rel="stylesheet"
/>
</head>
<body class="bg-light">
<div class="container py-5">
<div class="row justify-content-center">
<div class="col-md-8 col-lg-6">
<div class="card shadow-sm">
<div class="card-body">
<h1 class="h4 mb-3">Check Image Resolution</h1>
<div class="mb-3">
<label for="file" class="form-label fw-semibold"
>Choose an image</label
>
<input
id="file"
type="file"
class="form-control"
accept="image/*"
/>
</div>
<div id="result" class="text-muted">No image selected</div>
<img
id="preview"
class="img-fluid rounded mt-3 d-none"
alt="Selected image preview"
/>
</div>
</div>
</div>
</div>
</div>
<script>
const input = document.getElementById("file");
const preview = document.getElementById("preview");
const result = document.getElementById("result");
input.addEventListener("change", (e) => {
const file = e.target.files && e.target.files[0];
if (!file) {
result.textContent = "No image selected";
preview.classList.add("d-none");
preview.removeAttribute("src");
return;
}
const url = URL.createObjectURL(file);
const img = new Image();
img.onload = () => {
const w = img.naturalWidth;
const h = img.naturalHeight;
preview.src = url;
preview.classList.remove("d-none");
result.textContent = "Resolution: " + w + " X " + h + " px";
URL.revokeObjectURL(url);
};
img.src = url;
});
</script>
</body>
</html>When user uploads file, the script will loads it into memory then read it’s natural image size in pixels. It shows the image on the page and displays width × height in pixels. Use this pattern to read image size with JavaScript before upload or cropping.
Conclusion
In JavaScript, you can check image resolution with just a few lines. Moreover, you can validate uploads and keep visuals crisp throughout your site. Reuse it anywhere you need to get image width and height in JS, for better UX and performance. Image Resolution in JavaScript doesn’t have to be difficult. The pattern below is simple and gets the job done.