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 – PHP

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

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 ..