how to specify dimensions of an image in HTML, CSS or Javascript

Images are an integral part of any or at least most webpages. Almost every single webpage that you find on the internet will have at least one image in it. Of course, you might find some manual pages (and some pages on this blog) that might be devoid of any image, but they are usually far and few in between.

There are many advantages to having images on your webpage. Some of the pros of having an image on the webpage is

  • User/Visual Appeal: Studies have shown that users respond better to images and to content that are juxtaposed with images.
  • Search Engine Optimization: A properly optimized image on a page can help you rank not only the organic search results, but also rank in the image searches.
  • Better Content: Images can usually describe or explain the content or the concept better. A picture (can be) worth a thousand words

From a page speed perspective (and hence from an SEO perspective), it is important to serve properly scaled images. Often times, you would have seen website optimization tips to serve images that are already been scaled to the exact image dimensions. It may not always be possible to do so depending on the website design…especially a fluid or responsive layout.

When you set the image dimensions (display size) to match the actual image size, it helps with the faster rendering of the webpage. In most modern browsers images are downloaded independently and often by a separate connection than the webpage content. This allows the browsers to render the pages faster without waiting for the images.

Ideally, for best optimization of the images the actual image size will match the display dimensions of the image. You will also explicitly set the dimensions in the code to let the browsers know the image size.

If you have a responsive layout then it is possible that you will not know the screen size in order to manipulate the image size exactly. It is quite possible in such cases that the display dimension will not exactly match the actual image size. It still helps the browser the know ahead of time the image dimensions that you want to be displayed it as.

There are several different ways an image can be added to your webpage. The exact and definite way that is done is known only to whoever might have implemented the code, but we will see some of the popular ways and how it is usually done. Then we will see how you can reliably set the exact image dimension that you need…

in HTML

The most common way to display an image is to code the img tag directly in the HTML code, with the src attribute specified. An example of an image tag is

<img src="/path/to/the/image/file" title="The image title" />

If you like to specify the image dimensions right in the img tag, then you have two options. The img tag supports two separate attributes named width and height where you can set the size in pixels. The following example sets the image to be 600 pixels by 400 pixels.

<img src="/path/to/the/image/file" title="The image title" width="600" height="400" />

The other option is to use the style attribute, where you can set the width and height properties for the image. Again it works the same way with a slightly different syntax. The following example works exactly as the above one.

<img src="/path/to/the/image/file" title="The image title" style="width:600px; height:400px;" />

in CSS

Another way to specify the image dimensions is using the cascading style sheets (or CSS files). The CSS code can either be in an external file or in the HTML file itself, inside the style tags.

The code is exactly the same as we saw in the previous section, but when used from with the CSS file it is associated with a class name or a CSS selector.

<style>
.wideimg {
width: 600px;
height: 400px;
}
</style>

Now, you can use the CSS class .wideimg with any img tag to give it the desired width and height. With in the HTML code, the img tag will look like this.

<img src="/path/to/the/image/file" title="The image title" class="wideimg" />

Specifying the image dimensions inside an external CSS file makes the design modular and gives you better flexibility to deal with responsive layouts. You can change the image dimensions with out modifying each and every page where the image is displayed. It also gives you the ability to vary the image dimensions according to screen sizes.

with JavaScript

Another way to display the images is by DOM manipulation using JavaScript. This is extremely useful when you have to display or change images dynamically based on a user interaction or an Ajax response etc. A sample JavaScript code to add or append an image to a HTML div element will look something like:

<script>
var newImage = document.createElement("img");
newImage.setAttribute("src", "/path/to/the/image/file");
newImage.setAttribute("class", "wideimg");
newImage.setAttribute("width", "600px");
newImage.setAttribute("height", "400px");
document.getElementById("imagediv").appendChild(newImage);
</script>

The basic technique remains the same. You create a new HTML image element dynamically with all the attributes, just as you would have written it out in HTML and then append it to the appropriate element in the DOM. If you are using a JavaScript development framework or library such as JQuery or Dojo then the code is even simpler and easier.

In order to specify dimensions, you can either set the attributes width and height or use a CSS class. The above code sets both just to show it as an example. You need to specify only one or the other.

There are various different measures you can use to specify the dimensions just as with any other HTML element. The images are usually specified as pixels, which we have used in examples through out this post. You can also use percentage (%) which typically specifies the size relative to the parent element. Other measures of length such em, rem and pt will work just the same.