How to Resize an Image using PHP,JavaScript and CSS

If you are dealing with Web design or any such development work you might have faced the problem of resizing images to fit the current viewable area on any web page , Now you can do it in only two possible ways.

1. Server side Resizing – PHPimage

2. Client side resizing – JavaScript and CSS

Benefits of Server side resizing are easily visible as whole of the images need not be downloaded to users browser ( this stands true for Very large and HQ images) , but this requires coding and storing the resized version on your server

While client side is good if the image size is not large, ie.around 100-200 KB

image

for PHP resizing you can use the simplest possible resizing script known as TimThumb ( there are several others but this one is very stable and handles PNG/GIF and transparency issues well)  but this also needs a writeable cache folder on your server where all image resizes are stored , resizing is simple with this just call this script with given dimensions and it does the rest

<img src="/scripts/timthumb.php?src=/images/whatever.jpg&h=150&w=150&zc=1" alt="" />

Now another method that can be used is based on Javascript and it can be found here ( although people have commented on it’s durability as if you use the browser back button it fails to resize)

and the last method is based on CSS and believe me this is the easiest one to work with if you know what is your maximum width and height and it preserves the aspect ratio too ,like the earlier two methods.

So if you wish to have a maximum height and width of 500px,300px respectively  then just add this to your style.css file

 

.resize {
width: 300px;
height : auto;
}

.resize {
width: auto;
height : 500px;
}

and in your image just add this class as

<img src=”http://www.myblog.com/myimage.jpg”  class=”resize” alt=” my image” />

I have tried the PHP method and this CSS one too, and I loved this CSS method as it is very easy to add and I had images ranging from 100-200 KB so this CSS method worked out best, What suits you is your own thinking and requirement .

Hope it helped ..


This entry was posted on Tuesday, December 2nd, 2008 and is filed under Tips and Tricks, Tutorials, Wordpress. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.

One Response to “How to Resize an Image using PHP,JavaScript and CSS”

  1. Nicholas

    It sounds like you are gathering lots of different ideas in your blog. This is great stuff.

Leave a Reply

See What others were Looking For !!

resize image using javascript (7),javascript resize image (5),timthumb aspect ratio (5),image resizing using javascript (4),how to resize images using javascript (4),how to call image then resize in flash (3),javascript resize images (3),how to resize the image using javascript (3), (3),tips on image auto resize in webpage (2),php image stroke (2),image resize javascript (2),timthumb auto resize (2),css img stroke (2),how to resize an image using php (2),how to resize image using php (2),timthumb php disable cache (2),resize images using javascript (2),Javascript Image auto resize (2),timthumb ratio (2)