Skip to content

jQuery Image Resize Plugin

Few days ago i wrote jQuery Plugin Tutorial, today i want to give away my first open source jQuery plugin: image resizer. I made sure that it’s compatible with all major browsers: IE6+, FF3, Opera10, Chrome (didn’t check with Safari, hope someone can do it for me).

The whole idea was to make it as simple as possible to resize image to given size. The common problem developers face is to resize image to (for example) no more then 150px width or no more then 75px height and because getting real image size is not as simple as it seems i think you will find this plugin useful.

About JavaScript Image Resizing

Before you download and start using it, keep in mind that depending on what you are trying to accomplish this plugin might not be the best solution for you. If you are trying to save some bandwidth by resizing image then this plugin won’t help you, because resizing is done on the client side, which means that server is sending to client image in the original size.

Image Resize Plugin Usage

Using plugin is as simple as applying it to the img tags:

$(".shrink-me").resize({maxHeight: 150});

This code will resize all images with class “shrink-me” to no more then 150px height.

Plugin accepts three options
1. maxHeight: maximal image height
2. maxWidth: maximal image width
3. scale: (default size=1) scales image.

You can execute plugin with just one or with all params given (actually you can even execute it without any parameter but it won’t do anything). If you execute plugin with all 3 parameters given then, first image will be scaled, then if maxWidth or maxHeight is exceeded image is resized further.

For example if you want to shrink all images to 50% of their original size, but no more then 100px width or 150px height you can write:

$("img").resize({
    scale: 0.5, // 0.5 = 50%
    maxWidth: 100,
    maxHeight: 150
});

Few IMPORTANT things to consider

1. Resizing is done by adding to <img /> tag attributes: height and width. If you need to add them to css as well then you need to do it manually

2. That should go without saying, but just for the record: you can use resize plugin only on <img /> tags.

Download

Download: jQuery image resizer.

Please post your: suggestions, feedback, bugs in comments. Thanks!

Published inProjects

37 Comments

  1. Hey Greg. after dizzying all around by this problem on my gallery page design. I found this really useful (I haven’t finish implement it yet) but I’m sure it’ll solve my problem here quickly… :)

    Thanks Greg

  2. Hi Greg, useful plugin. I’m really interested in resizing some images for my new widget ( articles similaires – will display similar posts and their thumbnails in the sidebar widget, much lighter than similar posts) – and you see, there is the code php to resize images.
    Uses all three parameters as yours but a cache as well to save a bandwidth. Will mail you the final code as soon as it’s done . You might do something more with that resizer.
    best regards,
    serge

  3. Harshal Harshal

    Hi Greg,

    Thanks for this, this was very useful. I have used this and modified it a bit to add a tooltip on any resized images with a link to display the original image.

    I have submitted my modified plugin to JQuery plugins. I hope you don’t mind. I have put a link to this post in there saying that I am using the code from you.

    http://plugins.jquery.com/project/ImageScale

  4. Hi @Harshal, sure i don’t mind, thanks for linking back to the blog.

  5. Thank you very much, this code works very well.

    ONe thing you’d may like to include is the microsoft property:

    img {
    -ms-interpolation-mode : bicubic;
    }

    This will make IE7 render it smoothly!

  6. I always like resizing plug in.. but the thing that is ALWAYS missing is a little sharpen.. in php it’s simple to do, can you implement it in JavaScript ?

  7. jng jng

    a nice one. very useful. thanx

  8. with Safari doesn’t work…

    best regards Marco

  9. Christian Christian

    Hi Greg,

    enjoyed your tutorial very much and have customized my gallery using this. Was wondering if it is ok to include an image gallery I have made that includes this plugin in a template selling on themeforest.net?

    Best,

    Christian

  10. Christian, sure, no problem you can use it anywhere you want, of course i always appreciate a link back to this post, but if not than that’s fine too.

  11. Ümit Ümit

    Hi i have an problem with your plugin.

    I’m taking image url’s from DB in codebehind and showing in a div.

    $(document).ready(function() {
    $(“body img”).imageScale({ maxWidth: 700, maxHeight: 700 });
    });

    I write that code after DIV createad.

    when image loading its not resize image.
    But after i refresh page its resize image bec image is loaded before.

  12. Doug Doug

    i started to use this. very useful.

  13. Hi Greg, great script!

    I have modified a bit if don’t mind.

    please check this link
    http://sandbox.devi.web.id/resizeImg

    tested under Windows XP with:
    – Firefox 3.6.10
    – Safari 5.0.1
    – IE6
    – Opera 10.61
    – Google Chrome 6.0.472.59

  14. Hi Greg.what a great code!

    How to do if I want trigger the event when the brower’s size is changed? Thanks.

    Best Regards

  15. @lucas try:

    $(window).resize(function() {
    $(“.shrink-me”).resize({maxHeight: 150});
    });

  16. Hussain Hussain

    This is one of the best resize jQuery plugin I have tested so far… Thank you for the good work…

  17. Hi, I’d like to use your plugin on my website, but I can’t find what licence are you using. This is for me quite an issue so if you could included some licence or terms of use it would be great.
    Thanks.

  18. @Stepan, i do not have any license for it, but feel free to use it in any commercial project without attribution.

    So, that’s probably MIT license :)

  19. Stepan Stepan

    Thanks, you were helplful :).

  20. Eric Eric

    Can’t make it work, why don’t you put a demo or the full code ? I’m a total noob when I load the plugin and i add the following code to my page nothing happens :
    $(document).ready(function () {
    $(“.my_div_with_img_to_resize”).resize({maxHeight: 150});
    }

  21. Great script Greg – thanks a lot!

    Just thought I would add this in-case anyone else is having the same problem:
    I found none of my images would appear. On inspecting the generated code they were having their width and height set to 0. I ran it down to the DOM loading before the images, so they didn’t have naturalWidth/Height when the script looked. I solved the problem by moving the initialiser into a window.load call instead of document.ready. Now working like a charm.

    There may be a better way around this, but it worked for me.

  22. Anoop Anoop

    I am trying using this script but since I am also using other jquery plugins that uses Prototype.js so I receive the error

    $(“.profile_img_210”) is null

    Could any one please guide how to overcome this issue.

  23. andi andi

    Hi
    it give me an error:

    TypeError: Result of expression ‘this.tagName’ [undefined] is not an object.

  24. Hi Greg,

    Any ideas why the class has some positioning issues? I’ve looked in your .js code and found nothing that even mentions display type or positioning. Here are the problems I’ve run into and I’ve tried numerous CSS attributes to try to fix these issues.

    Here is the HTML that does scale my image:

    The wrapper “projectImg” displays as a ‘block-inline’ next to a left vertical nav bar.
    I’m trying to create a thumbnail navigation that sits just below the scaling image.
    I’ve tried numerous ways of nesting the main image and the thumbnail nav into a wrapper div but something about the scaling code is whigging it out.

    Any ideas why I am having trouble

    1) nesting the first wrapper inside another wrapper?
    2) when only nested in one wrapper, the positioning is very strange i.e. it pushes it way down the page.
    3) I cannot seem to control any div that sits below the scaling div. Everything seems to get forced to the left margin wheras the same div without the scaling code behaves just fine.

    It’s as if it is acting like it has absolute positioning – but the main reason I wanted to use your code is so I could place a div relative to the scaling div.

    Any help would be greatly appreciated!
    Best,
    -k

  25. Joscasam Joscasam

    Hi everybody…

    This plugin is great. It´s easy integrate to my web project; but I have one question. In Safari it doesn´t load the image. Somebody could help me with that?

    Thank so much and excuse my english.

    A lot of regards from Spain

  26. Joscasan Joscasan

    Hey don´t answer my last post. Finally I get it. I can see the image on Safari.

    Bye…

  27. Binu Binu

    Hi.. Greg, thanks for your post. But when resized a large image it get blurred. What i need to do? Is there any other plugin needed to install??

  28. Josh Currier Josh Currier

    Great little plugin, man. Just worked it into a WP header file for a friend and it’s resizing post images beautifully.

  29. Karlo Karlo

    Hi, I was curious if it keeps the aspect ratio. For example if you just set a max width, would it set the height automatically and keep the aspect ratio?

  30. Not working to me.Error display in library file like following.
    this.tagName is undefined

    if(this.tagName.toLowerCase() != “img”) {

    Please help!

Leave a Reply

Your email address will not be published. Required fields are marked *