Tutorial :How to display resized images on a web page while maintaining aspect ratio?


What is the best and quickest way to resize images on the client side using JavaScript?

EDIT: Sorry, I meant the best way to display an image resized on the client side..



<!DOCTYPE html>  <html xmlns="http://www.w3.org/1999/xhtml">    <head>      <title>Client-Side Image Resize (Why?!)</title>      <script type="text/javascript">        window.onload = function() {          var url = "http://www.google.com/intl/en_ALL/images/logo.gif";          var img = new Image();          img.onload = function() {            var w = parseInt((this.width + "").replace(/px/i, ""), 10);            var h = parseInt((this.height + "").replace(/px/i, ""), 10);              // 50% scale            w = (w / 2) + "px";            h = (h / 2) + "px";              var htmlImg = document.createElement("img");            htmlImg.setAttribute("src", url);            htmlImg.setAttribute("width", w);            htmlImg.style.width = w;            htmlImg.setAttribute("height", h);            htmlImg.style.height = h;            document.body.appendChild(htmlImg);          }          img.src = url;        }      </script>    </head>    <body>      <h1>Look, I'm Resized!</h1>    </body>  </html>  


If you are not too put off by flash, with flash10 now you have the choice of processing uploaded files on the client side before sending them to the server. So you could use a hidden/transparent/small flash object to allow the client to upload their image, have flash resize the image(it has some good image manipulation apis), then send the byte data to the server.

the as3 core lib has a jpeg and png encoders if you want to encode the image to either format before uploading.

If you don't have flash you can always download the flex 3(or 4) sdk and use flashdevelop to do it all gratis =)


Resizing before uploading would be a very powerful tool. This would reduce the time it takes to upload images to a server. Often our users have 5 mega-pixel images fresh off of their cameras and they have no clue how to reduce the size using an image editor. What we want uploaded is a 1500 pixel wide photo, jpg or png compressed to less than 500Kbytes.

This outfit Thin File claims to be able to do it but I haven't checked it out yet. I was rather hoping to find a way to use JQuery to do the same thing.


flash 10 has support for resizing images on client side:



http://www.shift8creative.com/projects/agile-uploader/index.html Resize before upload. Flexible, tight JavaScript integration, let's you use any back-end language, fast, good quality image.

A nicer demo than the main page that shows off the JavaScript integration: http://www.shift8creative.com/projects/agile-uploader/advanced-demo.html

Free as in beer. Hope it helps.


I'm not sure if you mean actually resize the image or just set the size that the image is displayed at. One is impossible, the other would be to set the width and height properties using jQuery.




If you're wanting to do it in a statement then the height and width properties would most likely be best.

If you're wanting something animated, you can use the .animate(...) command and set the height and width as parameters. That should make the image change a smooth transition.


Images should always be served at the size they are to be displayed. It is better to have multiple copies on the server instead of copying one file over the network and trying to manipulate on client side. Consider this:

  • waste of network resource to transfer 500X400 image when you actually need 100X80
  • similar waste of CPU in some imaging API to shrink/ enlarge the image on client side

Resizing an image is not plain change of height/ width. When you specify a size different than (either through styles, script etc) the original image size, the browser will use native API (win32 draw for example) to properly shrink/enlarge the image. Cropping the image (losing portions of image) is easier but seldom wanted.

Note:If u also have question or solution just comment us below or mail us on toontricks1994@gmail.com
Next Post »