HTML5 Responsive Design: How to Determine the Real Dimensions of an Image in JavaScript

Share this article

Responsive design is one of the most useful web techniques to appear during the past few years. A website layout can adapt to a device’s screen and look beautiful no matter what resolution is used. Responsive images are normally coded without width and height attributes, e.g.


<img id="myimage" src="myimage.jpg" alt="my image" />
The image will size itself and we can add a little CSS to ensure an image cannot exceed its real dimensions.

#myimage
{
	max-width: 100%;
}
It’s often necessary to manipulate these scaled images in JavaScript; perhaps for a game, lightbox or animation effect. In those situations, you need to determine the image’s real height and width. However, the width and height properties return the current (resized) dimensions:

var myimage = document.getElementById("myimage");
var w = myimage.width;	// current width, e.g. 400px
var h = myimage.height;	// current height, e.g. 300px
Fortunately, the modern HTML5 browsers provide two further properties:

var rw = myimage.naturalWidth;	// real image width
var rh = myimage.naturalHeight;	// real image height
The properties are supported in IE9, Firefox, Chrome, Safari and Opera. Note the image must be fully downloaded before the dimensions are available. To ensure it’s ready, you can either attach a “load” event to the window or the image itself or check the image’s .complete property before testing the dimensions.

IE6, 7 and 8

.naturalWidth and .naturalHeight are not supported in the older editions of Internet Explorer. We can still determine the real dimensions by loading the image into an in-memory object and examining the standard width and height
properties, e.g.

var myimage = document.getElementById("myimage");

if (typeof myimage.naturalWidth == "undefined") {
	// IE 6/7/8
	var i = new Image();
	i.src = myimage.src;
	var rw = i.width;
	var rh = i.height;
}
else {
	// HTML5 browsers
	var rw = myimage.naturalWidth;
	var rh = myimage.naturalHeight;
}
I’m continually amazed to discover these new properties and methods; they make our lives a little easier.

Frequently Asked Questions on HTML5 Responsive Design Image Dimensions

What is the importance of using responsive images in web design?

Responsive images are crucial in web design because they automatically adjust to fit the size of the device screen that the website is being viewed on. This ensures that images are not too large or too small, providing an optimal viewing experience for the user. It also helps to reduce the amount of data that needs to be downloaded, which can improve the speed and performance of the website.

How can I make an image responsive using HTML5?

To make an image responsive in HTML5, you can use the ‘img’ tag with the ‘srcset’ attribute. The ‘srcset’ attribute allows you to specify different images to be used at different screen resolutions. For example, you could specify a smaller image to be used on smaller screens and a larger image to be used on larger screens. This ensures that the most appropriate image is used for each device, improving the user experience and performance of the website.

What is the difference between ‘srcset’ and ‘sizes’ attributes in HTML5?

The ‘srcset’ attribute in HTML5 allows you to specify different images to be used at different screen resolutions. On the other hand, the ‘sizes’ attribute allows you to specify the layout size of the image, which can be different from the actual size of the image. This can be useful when you want to control how much space an image takes up on the page, regardless of the actual size of the image.

How can I use CSS to make images responsive?

You can use CSS to make images responsive by using the ‘max-width’ property. By setting the ‘max-width’ property to ‘100%’, the image will scale down if it has to, but never scale up to be larger than its original size. This ensures that the image always fits within its container, providing a responsive design.

What are the best practices for using responsive images?

Some best practices for using responsive images include: using the ‘srcset’ and ‘sizes’ attributes in HTML5 to specify different images for different screen resolutions, using CSS to control the size and layout of the images, and optimizing your images to ensure they load quickly and don’t slow down your website. It’s also important to test your images on different devices and screen sizes to ensure they are displaying correctly.

How can I test if my images are responsive?

You can test if your images are responsive by viewing your website on different devices and screen sizes. You should also use the developer tools in your web browser to simulate different screen sizes and resolutions. This will allow you to see how your images adjust and scale to fit different screens.

Why are my images not displaying correctly on different devices?

If your images are not displaying correctly on different devices, it could be because they are not properly optimized for responsive design. This could mean that the images are too large or too small, or that they are not scaling correctly to fit different screen sizes. You should check your HTML and CSS code to ensure that you are using the correct attributes and properties for responsive images.

Can I use JavaScript to make images responsive?

Yes, you can use JavaScript to make images responsive. JavaScript can be used to dynamically change the ‘src’ attribute of an image based on the screen size or resolution. However, this can be more complex and less efficient than using HTML5 and CSS, so it’s generally recommended to use these methods first.

What is the impact of responsive images on SEO?

Responsive images can have a positive impact on SEO. By ensuring that your images are properly optimized for different devices and screen sizes, you can improve the user experience on your website. This can lead to increased engagement and lower bounce rates, which can improve your website’s ranking in search engine results.

How can I optimize my images for responsive design?

To optimize your images for responsive design, you should ensure that they are the correct size and resolution for each device and screen size. You can use the ‘srcset’ and ‘sizes’ attributes in HTML5 to specify different images for different screen resolutions. You should also compress your images to reduce their file size and improve the load time of your website.

Craig BucklerCraig Buckler
View Author

Craig is a freelance UK web consultant who built his first page for IE2.0 in 1995. Since that time he's been advocating standards, accessibility, and best-practice HTML5 techniques. He's created enterprise specifications, websites and online applications for companies and organisations including the UK Parliament, the European Parliament, the Department of Energy & Climate Change, Microsoft, and more. He's written more than 1,000 articles for SitePoint and you can find him @craigbuckler.

CSS3HTML5 Dev CenterHTML5 Tutorials & ArticlesjavascriptResponsive Design
Share this article
Read Next
Get the freshest news and resources for developers, designers and digital creators in your inbox each week
Loading form